What is semantic HTML5?
If you know a little about HTML you will know that HTML tags are (mostly) used to format content - these tags tell the browser how to display the content on the page. They give no indication as to what type of content they contain or what role that content plays in the page.
Semantic HTML5 addresses this shortcoming by defining specific tags to indicate clearly what role is played by the content those tags contain. That explicit information helps robots/crawlers like Google and Bing to better understand which content is important, which is subsidiary, which is for navigation, and so on. By adding semantic HTML tags to your pages, you provide additional information that helps Google and Bing understand the roles and relative importance of the different parts of your page.
div and span tags. Non-semantic / generic.
These are examples of non-semantic HTML elements. They serve only as holders to convey to the browser how the content should be displayed. They give no information about the role the content they contain plays on the page.
Examples of semantic tags.
These are semantic elements. They clearly define the role of the content they contain.
Why do I need to use it?
For sighted users, it is usually easy to identify the various parts of a web page at a glance. Headers, menus, and (hopefully) the main content are all immediately, visually apparent. Now imagine you are blind.
Google and Bing’s bots (spiders) are, if not blind, seriously sight impaired. For them, the visual clues are phenomenally difficult to see and understand.
They need your help. If you can successfully communicate to Google and Bing which part of the page is the header, which the footer and which is for navigation they will thank you. Most importantly, by telling them which is the most important content, you give them an explicit instruction to prioritize that content.
Here is our page.
On its own, using semantic HTML5 will not revolutionize your SEO performance (sorry!). As you know, successful SEO is a cumulation of many, many, many small details. This is one of those small details that will improve Google and Bing’s understanding (and confidence in their understanding) of your content, and that will help your SEO efforts.
Looking further forwards, as SEO evolves over the coming years, explicit and coherent communication with these machines will be one of the two cornerstones of your SEO / AEO strategy (see below).
What does it look like?
Examples of semantic HTML tags include <nav>, <footer> and <section>. There are many more semantic HTML5 tags that can be used (for example <blockquote> and <em>), but in this article I am only looking at those semantic HTML tags that you will need to divide the page content into its basic parts.
The following HTML5 tags can be used in the place of <div> tags to break your page content into identified parts each of which fulfills a specific role. As you can imagine, machines like Google and Bing LOVE this.
Semantic HTML5 tags we will be using in this article.
This clear delimitation and explicit attribution of roles to each part of the content makes the page much clearer and easier to index correctly for Google and Bing.
NB Since these tags all behave exactly like <div> tags they can simply replace existing <div>s in the page without affecting the layout. In a lot of cases implementing semantic HTML5 can be as easy as finding the correct pair of <div> and </div> and replacing them.
Examples of Semantic HTML5
Super simple semantic HTML5 Example:
Here we have simply defined what role each part of the page plays. When you start applying HTML5, this is a safe place to start - header, nav, main, footer.
Super simple example with most important elements: header, footer, nav, and main.
It is better to have a super simple implementation that is 100% correct, rather than a complex implementation that is incorrect.
An inaccurate implementation sends conflicting and confusing signals which will make things worse, not better.
A simple and correct implementation is already a big step forward in your communication with Google and Bing. Don’t be overly ambitious; get it wrong, and you could create more problems than you solve!
More Complex Examples
Using sections and articles:
Here we have made a hierarchy within our main content. There is an all-encompassing article that identifies the central content within the main tag. This gives an overview of the topic of that part of the page. Within that article, we have multiple sub-topics that develop the main topic that is identified by the nested sections.
Notice that the design (the orange blocks) are not being used to define the semantic areas of the page.
Notice that the design (the orange blocks) are not being used to define the semantic areas of the page. Looks a little confusing, but shows well that layout HTML and semantic HTML5 have distinct roles.
In the real world, the semantic markup often follows the layout more than this example. General rule: A section forms part of something else. An article is its own thing.
Also note, that here I added a nav section to the footer. Logically, just like the header, the footer contains navigational elements.
Here we have added two pieces of directly related content to the principal article of content. Using asides, we indicate that the related content (aside) is optional. The principal section of content can be shown without the aside(s) and still be understood.
Indirectly Related Aside
Note: an aside does not have to be a sidebar beside the main content. It can also be used for blocks below the main content containing a title, text, and link to another page
Here we have identified some indirectly related content to the page, outside the principal article of content. Here we indicate that the content in the aside is not directly related to the principal article.
That is enough for most needs.
Our final version
This is very good!
Section vs. Article
There is much discussion about this. There is no fixed rule about sections and articles, and their implementation is pretty flexible. They are more or less the same and can be used interchangeably most of the time. Just be sure to be logical and consistent.
Personal tip: I have found that nesting sections inside an article of content is both logical for a machine, but also for a human (the HTML code will be easier to read for the developer).
Elements can nest other elements. For example, an article can have its own <header>, <footer>, <h1> (as seen above), and even <nav> (anchor links, are a good example). I have not given an illustration of this “super nesting’, and there is a reason for that: This is an SEO blog and, from an SEO standpoint, there is no real benefit from pushing the logic of semantic HTML5 this far.
As mentioned above, for SEO purposes, you should concentrate on providing a solid, simple structure.
What NOT to Do
Just a warning - I have seen many sites using the visual design as a guide for their HTML5 implementation. As seen above, this is not what semantic HTML5 is designed for.
Semantic HTML5 is not for design.
This (surprisingly typical) example simply duplicates the visual layout. Worse than pointless, this indicates that the page contains 4 different topics, rather than one topic and 3 sub-topics. Explicitly providing misleading information to the machines will have a negative impact on its understanding.
Implementing semantic HTML5 on your pages will improve your communication with Google and Bing. They both want to understand what your site is about. They both want you to communicate clearly in their language, and they both want you to educate them. Do it.
Communication with machines (HTML5 has an important role) is one of the two pillars of a long-term SEO strategy that will succeed in a world where we will need to optimise for Answer Engines. There are a great many things that you can do to improve communication. Semantic HTML5 is one. Schema structured markup is another. Here is an article about that.
The second pillar is credibility. There are also a great many things that you can do to improve your credibility.
Communication + Credibility = winning strategy.
Communication + Credibility
All SEO (and AEO) comes down to communication and credibility. I will continue to write regularly here on SEMrush about techniques for improving your communication and your credibility with Google and Bing (by the way, Bing is about to make a big comeback).
Please do share your thoughts about this article in the comments section below, but also feel free to post your questions about communication and credibility in SEO; your questions will help define the priorities of what I should be writing about.
In Closing: A Reminder of Good Semantic HTML5 Markup for SEO
Structure, importance, roles, and hierarchy are things that humans often understand instinctively from the design/layout. Correctly using the correct semantic HTML tags in the place of <div> simply makes that same understanding easier for machines.