Semantic HTML and SEO

Search engines are not people. They cannot look at your page and see that the box at the top is the menu, the big block in the middle is the article, and the strip at the bottom is the footer. They read code.

If the code is a heap of div elements, all of them look the same. If the code uses meaningful elements, the structure announces itself: this is navigation, this is the main content, this is a self-contained article, this is a footer. That is the idea behind semantic HTML.

What You Will Learn

• How semantic HTML helps search engines and other tools
• A fair view of what it does, and does not, do for ranking
• The key elements: header, nav, main, article, section, aside, footer
• Figures, dates, lists, and tables
• Building breadcrumbs
• How semantics, accessibility, and SEO work together
• How to check your page

The Big Idea

HTML Code

index.html

<!-- Div soup: every box looks the same to a machine -->
<div class="header">...</div>
<div class="menu">...</div>
<div class="content">
  <div class="title">Rye Bread</div>
  <div class="date">12 March 2026</div>
</div>
<div class="footer">...</div>

<!-- Semantic: the structure is in the code -->
<header>...</header>
<nav aria-label="Main">...</nav>
<main>
  <article>
    <h1>Rye Bread</h1>
    <p><time datetime="2026-03-12">12 March 2026</time></p>
  </article>
</main>
<footer>...</footer>

Semantic Analyzer

http://127.0.0.1:5500/index.html

Switch between the two pages, and compare what a machine can tell. Then edit the HTML yourself, and watch the results change.

Does Semantic HTML Improve Rankings?

An honest answer: it is not a switch that boosts your ranking. Search engines have said they can understand pages without perfect markup, and they do not publish a list of "semantic bonuses." So do not expect main to lift you to number one.

But semantic HTML still matters, for solid reasons:

• It separates the main content from boilerplate. A search engine wants to index what is unique to your page, not the menu and footer repeated on every page. Clear structure makes that easier.
• It helps tools beyond search. Reader modes, translation tools, voice assistants, social previews, and AI summarisers all work better with clear structure.
• It supports accessibility, and accessible pages tend to be easier to use, which people (and search) reward.
• It makes pages easier to maintain. You and your team read the code faster.
• It prepares you for rich results. Dates, authors, breadcrumbs, and products are easier to mark up, when the basic structure is right.

Aim to be unambiguous

You do not use semantic elements to impress a search engine. You use them to leave nothing to guesswork, for every tool that reads your page.

The Key Elements

Element	Use it for
header	Introductory content for the page, or for an article or section
nav	A set of main navigation links
main	The central content unique to this page. Use it once.
article	A complete, self-contained piece: a post, a recipe, a news story
section	A themed group of content, with its own heading
aside	Related but separate content, such as a sidebar or note
footer	Closing content for the page, or for an article or section
figure and figcaption	An image, chart, or code sample with a caption
time	A date or time that machines can read

For the details of each element, see Semantic HTML, main, article, section, nav, and aside.

Main versus boilerplate

Every page has boilerplate: things repeated across the site, like the logo, menu, and footer. And it has main content: the text, images, and tools that are unique to this page. Wrapping the second in main (and the first in header, nav, and footer) leaves no doubt which is which.

Article, section, or div?

• article if you could lift it out and it would still make sense (a blog post, a product card, a comment).
• section if it is a themed part of something bigger and has a heading.
• div if it exists only so CSS can lay things out. That is what div is for, and it is fine.

Try matching jobs to elements:

http://127.0.0.1:5500/index.html

Choose the best element for each job.

The site menu, with links to the main pages Choose...mainnavarticlesectionasidefiguretimefooterdiv

The one block of content that is unique to this page Choose...mainnavarticlesectionasidefiguretimefooterdiv

A blog post that would make sense on its own, if shared Choose...mainnavarticlesectionasidefiguretimefooterdiv

A themed group of content inside a post, with its own heading Choose...mainnavarticlesectionasidefiguretimefooterdiv

A box of related links beside the main content Choose...mainnavarticlesectionasidefiguretimefooterdiv

A photo with a caption Choose...mainnavarticlesectionasidefiguretimefooterdiv

The publish date, in a form a machine can read Choose...mainnavarticlesectionasidefiguretimefooterdiv

A wrapper used only so CSS can lay things out Choose...mainnavarticlesectionasidefiguretimefooterdiv

The copyright notice and contact links at the very bottom Choose...mainnavarticlesectionasidefiguretimefooterdiv

Some jobs have more than one reasonable answer. The point is to choose the element that matches the meaning, and to use a plain div only when nothing else fits.

Figures, Dates, Lists, and Tables

Figures and captions

<figure>
  <img src="rye.jpg" alt="A rye loaf cooling on a wooden board" width="800" height="600">
  <figcaption>Let the loaf cool fully before you slice it.</figcaption>
</figure>

A figure links an image to its caption. The caption also gives search engines more words about the image. Keep the alt text too. See Alt Text.

Dates and times

<p>Published <time datetime="2026-03-12">12 March 2026</time></p>
<p>Updated <time datetime="2026-04-02T09:30">2 April 2026, 9:30</time></p>

The human-readable text can be in any language and format, while datetime is always a standard, machine-readable value. Make sure the dates are true. A page that pretends to be recently updated, when it is not, misleads readers.

Lists

Use ul, ol, and dl for real lists, such as ingredients, steps, and features. A list tells a machine that these items belong together, and a numbered list tells it the order matters. Do not fake a list with br tags or lines starting with a dash.

Tables

Use a table for data with rows and columns, with th headers and a caption. Do not use tables for page layout. See Table Accessibility.

Quotes and emphasis

• blockquote with cite for quoted material.
• strong for important text, and em for stress. These have meaning. b and i are only visual.
• Do not overuse emphasis. If everything is important, nothing is.

Breadcrumbs

A breadcrumb trail shows where a page sits in the site: Home › Recipes › Rye Bread. It helps people find their way, and it gives search engines a clear picture of your site's structure. Marked up well, it can also appear in search results.

Build one, and see the HTML and the matching structured data:

http://127.0.0.1:5500/index.html

Edit the trail from the home page down to the current page. The last item is the page you are on.

Name 1Path 1

Name 2Path 2

Name 3Path 3

What people see:

Home › Recipes › Rye Bread

The HTML:

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/recipes">Recipes</a></li>
    <li aria-current="page">Rye Bread</li>
  </ol>
</nav>

Matching structured data (optional):

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://thebreadbin.example/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Recipes",
      "item": "https://thebreadbin.example/recipes"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Rye Bread",
      "item": "https://thebreadbin.example/recipes/rye-bread"
    }
  ]
}
</script>

The structured data must match the visible breadcrumb. Search engines change which rich results they show, so treat it as a helpful extra, not a promise. See the lesson on structured data. The characters are escaped so that nothing in a name can break out of the script.

Notes:

• Use nav with a label, and an ordered list (ol), since the order matters.
• Mark the last item with aria-current="page". It is the page you are on, and often not a link.
• Keep the visible trail and the structured data in step. They must agree.
• Use real links, so crawlers can follow them. See HTML SEO Basics.

Navigation and Links

• Wrap menus in nav, and give each one a label when there are several (aria-label="Main", aria-label="Footer").
• You do not need nav around every group of links. Use it for the main blocks of navigation.
• Paging and "next" links are normal a elements. Search engines no longer use the old rel="next" and rel="prev" hints, as far as they have publicly said, but they remain harmless, and some tools still read them.
• Skip links help keyboard users. See Keyboard Accessibility.

Div Soup and Its Costs

A page built mostly from div and span is called "div soup." It works in a browser, but:

• A machine sees no structure.
• Screen reader users get no landmarks to jump between.
• Click handlers on divs are invisible to the keyboard, and to tools.
• CSS class names like header or menu carry meaning only for you. A crawler treats them as nothing in particular.

You do not need to remove every div. Just ask, for each one: is there an element that says what this really is? If so, use it.

Semantics, Accessibility, and SEO Together

The three goals pull in the same direction:

You write	A screen reader user gets	A search engine gets
main	A landmark to jump to	The main content
nav with a label	A list of menus	Where the site's links are
h1 to h6	A way to skim by heading	The outline of the page
time with datetime	A clear date	A machine-readable date
button for actions	A control that works	An action, not a link
alt text	A description	An image description

When something is good for all three, it is usually the right thing to do. See Semantic Accessibility.

Check Your Page

1. Run the analyzer on your HTML. Read the notes.
2. Turn off CSS. Does the page still read in a sensible order? (Browser extensions and developer tools can do this.)
3. Use a screen reader or an outline tool to list landmarks and headings. Are they clear?
4. Try reader mode in your browser. Does it find your main content?
5. Validate your HTML with a validator, to catch broken structure.
6. Check in Search Console how your pages appear.

Good Habits

• Choose the element that matches the meaning.
• Use main once, and wrap the page's unique content in it.
• Mark menus with nav, and label them when there are several.
• Give article and section a heading.
• Use time for dates, and make them true.
• Use real lists, tables, and figures.
• Use div and span only when nothing else fits.
• Keep breadcrumb markup and data in step.

Semantic SEO Checklist

• The page has one main
• Header, nav, and footer are marked with their elements
• Each nav is labelled when there are several
• Each article and section has a heading
• Dates use time with a correct datetime
• Images with captions use figure and figcaption
• Lists use list elements, and data uses tables with headers
• Buttons and links are real button and a elements
• Breadcrumbs use nav, ol, and aria-current
• The page reads sensibly with CSS turned off

Security and Privacy Notes

• Do not put private data in the markup. Text in aria-label, datetime, data- attributes, and hidden elements is visible to anyone who views the source, and to crawlers.
• Escape user content. Names, comments, and titles inserted into article, figcaption, or breadcrumb names must be escaped, or they could inject markup. In structured data, escape < as well, so nothing can close the script early. The breadcrumb demo above does this.
• Make dates honest. A false "updated" date to look fresh misleads readers, and may break search guidelines.
• Do not use semantic elements to hide things from people. Structure that differs from what people see (cloaking) can lead to penalties.
• Authorship and addresses. If you mark up author names or contact addresses, ask whether those people agreed, and avoid exposing private details. Use a role or a shared address instead.

Global Audience Notes

• Set lang on the page, and on passages in other languages. See International SEO.
• time and datetime use one standard format worldwide, and the visible text can follow local custom. This is a good use of the element.
• Dates and numbers differ by region (day-month-year versus month-day-year, decimal commas). Do not guess. Use datetime for clarity.
• Breadcrumb separators should work for right-to-left languages. Let CSS draw them, and let the order of the ol stay logical.
• Translated pages need translated labels, such as aria-label="Fil d'Ariane" for a French breadcrumb.
• Table, list, and quote conventions differ across languages. Check that quotation marks and punctuation follow local style.

Common Mistakes to Avoid

1. Div soup, with no meaningful elements.
2. Several main elements, or none.
3. section or article with no heading.
4. Using section as a wrapper for styling. That is a div's job.
5. Click handlers on divs instead of buttons or links.
6. Dates as plain text only.
7. A table used for page layout.
8. Fake lists made with br or dashes.
9. Several unlabelled nav elements.
10. Mismatched breadcrumb markup and data.
11. Expecting semantic elements to boost rankings by themselves.
12. Never checking the page with CSS off or a screen reader.

Practice Time

Try these in your browser and your editor:

1. Run the analyzer on the div-soup page, fix every suggestion, and compare it with the semantic version.
2. Use the element picker. Which jobs had more than one reasonable answer?
3. Build a breadcrumb for a page on a site you know, and compare the HTML with the data.
4. Take a page you built, and replace five div elements with better ones.
5. Turn off CSS (with developer tools or an extension). Does the page still make sense?
6. Use a landmarks list (screen reader or extension). Are the regions clear?
7. Mark up a date with time, in a page that has plain-text dates.
8. Turn a fake list (br or dashes) into a real list.
9. Open reader mode on a few pages. Which find the main content easily?
10. Bonus: take a page from a site you like, copy its HTML, and rewrite it using only semantic elements. Compare the two.

Quick Recap

Click a question to check your answer.

1. Does semantic HTML boost rankings by itself?

No. But it makes the page unambiguous: it separates the main content from boilerplate, helps many tools, supports accessibility, and prepares you for rich results.

2. What is the difference between article and section?

An <article> is self-contained, and makes sense on its own. A <section> is a themed part of something bigger, with its own heading.

3. How many main elements should a page have?

One visible <main>, holding the content unique to the page.

4. Why use the time element?

Its datetime attribute gives machines a standard, reliable date, while the visible text can be in any local format.

5. What are the parts of a good breadcrumb?

A labelled <nav>, an ordered list of links, the current page marked with aria-current="page", and, optionally, matching structured data that agrees with the visible trail.

6. Why avoid div soup?

A machine sees no structure, screen reader users get no landmarks, and clickable divs do not work with a keyboard. Use meaningful elements wherever one fits.

Key Takeaways

• Semantic elements put the page's structure in the code.
• They do not boost ranking by themselves, but they remove guesswork for every tool.
• Use main, nav, header, footer, article, section, and aside for what they mean.
• Use time, figure, lists, and tables for dates, captions, lists, and data.
• Use div and span only when nothing else fits.
• Build breadcrumbs with nav, ol, and aria-current.
• Semantics, accessibility, and SEO all pull the same way.
• Keep markup honest, and escape user content.

Next, learn how to tell search engines which version of a page is the main one, in Canonical Links.