Semantic HTML5 Tags for SEO

Get it Right: The Correct Way to Use Structured Semantic HTML5 Tags

If you're still unsure what semantic HTML5 tags are, what they do, and why they are crucial for helping search engines understand your content, I recommend reading my previous article, "Using Semantic HTML5 Tags to Make Search Engines Understand Your Page's Focus." That article provides the basic concepts and examples.

This post, however, dives deeper into an advanced topic: how to use these tags correctly and prudently, avoiding common pitfalls.

A prevalent issue is that even as developers become more meticulous with page markup and structured data, they often use semantic HTML5 tags casually or excessively.

Why does this happen? I believe there are two main reasons:

1. Lack of Immediate Visual Feedback: Unlike CSS styles, semantic structure is invisible to the average user, making it difficult for developers to perceive its impact directly. This is why I developed a small tool (linked at the end) to visualize semantic structure.
2. Some Tags Behave Like <div>: Tags like <section> and <article> are block-level elements, making it easy for developers to use them as substitutes for <div> for layout and visual grouping. This is a minor design flaw; it would be better if these tags didn't affect the layout by default, like <span>.

Why Abusing Semantic HTML5 Tags is Harmful

The core purpose of semantic tags is to communicate the role and importance of different content blocks to a search engine's page analysis algorithms. You use them to "highlight" key information and guide search engines to your most important content.

But consider the flip side: if you wrap everything in various semantic tags, you're essentially highlighting nothing, diluting the importance of your truly core content.

In reality, we generally only need to tell search engines three things:

1. Where the page's Header is.
2. Where the page's Footer is.
3. What the Main Content / Article in between is—the unique and most important information on the page.

Sometimes, we may also need to identify supplementary content that is related to but not part of the main content (Aside).

Usually, using <header>, <footer>, <main>, <article>, and <aside> is sufficient. A typical, clean, and effective structure might look like this, using only 6 or 7 pairs of tags:

See how simple that is? For the vast majority of web pages, this is enough. SeoSpeedup's Site Audit tool can help you quickly identify if your page structure is overly complicated.

You might have noticed a common HTML5 tag missing from the diagram above: yes, it's <section>! This is one of the most misused tags, and we'll discuss it in detail below.

Part One: Correct Usage and Common Mistakes with Semantic Tags

The most common mistake is using semantic tags as replacements for <div> to create visual structure blocks. This not only defeats their purpose but can also send the wrong signals to search engines.

Take a look at this example analyzed with my tag viewer:

This is part of the page's <main> area, between the <header> and <footer>. We see an <article> tag containing an <h1>, which is excellent, indicating the main content area and the primary heading.

However, surrounding the <h1> is a clutter of <section> tags. We have to ask: what are these <section>s doing here? Do they each represent a distinct thematic block?

The semantic meaning of the <section> tag is to break down an article (<article>) or a standalone content area into logical, self-contained parts based on a theme. If used haphazardly as shown above, it confuses search engines—which part are you trying to emphasize? Which parts are parallel sub-topics?

If a search engine is unsure of your intent, it will be hesitant to grant a good ranking.

Correct Usage Example for <section>

So, when is it appropriate to use <section>?

Imagine you're writing a review article (<article>) about a smartphone (e.g., the Samsung Galaxy Z series). You could perfectly use <section> like this:

Here, each <section> revolves around a clear sub-topic (Design, Screen, Camera, Performance, Battery), and each is relatively independent and complete. Even if you took one <section> out on its own, it would still be a meaningful block of information (and could even become a featured snippet in Google search results).

While <h2> tags can visually separate content, wrapping these logical blocks in <section> tags is like giving search engines a clearer "package," telling them, "Hey, these sections are parallel, important discussions about different aspects of this article."

Summary of Correct <section> Usage:

• Use it inside an <article> (or another element representing a standalone piece of content).
• Use it to divide content based on thematic logic, not visual layout.
• Each <section> should have a clear heading (usually <h2>-<h6>).
• The content of each <section> should be relatively independent and complete.
• Avoid using <section> when there is no clear thematic grouping needed.
• Never use <section> as a generic container for layout; that's what <div> is for.

Further Notes on <article> and <aside>

The <article> tag indicates that its content is independent and self-contained, theoretically distributable or reusable on its own (e.g., a blog post, a forum entry, a news story, or a user comment).

But sometimes, hierarchy issues arise. For instance, in this product page example, the "Related Products" section at the bottom is also placed within an <article> tag:

In the image above, the red box marks the end of the main product's <article>. If the "Related Products" section also uses <article> without any other distinguishing tags, it might be perceived as being on the same semantic level as the main content. This is clearly not the intention.

To reduce the importance of this secondary content and clarify its relationship to the main content, we should wrap it in an <aside> tag, like this:

The semantic meaning of the <aside> tag is to contain content that is related to the main content but is also separate from it. Think of it as a "sidebar," "supplementary information," or "pull quote." It's appropriate for related products, related articles, ads, author bios, and so on.

The Controversy Over Multiple <h1>s

The HTML5 specification technically allows for multiple <h1> tags within different <section> or <article> elements. However, from an SEO best practice standpoint, it is strongly recommended to use only one <h1> tag per page.

The <h1> is the most important heading on the page and the strongest signal to search engines about the page's core topic. Using multiple <h1>s can dilute this signal and confuse search engines about the main theme, rather than clarifying it.

Keep it simple: one <h1> per page.

A Simplified Decision-Making Flow for Semantic Tags

It's quite simple if you follow these steps. SeoSpeedup provides actionable advice that guides you through this process automatically.

1. Identify the Header: Wrap the site's header area, which usually contains the logo, main navigation, search bar, etc., with <header>.
2. Identify the Footer: Wrap the site's footer area, typically containing copyright information, secondary links, contact details, etc., with <footer>.
3. Identify the Main Content Area: Wrap all the core content between the <header> and <footer> with <main>. A page should have only one <main> tag.
4. Identify the Core Content Unit: Inside <main>, wrap the unique, most important, self-contained content of the page with <article>. Ensure the page's single <h1> is within this <article>.
5. Identify Ancillary Content:
   • Inside the <article>, if there is content related to the core topic but not part of the main narrative (e.g., accessory recommendations, related article links, FAQs, author info), wrap it with <aside>.
   • Content outside the <article> but still within <main> (like sidebar navigation, less-related promotions, popular articles lists, email subscription forms) should also be wrapped in <aside> to distinguish it from the core <article> and signify its secondary status.

Following this process, you can build a clean, simple, and search-engine-friendly layout like this:

For most web pages, this structure is sufficient. The key is clarity and simplicity—don't overcomplicate it.

Part Two: "Spice Up" Text Elements with Other Semantic Tags

In addition to the main structural tags, HTML provides several inline semantic tags that help us mark up the meaning of text fragments more precisely, which is also beneficial for SEO and accessibility. The content generation tools from SeoSpeedup are designed to incorporate these tags automatically for optimized output.

But first, a quick note: the old-school <b>, <i>, and <u> tags only provide visual bolding, italics, and underlining. They have no semantic meaning and no impact on SEO! These styles should be handled with CSS.

Now let's look at the useful semantic tags:

• <strong>: Indicates Importance. Search engines will consider content wrapped in <strong> to be more important than regular text. Use it sparingly; overuse will dilute its effect and can be visually jarring.
• <em>: Indicates Emphasis. If a word or phrase would be spoken with stress, you can use <em>. It typically renders as italics.
• <mark>: Indicates a Highlight. Used to draw attention to a piece of text, such as highlighting keywords in search results or a recommended option in a list. It usually adds a yellow background to the text.
• <abbr>: Represents an Abbreviation or Acronym. You can use the title attribute to provide the full term, which helps resolve ambiguity. For example, "SEO" can be written as <abbr title="Search Engine Optimization">SEO</abbr>.
• <figure> and <figcaption>: <figure> is used to wrap standalone content like illustrations, diagrams, or code snippets (usually images), while <figcaption> provides a caption or description for it. This is very helpful for image SEO, as the content of <figcaption> can be extracted by search engines and associated with the image, even appearing in image search results.
• <ul> and <ol>: Unordered and ordered lists. While not strictly semantic tags, they clearly tell search engines, "This is a group of related items." <ol> is particularly explicit about the sequence of items. List-formatted content is also more easily understood by search engines and may be featured as a list in search results.
• <table> and <caption>: Used to display tabular data. Tables are an excellent way to present structured data. When a table is marked up correctly (using <thead>, <tbody>, <th>, etc.) and accompanied by a clear <caption> (table title), search engines can understand its content very well. A table with a <caption> remains clear even out of context. This clarity is highly valued by search engines and is a strong contender for featured snippets (like direct answers or table snippets). Look at this example:

Thanks to the <caption>, we immediately know this table is about "UK City Populations in 2019." The <th> (table header cells) clearly define the meaning of each column. This kind of structured information is extremely valuable to search engines.

Conclusion: Clarity is Key, Less is More

Remember, using too many, disorganized semantic tags on a page is just as bad as using none at all—and possibly worse!

The true value of HTML5 semantic tags lies in:

1. Clearly telling search engines which parts of your page are core content and which are supplementary or secondary.
2. Helping search engines resolve ambiguity by understanding your page's topic and content structure more accurately.
3. Increasing the likelihood of getting rich snippets for structured content like lists and tables.

The ultimate goal is to give search engines more confidence in understanding your page, making them more willing to rank it well.

So, when using semantic tags, please be concise, accurate, and purposeful. Less is more.

Resources

• For detailed official documentation on semantic elements, visit the W3Schools website.
• Want to visualize a webpage's semantic HTML5 structure? Try the Semantic HTML5 Viewer.
• Ready to audit your own site's semantic structure? Sign up for a free trial of SeoSpeedup and get actionable insights in minutes.