en
English Español Deutsch Français Italiano Português (Brasil) Русский 中文 日本語
Submit post
Go to Blog
Expand Your Knowledge:
Expand Your Knowledge:
On-Page SEO

The Secrets of Semantic HTML5 for Document Structure — a Guide

85
Wow-Score
The Wow-Score shows how engaging a blog post is. It is calculated based on the correlation between users’ active reading time, their scrolling speed and the article’s length.

The Secrets of Semantic HTML5 for Document Structure — a Guide

This post is in English
Jason Barnard
This post is in English
The Secrets of Semantic HTML5 for Document Structure — a Guide

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.

Examples

div and span tags 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.

Semantic tags 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.

Web Page with most important content highlighted 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.

7 semantic html5 tags 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.

basic-semantic-html5-markup-main.png 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.

semantic HTML5 not used for design 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.

Related Aside

Related aside semantic HTML5

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

Unrelated aside semantic HTML5

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

Full Semantic HTML5 on a webpage This is very good!

Helpful Tips

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).

Article with nested sections

Nesting Elements

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.

html5 tags used for design is bad 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.

Next steps?

More on this Semantic HTML5 for Content Writers – The Essential Guide Post Jason Barnard Epic #SEOisAEO series: Semantic HTML5, IA and Accessibility - so many missed opportunities Webinar recorded on  Oct 02, 2018 On Page SEO checklist: Blogging for People and Search Engines Post Elena Terenteva 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

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

Credibility

The second pillar is credibility. There are also a great many things that you can do to improve your credibility. 

Communication and credibility icons 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.

Web page seen by a human and a robot

Jason Barnard
columnist

SEMrush columnists are authors who had proved their expertise in digital marketing and contribute regularly to our community.

Jason has over 2 decades of experience in digital marketing, he started promoting his first website in the year Google was incorporated and built it up to become one of the top 10,000 most visited sites in the world (60 million visits in 2007).
Today he is a fulltime 100% digital nomad, speaking at conferences around the world, and interviewing industry experts for his #SEOisAEO podcast (the most fun you'll ever have learning about digital from the experts). Listen here - https://kalicube.pro
Expand Your Knowledge:
On-Page SEO
Share this post
or

Comments

2000
Newcomer

Either just recently joined or is too shy to say something.

very helpful article
but what about breadcrambs where the idel location for it
thanks
Newcomer

Either just recently joined or is too shy to say something.

Thank you for this article. It can be a starting point, and an inspiration, for many people.
Personally I found it really interesting.
It would be nice to learn more about it with other articles, because there is nothing so detailed online.
A question: If I wanted to add a breadcrumbs nav tag, I should add it inside the main or between header and main. Thanks and sorry for my english
Newcomer

Either just recently joined or is too shy to say something.

This was very helpful. I will use your advice in my next project, thank you!
Jason Barnard
columnist

SEMrush columnists are authors who had proved their expertise in digital marketing and contribute regularly to our community.

columnist
Jiri Friedrich
Pleasure :)
Newcomer

Either just recently joined or is too shy to say something.

Nice article, thank you :)
Jason Barnard
columnist

SEMrush columnists are authors who had proved their expertise in digital marketing and contribute regularly to our community.

columnist
Joao Victor
Pleasure (and thank YOU for taking the time to post :)
Newcomer

Either just recently joined or is too shy to say something.

Very helpful article
tanks
Eric Melillo
Newcomer

Either just recently joined or is too shy to say something.

Solid presentation and great visuals. Thanks Jason.
Jason Barnard
columnist

SEMrush columnists are authors who had proved their expertise in digital marketing and contribute regularly to our community.

columnist
Eric Melillo
Thanks Eric :)
Newcomer

Either just recently joined or is too shy to say something.

Great presentation , Thanks
I too wish you had a download or a copy final code .
Thanks
Newcomer

Either just recently joined or is too shy to say something.

Amazing information. All of the points mentioned by you is really important.
Editors' Pick
Hugo Scott
Helper

An experienced member who is always happy to help.

Editors' Pick
Hi again Jason
Originally when we talked about integrating the semantic tags into page I thought that changing divs to articles or sections was a good idea because it made thing simpler, but since then I have realized that it actually makes things more complicated because the divs in question often have classes or IDs and are styled with CSS. This means that the semantic tags themselves are then styled and I now think that this is a really bad idea.

I would say keep the divs with the classes and IDs and just insert the semantic tags around them with no classes or IDs or any kind of css styling. This doesn't add any significant weight to the page and it means that you can add/move/remove tham at any time and it doesn't in any way affect the way the pages displays. Their sole purpose is to invisibly delimit areas of the page, a bit like administrative districts in a city.

I've made a basic example of what seems to me to be a good semantic html5 structure for use on general content pages (NOT a homepage, for example):
- see the html in the source of this page https://sitegardien.com/html5viewer/semantic-html5-example.php
- see what the structure looks like in the viewer https://sitegardien.com/html5viewer/semantichtml5viewer.php?url=https%3A%2F%2Fsitegardien.com%2Fhtml5viewer%2Fsemantic-html5-example.php

What's your opinion of that ?
Jason Barnard
columnist

SEMrush columnists are authors who had proved their expertise in digital marketing and contribute regularly to our community.

columnist
Hugo Scott
Yes this is a very good point.
Having done loads more semantic HTML5 in the last year or so, I would agree with you. More flexible this way... probably less error prone
Love the idea of admin districts in a city.

And I have been using Sitegardien for a few clients. A VERY useful tool. Thanks !
Newcomer

Either just recently joined or is too shy to say something.

Hugo Scott
I know this is a bit late, but I came upon this while researching ways of using semantic tags with layout, in particular css-grid. I think it would be ok to use classes on semantic tags for layout purposes like this, (but not for visual rendering). Ideas?
Jason Barnard
columnist

SEMrush columnists are authors who had proved their expertise in digital marketing and contribute regularly to our community.

columnist
Richard Tugwell
It isn't wrong to use classes on semantic tags so much that it mixes semantics with design... but it seems logical to sperate the two. Seems like a good idea to me. But each to his / her own :)
Newcomer

Either just recently joined or is too shy to say something.

Thanks for all the pedagogic examples, I think it will help people that get confused when reading the actual spec :) . About that "Do not do this", I think that actually is a viable option for pages that actually contain sections about different things, for example a home page (or specialized landing pages if you will), where you link to to very different sections of the entire site (the home page is actually about the whole site for the most part). Any thoughts?
Jason Barnard
columnist

SEMrush columnists are authors who had proved their expertise in digital marketing and contribute regularly to our community.

columnist
Jens Hedqvist
We all get confused when we read the spec :)

I like the homepage example as when sections are truly useful.
using sections to break up an article is not really necessary since the headings can fulfill most, if not all of those semantic needs.
Jules Manson
Newcomer

Either just recently joined or is too shy to say something.

This is likely the best article I have ever read on how to properly use semantic HTML. Thank you for providing this wonderful guide. I am bookmarking this and explore your site further. However before I go may I add one request? This article is missing something. It should provide an HTML boilerplate for readers to download and an alternate from your final example.
Newcomer

Either just recently joined or is too shy to say something.

Really help full for me. I am a beginner label working so thanks!!!!
Newcomer

Either just recently joined or is too shy to say something.

Really helpful for beginners as well as experts. Good Job!! I would like to share a link of another blog which I found while searching for the same. https://www.admecindia.co.in/blog/semantic-structure-html5-practical-and-easy-explanation
Read this too as the more we read the more we understand thoroughly.
Hugo Scott
Helper

An experienced member who is always happy to help.

Alright Jason. I've upgraded my semantic tags viewer to include the h1 (I've found this was handy) and it's coming along nicely https://www.sitegardien.com/html5viewer/semantichtml5viewer.php
Do you think it needs any other tags? I'm trying to keep it visually simple!
Jason Barnard
columnist

SEMrush columnists are authors who had proved their expertise in digital marketing and contribute regularly to our community.

columnist
Hugo Scott
This looks really cool
Jiust gave it a try and it is really helpful for visualising the semantic HTML5.
Cool !
Newcomer

Either just recently joined or is too shy to say something.

Nice article! I like to share a tutorial about HTML5. So please visit:- http://www.elstel.org/html5video/FlashVersusHtml5Video.html.en
Newcomer

Either just recently joined or is too shy to say something.

This article is good, but if i correctly read MDN the section tag contain article tag, and not the other way :o
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article
Newcomer

Either just recently joined or is too shy to say something.

Harleen
Correct, but Articles can have sections inside. This should be something like:
< main >
< section >
< article >
< section > < / section >
< section > < / section >
< /article >
< / section >
< / main >
An article is a self contain block of content. Sections just separates sections of the content. In this case Main has no sections inside, just a self contained block which can be an article (but it would be nice to see a section separating main from article).
Jason Barnard
columnist

SEMrush columnists are authors who had proved their expertise in digital marketing and contribute regularly to our community.

columnist
2helio2
Agreed.
My take is that the section would be redundant and thus (slightly) reduce clarity.
And this makes me feel it isn't necessary (or perhaps even helpful)
From MDN "If it makes sense to separately syndicate the content of a

element, use an element instead."
But the article / section debate is not clear cut, unfortunately
Newcomer

Either just recently joined or is too shy to say something.

2helio2
Yeah this is what i meant (as a non english native language).
Section contain article, which can contain section, which can contain article, etc

But the first one has to be the section... If i correctly read MDN ^^
Jason Barnard
columnist

SEMrush columnists are authors who had proved their expertise in digital marketing and contribute regularly to our community.

columnist
Harleen
articles can contain sections and vice versa...
The content above could be syndicated so article makes sense ... From MDN "If it makes sense to separately syndicate the content of a

element, use an element instead."
Newcomer

Either just recently joined or is too shy to say something.

What am I missing? Your final example seems to be showing that the semantic element tags do not need to be nested i.e. the <article> tag is both inside and outside the <main> tag.

But the HTML validator does not validate this layout.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
</head>
<body>

<main>
<article>
<h1>My Heading</h1>
</main>
</article>

</body>
</html>
Newcomer

Either just recently joined or is too shy to say something.

Karl Thompson
Nevermind. I see now that <main> does wrap the entire content.
Jason Barnard
columnist

SEMrush columnists are authors who had proved their expertise in digital marketing and contribute regularly to our community.

columnist
Karl Thompson
Hi Karl

Too late. darn !
Good luck with this, Karl.
Just to clarify for any other readers, the closing article needed to be before the cloing main
Arjen
Enthusiast

Occasionally takes part in conversations.

How would you deal with a category or overview page that includes a h1 heading and short description of the category and a list of articles/products as them main content?

Nest category heading, description and article list all in -main-
Nest an -article- with a nested -section- in the -main- for the heading & description
Nest one -section- in the -main- containing the list with all articles
Per article in the list use -article-
Newcomer

Either just recently joined or is too shy to say something.

I think this article covers it pretty well, but just to be clear - please don't go and change all your divs and spans to other elements thinking that will make it more semantic. You should only use these HTML5 elements where appropriate (the example in the article is a good example). If you want to deep dive on this you can read the W3C HTML spec here https://www.w3.org/TR/html5/dom.html#semantics-0
Jason Barnard
columnist

SEMrush columnists are authors who had proved their expertise in digital marketing and contribute regularly to our community.

columnist
Adam Norris
Hey Adam
Thanks for the clarification. I did perhaps make it sound a little TOO simple
Jason
George
Helper

An experienced member who is always happy to help.

Jason, what would you say to someone that says they don't have the money to redo their website in HTML5 and believes their site is fine as is traffic and conversion wise?
Jason Barnard
columnist

SEMrush columnists are authors who had proved their expertise in digital marketing and contribute regularly to our community.

columnist
George
I would say that structural HTML5 does not require redoing their website. It involves changing some divs to semantic HTML5 structural tags - section / nav / article etc and (perhaps) wrapping some divs in the correct semantic HTML5 structural tag.
If that is too much / too complicated for them, I would say this is not short term priority but that they MUST make sure the next redesign or upgrade of their website includes implementation of structural HTML5.
Hope that helps !
Max Sokolov
Helper

An experienced member who is always happy to help.

Thank you for this guide, Jason.

I wonder why you did not mention other types of semantic tags apart from document structure tags? For example, I'm trying to figure out if textual meaning tags play any role for crawlers? And if they do, how exactly it works? Should I even bother with implementing these?
Jason Barnard
columnist

SEMrush columnists are authors who had proved their expertise in digital marketing and contribute regularly to our community.

columnist
Max Sokolov
Hi Max
Thanks for the feedback.
The article got pretty long just with document structure tags. So I removed the textual meaning tags.
The title of the article became misleading. I will try to get that changed.
I could write another article about textual meaning tags.
In the meantime, yes use them. Do not mis-use / over-use them.
is emphasis and that replaces to "old hat" SEO trick of bold. Do not do the old school thing of on every keyword. That is spam. Use it to emphasise (!) words / phrases that DESERVE it in the context of the topic of the page.
As with most things in SEO, it will have little effect taken on its own, but as part of a wider SEO / AEO strategy, will help.

Send feedback

Your feedback must contain at least 3 words (10 characters).

We will only use this email to respond to you on your feedback. Privacy Policy

Thank you for your feedback!