The concept of semantics originates from the field of linguistics. It literally means the “study of meaning”. So, semantics is the discipline of finding connections between different signifiers such as words, symbols, and signs. As HTML is a markup language rather than a programming language, semantics is a very important part of it. If you use HTML5 semantics wisely you can make your website more accessible, improve user experience, and get better search engine rankings as well.
In this guide, we will look into what is HTML5 semantics and what it can do for SEO. Then, we will give you some hands-on tips that can help you improve the semantics of your HTML pages.
What Is HTML5 Semantics?
Semantics has been an integral part of HTML from the very beginning of the language. However, it only got widely noticed after the introduction of HTML5. It’s less well-known that HTML4.01 and versions before it also included semantic tags, most importantly the <html>, <head>, and <body> tags that are required on all HTML pages.
Besides, all HTML tags that have some kind of meaning, such as headings (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>), ordered and unordered lists (<ol>, <ul>, <li>), paragraphs (<p>), images (<img>), tables (<table>, <thead>, <tbody>, <tfoot>, <tr>, <td>), form elements (<form>, <fieldset>, <label>, <input>, <textarea>), and links (<a>) are semantic elements, too.
HTML5 added multiple new semantic tags to the language, such as <figure>, <header>, <footer> (block-level tags) and <strong>, <em>, and <mark> (inline-level tags). However, the really big thing was the introduction of four sectioning tags: <article>, <aside>, <nav>, and <section>. They allow you to create a meaningful document outline for each of your HTML pages.
How Semantics Can Improve SEO?
Search engine rankings depend on many different factors. Google’s algorithm has put more and more importance on quality content during the last few years. As a result, if you want to rank high on Google and other search engines you need to write clear copy they can properly understand. This is where HTML5 semantics comes into the picture.
By default, search engine bots don’t understand the structure of your content. You can think about them as a blind person who doesn’t see images, layout, and styling elements. Although they can read the text (so keyword optimization is still important), they don’t see how different parts of your content are related to each other. You can add meaning to this meaningless structure in two different ways:
- using HTML semantics,
- via rich snippets or, with other words, structured data.
As rich snippets is a whole other topic, in this guide we won’t discuss it. However, if you want to create quality content that ranks well in search engines you need to put both techniques into use.
Find the Best Semantic Elements
HTML5 semantics at first looks easy, however, there are some pitfalls you need to avoid. The most important thing to understand is that not all semantic tags are for the same purpose. There are three main types of semantic tags:
- block-level sectioning elements,
- block-level non-sectioning elements,
- inline-level elements.
Block-level sectioning elements create a document outline that is readable by search engine bots. As I mentioned before, there are four of them:
- <article> for standalone content pieces such as articles or reviews,
- <section> to mark up other content blocks that logically belong together, for instance tabbed content,
- <aside> for sidebars,
- <nav> for navigation sections.
Surprisingly, the <main> tag is not a sectioning element, however it’s still a semantic tag. You can add the four sectioning elements any times to your HTML page. However, you can use <main> only once on each HTML page.
How Are Sectioning Elements Excluded from the Document Outline?
The interesting thing about sectioning elements is that they mark up content that exists outside of the outline of the entire page. So, sectioning elements can have their own headings (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>), headers (<header>), and footers (<footer>).
These non-sectioning semantic tags belong only to the sectioning element but doesn’t add to the outline of the entire page. First, this might sound a bit strange but you can understand it by paying attention to the heading sections. For example, this is valid HTML5 code:
<html>
<head>...</head>
<body>
<h1>Title of the Entire Page</h1>
<h2>Subtitle of the Entire Page</h2>
<article>
<h1>Title of the Article Section</h1>
<h2>Subtitle of the Article Section</h2>
</article>
</body>
</html>
This is a very simple code example, but you can see that you can use a separate <h1> tag for the article. It’s possible because <article> exists outside of the page’s outline, otherwise you couldn’t use two <h1> tags on the same page.
Headers and footers behave in the similar way. For example, the <article> tag can have a separate <header> and <footer> that semantically will only belong to it (but will be excluded from the outline of the entire page):
<html>
<head>...</head>
<body>
<header>Header of the Entire Page</header>
<article>
<header>Header of the Article Section</header>
<p>...</p>
<p>...</p>
<footer>Footer of the Article Section</footer>
</article>
<footer>Footer of the Entire Page</footer>
</body>
</html>
This kind of semantic exclusion is pretty useful from a SEO point of view, as search engines can treat self-contained blocks as separate entities.
Use Non-Semantic Elements Wisely
Besides semantic elements, you also need to pay attention to non-semantic tags if you want to do well in search engine rankings. Non-semantic tags do have their own purpose, too. They can be used when you need to mark up content solely for styling reasons.
For instance, when you want to add a left margin to a group of content that doesn’t relate to each other, you need to introduce a HTML class so that you can style it with CSS. This is when the non-semantic <div> tag is the best choice, as it doesn’t assign a structural meaning to the group. The block-level <div> tag also has an inline-level equivalent: <span> you can use in the same way, just for inline content.
Many times, it’s not easy to decide whether you need a semantic or non-semantic element. Generally speaking, too many semantic tags can also harm the document outline, as the page structure will be too complicated.
Plan Your Document Outline
Planning your document outline is its own form of art that takes a lot of practice. However, there are tools that can help you to create a logical document structure. HTML outliners that analyze your page structure are such tools.
There are standalone apps such as HTML Outliner where you only have to copy-paste your HTML code or insert the page URL, and the app returns the document outline with all the potential issues such as missing headings. Look through the outline and try to estimate if it’s neither too simple nor too complicated relative to the complexity of your page.
You can also make use of browser extensions such as HeadingsMaps for Firefox or HTML5 Outliner for Chrome. The biggest advantage of these browser extensions is that they let you analyze the document outline of any URL. So, you can quickly check out if your competitors use proper HTML5 semantics. Besides, it’s also a good learning opportunity to understand how other developers use HTML5 semantics to mark up their page structure.
Some developers also use text-based browsers such as the Lynx browser to check the document outline and link structure. These browsers were originally created for visually impaired users who browse the web with screen readers. However, as search engines “see” the web similar to blind people, a text-based browser can be a very useful tool to catch discrepancies and errors.
Make Your Text Blocks Skimmable
While it’s important to pay attention to the document outline, it’s also essential to keep your text blocks skimmable. It’s not only good for readability but also helps search engines better understand your content. HTML tags typically used to “break up” content are mostly semantic tags such as <img>, <figure>, <video>, <audio>, <ul>, <ol>, and others.
Besides, also don’t forget to add meaning to flow text in the form of hyperlinks and semantic inline tags such as <strong> for important elements (recommended instead of the non-semantic <b> tag), and <em> for stressing emphasis (recommended instead of the non-semantic <i> tag).
Wrapping Up
HTML5 semantics is an important step of creating content that ranks well in Google and other search engines. It has a relatively flat learning curve, so it’s worth integrating it into your workflow, as it can add a lot of value to your site.
Content is an important aspect of user experience. It’s not enough to write engaging copy, you also need to present it in a way that users and search engines can make sense of it. To learn more about how to manage your content, check out our complete content checklist or our collection of the best content scheduling tools for WordPress sites, too.
