Semantics matter: Choosing the right blocks for your content
Paragraphs, headings, and lists, oh my! When creating new posts and pages, it's important to choose the right tool for the job.
The editing interface in WordPress is called the “Block Editor” because it allows you to assemble various “blocks” to create your content. We break up our content into blocks like paragraphs, lists, and headings. And we make choices that let our content be pretty and readable.
But we can’t make choices only to make things pretty. It’s important that we also always choose the right (semantically correct) block for the job.
What are semantics?
When we talk about semantics (in website-speak), we mean that choices have particular meanings. Everyone knows that “red means stop!” So just like you would never make a stop sign green, there are certain rules to follow on the web.
We need to pick the right elements that convey our meaning properly, instead of unintentionally choosing elements for how they look, without realizing they mean something else.
When you choose the right blocks, everyone wins. Following semantics helps your content be more accessible and inclusive. People visiting your site can read the content clearly and easily. And the resulting code is formatted properly, so that screen-readers, search engines, and other tools can read and understand it too.
(In general, you shouldn’t have to write or read the code — I’m giving examples here for your reference.)
Headings
If something is a heading or subhead, make it a heading.
For headings, use
Don’t use
By choosing the Heading block, you are ensuring the resulting HTML is wrapped with properly formatted heading tags. If you were to look under the hood, the code should look like this:
<h2>My first section heading</h2>Important: Headings need to go in order
The number of the heading you choose (like “H2” or “H4”) has semantic meaning. Never pick a number just based on the size you want something to look.
Arrange your content in order — think of an old-school English class outline.
- In nearly all cases, the main page or post title gets the “H1” declaration.
- So when you divide your content into sections further, start with “H2.”
- Then, if an “H2” section has sub-divisions, they get “H3,” etc.
The resulting content is nicely divided, clear, and understandable. If you were to pull out only the headings of your document, minus all the other text, it should make a nice, clear outline that makes sense and doesn’t skip any levels.
Under the hood, you might see this:
<h2>My first section heading H2</h2>
<p>A nice paragraph here.</p>
<h3>Section part one H3</h3>
<p>This section's text.</p>
<h3>Section part two H3</h3>
<p>This section's text.</p>Paragraphs
For normal paragraphs, use the standard “Paragraph” block.
For paragraphs, use
Don’t use
By choosing the Paragraph block, you are ensuring the resulting HTML is wrapped with properly formatted paragraph tags. If you were to look under the hood, the code should look like this:
<p>Here is a nice paragraph, formatted correctly.</p>“But I want my paragraph to be prettier!”
In the past, people often chose Headings for styling reasons alone — to make certain text bigger, different, or styled. Now there are better ways.
First start with a paragraph. Then, you could:
- Use the “Preset size” drop-down in the Block settings to choose a different size.
- Use the “Color settings” area in the Block settings to choose a different color (paying attention to accessibility & contrast)
Here your code is still based on a paragraph tag, but also has additional styling. If you looked under the hood, it may look something like this:
<p class="has-medium-size has-wine-color">Here is a nice paragraph, formatted correctly.</p>Or choose a more appropriate (still semantic) block:
- If something could be more easily read in list form, use the List block.
- To pull out a quote or a particular bit of text, use the Quote block or the Pullquote block.
Lists
For things that are lists, use the standard “List” block.
For lists, use
Don’t use
By choosing the List block, you can reap the benefits of a nicely styled list (either bulleted or numbered), where all of the indentations work right and the list is clear and scannable.
You are ensuring the resulting HTML is wrapped with properly formatted list tags. If you were to look under the hood, the code should look like this:
<ul>
<li>My first list item</li>
<li>My second list item</li>
</ul>Quotes
If you have a testimonial or a nice bit of copy you want to pull out, you can use a quote block or a pullquote block.
If your quote has a citation line (naming the person who said the bit of text), use the citation area available in the block itself.
For quotes, use
Don’t use
By choosing one of the Quote blocks, your quote will be styled to be both pretty and semantic.
Under the hood, the quoted text might look like this for a basic quote:
<blockquote>Something nice somebody said.</blockquote>or like this for a quote with a citation:
<blockquote class="wp-block-quote">
<p>Quote here</p>
<cite>Citation here</cite>
</blockquote>Tables
If you have content that needs to be in a table, such as a price list or a schedule, use the table block.
Note that tables are a very particular type of HTML formatting. When you actually have a table, use a table! But don’t use them for things that aren’t tables.
For tables, use
Don’t use
Top photo by Erik Mclean from Pexels.
