How to use structural semantic html5 tags correctly and sparingly to highlight important parts of your text content.
Before reading this article, if you are not sure what semantic html5 tags are, what their function is, and how closely they are tied to communicating clearly to search engines then please read my preceding article “Focus the page content with semantic HTML5 tags“. You will see some examples of how they work.
The reason for this new article is that although web developers are increasingly careful, precise, and systematic in how they use page markup and structured data, their use of semantic HTML5 tags is still often surprisingly chaotic and overloaded.
I think that this stems from the fact that, firstly, it’s actually very hard to see just what your semantic tag structure looks like, and this is why I built a tool for viewing it (there’s a link to it at the end of the article), and that, secondly, some of the semantic html5 tags behave just like <div> tags. I think this was a fundamental error that was made when these new tags were created. It would have been better had they been absolutely invisible and could be added, removed and swapped around with no effect on the page layout, rather like <span> tags, and developers would not be tempted to use them instead of <div>s to create visual page blocks.
Why is using too many semantic html5 tags a bad thing?
This is down to their function. Their job is to inform the search engine page analysis algorithms about the roles of the different chunks of content in a page. You can use them to focus the attention of the search engines on the important parts of the content. But this also means that if you use them everywhere, around all the content, then nothing is particularly focused on.
They simply need to identify which parts of the page are the header and footer and, in between those two, which part of the content is the unique content specific to that page. Then they need to identify any extra content that is perhaps connected to the unique page content but not necessarily part of it, for example the classic “customers interested in this product also looked at…” product boxes.
That’s all you need. Often 6 or 7 pairs of tags will suffice, like the following example :
And that’s all! It is enough for most pages you will be dealing with.
Which common HTML5 tag don’t you see in there? Correct: the <section> tag! This is one of the most misused tags and I will tell you why in the next part.
Part 1: Using semantic tags correctly…and sparingly
In what ways are html5 tags misused, and over-used?
As I said earlier, the most common mistake that people make is using semantic tags to create structural blocks to organize the page visually when that is not their primary purpose and can send misleading signals to search engines.
Look at this example of a random page analyzed in my tag viewer:
We are looking at a section of the <main> part of the page which is sandwiched between the <header> and <footer> parts. We can see the <article> tag and it contains the <h1>, which is perfect.
However, around the <h1> we can see a whole mess of <section> tags, and we need to ask ourselves: why are they there? What purpose do they serve? Since the job of a <section> tag is to break an article up into semantic chunks that are self-contained units of information, you can see that here the search engine will be confused about what you are trying to tell it.
If it doesn’t feel confident, it won’t rank the content.
For example, imagine you were writing an article about a mobile phone. For the sake of argument, let’s say it’s a Galaxy Z. You would be perfectly justified in using sections like this this :
The <section> tags are used to split the content of the article into logical, themed blocks, each of which can be taken out of the article and would still have meaning as an independent chunk of information (for example as a Google SERP rich snippet in a search for that exact information – hint hint!). Even though <h2> headers also do the job of splitting up the article very nicely on their own, if we use <section> tags too it feels more like we’re wrapping the chunks up in nice Google-friendly packets.
Now, a word about <article> tags. These tags also indicate that the text they contain is important content. This can sometimes create a problem of hierarchy of importance when you have a situation like in the image below which is a from a product page where the “related products” at the bottom of the page have been put in <article> tags.
At the top of the image you can see (in red) the bottom edge of the main <article> that contains the unique page content. Because the <section> tag just below it doesn’t serve any purpose here, the <article> tags below have the same weight as the main <article>. So, to reduce their importance you can surround them with an <aside> tag, like in the image below.
There is some debate about HTML5 allowing several <h1> tags in different <section>s or <article>s in the same page, and, while technically this is acceptable, don’t forget that the <h1> is a very powerful signal and you should ask yourself if by using multiple H1s you are bringing extra clarity or extra confusion concerning what is the main content of the page. I would say that in most cases you don’t gain anything from multiple <h1>s so just use one. Keep it simple.
The semantic tag decision process
This is actually quite simple :
1. Put a <header> tag around your header bar, top navigation etc. and a <footer> tag around all the footer stuff, bottom navigation etc.
2. Put a <main> tag around everything in between.
3. Inside the <main> tag put an <article> tag around the content that is specific to that particular page, that you want to define as the content of that particular url. Make sure that the <h1> is inside that <article>.
4. Anything that is inside the main <article> but isn’t directly part of the main content (e.g. products that are accessories of the main product, blog articles in the same semantic context as the main article, FAQ questions linked directly to main article, information about the author of the blog article, etc.) can be enclosed in <aside> tags inside the main <article>. This will boost the context of the main content.
5. Anything that is outside of the main <article> but still inside the <main> tag (e.g. products on special offer but in no way linked to the main product, random popular blog articles, upcoming events, newsletter sign-up forms, even left or right navigation columns, etc) also need to be surrounded with aside tags to clearly isolate them from the main <article>.
You can see a very general template below. This is enough for most web pages you will need to make.
Part 2: Highlighting certain text elements to give them more semantic weight
Before we look at the useful tags, let me just point out that the old-school <b>, <i> and <u> tags give visual emphasis for the person reading the page but serve no semantic purpose and have absolutely no effect on SEO!
Now, the useful tags:
Use it sparingly. Over-use dilutes the SEO effect … and is visually very annoying.
Use this one if a word or phrase would have particular emphasis when reading the text out loud. It will italicise the words it contains.
This will highlight the background of the phrase and should be used to draw attention to it, for example, to a preferred option in a list.
Use this to disambiguate an abbreviation; for example thefreedictionary.com lists “CSA” as having 414 different meanings, ranging from to Client Server Architecture to Community Supported Agriculture, so using this tells us exactly what we’re talking about.
Use <figure> around an image, especially when it is in the main content, and be sure to include the <figcaption> tags inside it as they can be extracted and displayed in image search results.
While these tags are not really semantic they are very useful and tell the search engines that this information is a list. The <ol> tag very specifically states that the elements are in a particular order.
Tables for displaying tabular data have been around for at least 4000 years and were one of the earliest html elements available for building web pages. When tables are marked up correctly and use the <caption> tag they are a super-explicit way of presenting data in a format that search engines understand and therefore really love. Look at the following example:
Why is this excellent for search engines? Well, since the table now has an embedded <caption> you can take the table out of the context of the page and it still 100% retains its meaning. We know that the table is presenting the populations of UK cities in 2019 and the <th> tags tell us the meaning of the data in the column below each one; the first is the city name and the second is the population. This is exactly what Google likes to show as a rich snippet at the top of search results pages.
[Case Study] SEO storytelling to sell your SEO projects
Conclusion
Too many semantic tags in a page is just as bad as no tags at all!
To sum up, HTML5 semantic tags are a powerful way to let search engines know which parts of your pages contain the important content that it should take into consideration when it is evaluating what the page is about and which parts of the page are secondary or simply to be ignored.
Semantic tags are also a great way of clarifying information so that the search engines don’t have to guess what your page is about, increasing their confidence that they can put you higher up in the search results.
Resources
Detailed descriptions of the semantic elements can be found on the W3C Schools website .
As far as I know the only tool available to inspect the semantic HTML5 structure is one that I had to write myself: you can find it here.
