Semantic HTML: Structure for Humans and Machines

Two websites can look identical in the browser and still be completely different in how understandable their source code is.

One page consists almost entirely of nested <div> containers. The other uses semantic HTML5 elements (Hypertext Markup LanguageHyperText Markup Language (HTML) is the markup language for web pages. It defines the structure and content of a page, such as headings, paragraphs, links and images.Open glossary entry →, HTML, the markup language for websites) such as <main>, <article>, <nav>, <section>, <aside> and <footer>. For users, the difference is often invisible. For browsers, screen readers, search engines and crawlers, it matters.

RankScan has two measures for semantic HTMLSemantic HTML means using HTML elements according to their meaning, such as <main> for the main content or <nav> for navigation, instead of building everything from generic <div> containers.Open glossary entry →:

• “Main content not marked up”: The affected pages have no <main> element.
• “Posts without an article element”: Blog or news posts have a <main>, but no <article>.

RankScan measures nothing else for semantic HTML. The other elements and rules in this article are general expert knowledge.

The correct framing is important:

Semantic HTML is not a ranking trick. It is clean markup that makes content, navigation, main content and supplementary elements easier to distinguish.

This helps users, assistive technologies, developers, search engines and artificial intelligence (AI) systems classify content more accurately. However, it does not guarantee better rankings, featured snippetsA featured snippet is a highlighted answer excerpt that Google displays above the classic results. It answers a query directly and is often called position zero.Open glossary entry → or AI citations.

What Is Semantic HTML? #

Semantic HTML means using HTML elements according to their content meaning.

Not:

<div class="button">Learn more</div>

but:

<a href="/services/">Learn more</a>

Not:

<div class="main-content">
  <div class="post">
    <div class="title">Title</div>
  </div>
</div>

but:

<main>
  <article>
    <h1>Title</h1>
  </article>
</main>

Google describes semantic markup as markup that is used according to its meaning and purpose: for example headings for headings, paragraphs for paragraphs and lists for lists.
Source: Google Search Central Blog, On web semantics

The Mozilla Developer Network (MDN), a developer documentation resource, puts it similarly: semantic HTML means using “the right element for the right job” because browsers can then provide built-in accessibility features.
Source: MDN, HTML: A good basis for accessibility

What Does “Main content not marked up” Mean? #

The RankScan measure “Main content not marked up” means: the affected pages have no <main> element. Machines then separate the main content less well from the menu and footer.

Rating in RankScan: low severity · low effort · work type Development.

The finding means only one thing: no <main>. A container with role="main" counts as <main>. Missing <nav>, <footer> or <section> elements do not trigger the measure.

Semantic regions help screen readers and parsers. For rankings, <main> is not a direct factor but technical hygiene. That is why the severity is low.

What Does “Posts without an article element” Mean? #

The RankScan measure “Posts without an article element” means: the affected posts have a <main> element, but no <article>. The post is not marked up as a self-contained unit.

Rating in RankScan: low severity · low effort · work type Development.

RankScan checks this only on pages it recognizes as posts, for example blog, news or guide posts. Service and overview pages do not need <article>. There, <main> is enough.

If a page already lacks <main>, RankScan reports only “Main content not marked up”. A post can therefore appear under “Posts without an article element” only after <main> has been added.

Weak Semantics: General Error Patterns #

The following mistakes are general expert knowledge. RankScan does not measure them.

Examples:

• multiple visible <main> elements,
• <section> used only as a styling container without a topic,
• <article> used for purely decorative cards,
• <button> used for normal links,
• <a> without href,
• clickable <div> elements,
• role attributes unnecessarily replacing native HTML elements,
• headings used only for styling,
• landmarksLandmark elements are semantic HTML regions such as <main>, <nav>, <header> and <footer> that give a page clear orientation points, especially for screen readers.Open glossary entry → are duplicated or unnamed,
• <aside> actually contains main content.

Such mistakes are often harder to identify than a missing <main>. The code looks modern at first glance, but its content structure is still unclear.

The Most Important Semantic HTML5 Elements #

Important: these elements are not design specifications. Visual appearance is controlled through Cascading Style Sheets (CSS)Cascading Style Sheets (CSS) is the language used to define the layout and design of web pages. CSS controls colours, fonts, spacing and arrangement, among other things.Open glossary entry →, the language used for website layout. HTML elements describe the role of the content.

Why Semantic HTML Matters for Accessibility #

Semantic HTML is a foundation for accessibility.

Screen readers and other assistive technologies can use landmarks and native HTML structures to enable orientation:

• jump directly to the main content,
• identify navigation areas,
• read lists correctly,
• operate buttons and links properly,
• understand forms better,
• interpret tables correctly.

MDN emphasizes that semantic HTML elements provide built-in accessibility hooks. Developers should therefore use native HTML elements before rebuilding functionality with generic elements and JavaScript (JS).
Source: MDN, HTML: A good basis for accessibility

Example:

<button type="button">Open menu</button>

is keyboard-accessible and recognizable as a button by default.

A clickable <div>, on the other hand, needs additional code for role, keyboard interaction, focus state and screen reader understandability. That is more error-prone.

Why Semantic HTML Can Help SEO #

Semantic HTML helps search engines interpret page structures more easily. It indicates what is main content, navigation, section, article or supplementary information.

Still, the SEO impact is not absolute.

In its SEO Starter Guide, Google writes that a semantic heading order is good for screen readers, but that Google Search rarely relies only on semantic meanings from the HTML specification because the web generally does not always use valid HTML.
Source: Google Search Central, SEO Starter Guide

The realistic assessment:

• Semantic HTML can support Google’s understanding.
• It does not replace helpful contentHelpful content refers to content created primarily for people that delivers a clear answer and shows substance, originality and trust, rather than being optimized mainly for search engines.Open glossary entry →.
• It does not replace indexability.
• It is not a “magic ranking booster”.
• It is part of clean technical website quality.

For RankScan, this means:

Semantic HTML is a website health signal, not an isolated ranking factor.

Why Semantic HTML Matters for AI Visibility #

AI systems and search systems need to break websites into meaningful sections, understand them and weight them. Semantic HTML can help segment content more clearly:

• main content in <main>,
• self-contained article in <article>,
• topic sections in <section>,
• navigation in <nav>,
• supplementary content in <aside>,
• page footer in <footer>.

This can make machine extraction easier. But here too:

Semantic HTML does not guarantee an AI mention, a citation or a better answer position.

Google describes AI OverviewsAI Overviews are AI-generated answer boxes from Google that appear above the classic search results. They summarize information from the web and can change click distribution.Open glossary entry → and AI Mode as search features where content from the web can appear. Website owners should continue to provide helpful, reliable content and ensure technical accessibility.
Source: Google Search Central, AI features and your website

For readability by AI systems, semantic HTML is therefore a foundational building block. It improves structure and understandability. But it does not replace factual densityFact density describes how many concrete, verifiable pieces of information a text contains relative to general statements. It is an editorial quality criterion, not an official Google metric.Open glossary entry →, source qualitySource quality shows whether important statements are backed by reliable evidence. It does not mean adding links indiscriminately, but providing robust support for verifiable claims.Open glossary entry →, trust signalsTrust signals are visible elements of a website that build credibility, such as an imprint, contact details, privacy information, sources, reviews, update dates and transparent company information.Open glossary entry → or technical accessibility.

Before/After: Div Desert vs. Semantic Markup #

Weak: Div Desert #

<div class="header">
  <div class="logo">My Blog</div>
  <div class="menu">
    <div onclick="location.href='/'">Home</div>
    <div onclick="location.href='/blog'">Blog</div>
  </div>
</div>

<div class="main-content">
  <div class="post">
    <div class="title">SEO Tips 2026</div>
    <div class="text">The content goes here...</div>
  </div>
</div>

<div class="footer">
  <div class="copy">© 2026 My Blog</div>
</div>

Problems:

• navigation is not a real <nav>,
• links are clickable <div> elements,
• no <main>,
• no <article>,
• title is not a real heading,
• footer is only a generic container.

Better: Semantic HTML #

<header>
  <a href="/" class="logo">My Blog</a>

  <nav aria-label="Main navigation">
    <a href="/">Home</a>
    <a href="/blog/">Blog</a>
  </nav>
</header>

<main>
  <article>
    <h1>SEO Tips 2026</h1>
    <p>The content goes here...</p>
  </article>
</main>

<footer>
  <p>© 2026 My Blog</p>
</footer>

Benefits:

• main content is clearly marked,
• navigation is machine-readable,
• links are real links,
• the article is recognizable as self-contained content,
• the heading is semantically correct,
• the footer has a clear role.

The Most Important Rules for Semantic HTML #

1. Meaning Before Appearance #

Choose HTML elements based on meaning.

<h2>Pricing</h2>

not:

<div class="large-bold-title">Pricing</div>

CSS controls appearance. HTML controls meaning.

2. Exactly One Visible <main> #

A document should have exactly one visible main content area.

Good:

<body>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</body>

Bad:

<main>Intro</main>
<main>Products</main>
<main>FAQ</main>

<main> represents the central, unique content of this URL.

RankScan only checks whether a page has a <main>. RankScan does not report multiple <main> elements.

3. Use <article> for Self-Contained Content #

Use <article> when content would also make sense outside the page.

Suitable for:

• blog posts,
• news articles,
• product cards,
• forum posts,
• comments,
• case studies.

Example:

<main>
  <article>
    <h1>JavaScript SEO: Detect Rendering Problems</h1>
    <p>...</p>
  </article>
</main>

RankScan requires <article> only for blog and news posts. Place it inside <main>. Service and overview pages stay as they are.

4. Use <section> Only for Real Thematic Sections #

A <section> should mark a thematic section and ideally have a heading.

Good:

<section>
  <h2>Benefits of semantic HTML</h2>
  <p>...</p>
</section>

Weak:

<section class="spacing-large">
  <div>...</div>
</section>

if the element only creates spacing or layout.

For purely visual layout wrappers, a <div> is still correct.

5. Use Real Links and Buttons #

Links lead to another URL. Buttons trigger an action.

Link:

<a href="/contact/">Get in touch</a>

Button:

<button type="button">Open menu</button>

Bad:

<div onclick="openMenu()">Open menu</div>

Google recommends using an <a> element with an href attribute for crawlableCrawling is the process by which a search engine bot fetches a URL and downloads its content. It is the first step before a page can be indexed.Open glossary entry → links.
Source: Google Search Central, Links best practices

6. Mark Lists as Real Lists #

Weak:

<p>- Item 1<br>- Item 2<br>- Item 3</p>

Better:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

This is better for accessibility, readability and machine structure.

7. Use Tables Only for Data #

Tables are for tabular data, not for layout.

Good:

<table>
  <thead>
    <tr>
      <th>Metric</th>
      <th>Good value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>LCP</td>
      <td>≤ 2.5 s</td>
    </tr>
  </tbody>
</table>

Bad: table layout for columns, cards or navigation.

ARIA vs. Semantic HTML #

ARIA can help when native HTML elements are not enough. But ARIA should not be the first step.

The W3C documentation “Using ARIA” states as its first rule: if a native HTML element or attribute already has the semantics and behavior you need, use it instead of repurposing another element with ARIA.
Source: W3C, Using ARIA

Simply put:

Native HTML first, then ARIA.

Good:

<nav aria-label="Main navigation">
  ...
</nav>

Weaker:

<div role="navigation" aria-label="Main navigation">
  ...
</div>

Not everything needs ARIA:

<nav role="navigation">

is usually redundant because <nav> already has this role implicitly.

Exception: role="main" as a Fallback #

For the main content, role="main" is a valid option. The W3C landmark examples name both ways for the same main region: the <main> element or the role="main" attribute.
Source: W3C WAI-ARIA Authoring Practices, Main Landmark

RankScan counts role="main" like a <main>. If rebuilding the template is too much work, the attribute on the existing container is enough:

<div class="main-content" role="main">
  ...
</div>

The existing container and its CSS classes stay unchanged. If you are rebuilding the template anyway, use the native <main>.

ARIA is especially important for more complex components such as:

• tabs,
• modals,
• accordions,
• autocomplete,
• dynamic menus,
• single-page app components.

But keyboard interaction, focus management and screen reader behavior must also be implemented correctly.

Semantic HTML and Heading Structure #

Semantic containers do not replace a good heading structureThe heading hierarchy is the logical nesting of headings from H1 to H6 that structures a page's content, much like a table of contents.Open glossary entry →.

A good page needs:

• a clear H1,
• logical H2 headings,
• suitable H3 headings,
• no headings used only for styling,
• no empty heading tags,
• no heading jumps caused purely by design logic.

Example:

<main>
  <article>
    <h1>Semantic HTML</h1>

    <section>
      <h2>What is semantic HTML?</h2>
      <p>...</p>
    </section>

    <section>
      <h2>Why is it important?</h2>
      <p>...</p>
    </section>
  </article>
</main>

The old HTML5 outline algorithm, which in theory should have evaluated nested sectioning elements with their own H1The H1 is a web page's main heading. It names the central topic, is visible to users and should generally appear only once per page.Open glossary entry → headings, was not reliably implemented by browsers in practice. For today’s websites, a clear visible H1-H6 structure remains the more robust solution.

Semantic HTML in Modern Frontends #

Semantic HTML also matters in React, Vue, Angular, Svelte, Astro and headless setups.

Common problems:

• components always return <div>,
• cards are clickable <div> elements instead of links,
• buttons are used as links,
• navigation is built client-side without real <a href> links,
• headings are replaced by design components,
• modal dialogs have no correct semantics,
• server-side rendering (SSRWith Server-Side Rendering (SSR), the server generates the finished HTML before delivering the page to the browser or crawler. Content is therefore present in the source immediately.Open glossary entry →) or static site generation (SSG) is missing, and important structure is only created in the browser.

Example in React:

Weak:

<div className="card" onClick={() => navigate('/product')}>
  <div className="title">Product</div>
</div>

Better:

<article className="card">
  <h2>
    <a href="/product">Product</a>
  </h2>
</article>

This is more accessible, more crawlable and semantically clearer.

Checking: How Do You Identify Semantic HTML Problems? #

1. Check the Source Code #

Look for the following in the page source:

• <main>,
• <nav>,
• <article>,
• <section>,
• <aside>,
• <header>,
• <footer>,
• real <a href> links,
• real <button> elements,
• real lists and tables.

If you mostly find nested <div> elements, that is a warning sign.

2. Use DevTools and the Accessibility Tree #

In browser DevTools, you can inspect the accessibility tree.

Pay attention to:

• landmarks,
• navigation name,
• main region,
• buttons,
• links,
• headings,
• forms,
• keyboard focus.

3. Check Lighthouse Accessibility #

LighthouseLighthouse is an open-source diagnostic tool from Google that audits a page's performance, accessibility and other quality aspects in a simulated lab environment.Open glossary entry → detects many accessibility issues, for example:

• missing button names,
• links without names,
• invalid ARIA attributes,
• missing labels,
• poor landmark structure,
• heading problems.

Lighthouse does not replace a manual accessibility audit, but it is a good starting point.

4. Run a Keyboard Test #

Use only the keyboard:

• Tab,
• Shift + Tab,
• Enter,
• Space,
• Escape,
• arrow keys for menus or tabs.

If navigation, buttons, modals or menus do not work cleanly, the issue often affects not only accessibility but also semantics.

5. Screen Reader or Landmark Test #

Check with a screen reader or browser extensions:

• is there a main navigation?
• is there a main region?
• are headings meaningful?
• are buttons recognizable as buttons?
• are links recognizable as links?

Prioritization: Which Semantic Issues Matter? #

The following table is a general professional assessment. RankScan shows a single severity for both measures: low.

The most important rule:

Prioritize templates and components that affect many important pages.

What to Do About “Main content not marked up” #

The task concerns the page template, not each page individually.

Procedure #

1. Hand the task to development or your agency.
2. Have the container of the main content replaced with <main>. Every page needs exactly one <main>.
3. If the rebuild is too much work, role="main" on the existing container is enough.
4. Anyone working on the template anyway wraps the main menu and footer in <nav> and <footer>. This is not required.
5. Check that the pages look the same afterwards. CSS rules targeting the old containers can break.
6. Mark the measure as done once the change is live.

Before:

<div class="main-content">
  ...
</div>

After, with the new element:

<main class="main-content">
  ...
</main>

If the new element keeps the old class, class rules keep working. Rules that target the div element itself, such as body > div, no longer apply. That is why the visual comparison in step 5 is part of the task.

How RankScan checks it: The next full crawl checks all affected pages. RankScan then reports “Fixed” or “Not fixed yet” with the number of pages still missing.

What to Do About “Posts without an article element” #

The task concerns the template for blog and news posts.

Procedure #

1. Hand the task to development or your agency.
2. Have the post with title, date and text wrapped in <article> there, inside <main>.
3. Service and overview pages stay as they are. There, <main> is enough.
4. Check that the posts look the same afterwards.
5. Mark the measure as done once the change is live.

<main>
  <article>
    <h1>Title of the post</h1>
    <time datetime="2026-10-01">1 October 2026</time>
    <p>Text of the post ...</p>
  </article>
</main>

How RankScan checks it: The next full crawl checks all affected posts. RankScan then reports “Fixed” or “Not fixed yet” with the number of posts still missing.

Optional: More Semantics in the Same Template #

If you are touching the template anyway, you can check further points at the same time. RankScan does not require or measure them:

• Links are <a href>, actions are <button>.
• Forms use <label>.
• Menus and modal dialogs work with the keyboard.
• Headings follow a clear order, see SEO headings.
• Lighthouse, the accessibility tree in DevTools and an HTML validator show further weaknesses.

What RankScan Checks for Semantic HTML #

RankScan checks two findings during the crawl:

• No <main>: The page has neither a <main> nor a container with role="main". This leads to “Main content not marked up”.
• Post without <article>: A blog or news post has a <main>, but no <article>. This leads to “Posts without an article element”.

RankScan measures nothing else in this article. This includes <nav>, <section>, <aside>, multiple <main> elements, clickable <div> elements, ARIA roles, lists and tables. For these points, use the general checklist further below.

Example: Page Builder Creates a Div Desert #

Situation #

A B2B website was built with a page builder. Visually, it is modern. In the code, almost everything consists of nested <div> containers.

RankScan reports:

“Main content not marked up”
“Pages without a main heading (H1)”
“Little content in the delivered HTML – check renderingJavaScript rendering is the process by which a browser or crawler executes JavaScript code to build the final, visible page. Content that is not already in the delivered HTML only appears after this step.Open glossary entry →”

“Posts without an article element” does not appear yet. Without <main>, RankScan reports only the first measure.

Analysis #

• no <main> in the page template,
• no real H1 in the initial HTML,
• navigation partly built as clickable divs,
• cards are not links,
• blog posts are not marked up as <article>.

Solution #

1. The agency wraps the main content in <main> in the page template. This is what the measure requires.
2. In the post template, it wraps the post in <article>, inside <main>.
3. Since it is touching the template anyway, it puts the main menu and footer into <nav> and <footer>. This is optional.
4. It replaces clickable divs with <a> or <button>. This is also general hygiene that RankScan does not measure.
5. The team compares important pages before and after the rebuild. A menu spacing has shifted because a CSS rule targeted the old container. The agency fixes the rule.
6. The team marks the measure as done.

Result #

The next full crawl reports “Main content not marked up” as fixed. If individual posts still lack <article>, “Posts without an article element” now appears. The page looks the same, but it is technically more understandable and more accessible. Rankings or AI citations are not guaranteed.

Common Mistakes with Semantic HTML #

Mistake 1: Banning Divs Completely #

<div> is not bad. It is correct when you need a neutral layout container and no semantic element fits.

Mistake 2: Using Semantics for Styling #

A <section> is not a spacer. Use it for thematic sections.

Mistake 3: Confusing Buttons and Links #

Link = navigation to a URL. Button = action on the page.

Mistake 4: Using ARIA Instead of HTML #

ARIA can complement HTML, but native elements are usually more robust.

Mistake 5: Using Headings as Design Elements #

A heading is structural information, not just a font size.

Mistake 6: Creating Multiple Main Regions #

A page should have exactly one visible main content area.

Mistake 7: Checking Semantics Only on Desktop #

Mobile menus, accordions and off-canvas navigation are often the real problem areas.

Checklist: Check Semantic HTML #

RankScan measures the first two points:

• Does every page have a <main> or a container with role="main"?
• Does every blog or news post have an <article>?

The other points are a general checklist. RankScan does not measure them:

• Is there exactly one <main> per page?
• Is the <article> inside <main>?
• Do the pages look the same after the rebuild?
• Is there a <header> and <footer>?
• Is the main navigation marked up as <nav>?
• Are navigation links real <a href> links?
• Is there a clear H1?
• Are thematic sections meaningfully structured with <section> and a heading?
• Is supplementary content in <aside>?
• Are lists real <ul> or <ol> lists?
• Are buttons real <button> elements?
• Are tables used only for data?
• Are there clickable <div> elements?
• Are ARIA roles necessary or redundant?
• Does the page work with keyboard only?
• Is the accessibility tree understandable?

Once the change is live, mark the measure as done. The next full crawl checks the affected pages.

In addition, schema markup and summaries and key takeaways help narrow down the cause and prioritize the next SEO measures cleanly.

Conclusion: Semantic HTML Makes Content More Understandable #

Semantic HTML is the invisible structure of a website. It separates main content from navigation, supplementary information and the footer. It makes content easier to understand for browsers, screen readers, search engines, developers and crawlers.

The RankScan measures “Main content not marked up” and “Posts without an article element” show two concrete gaps: no <main> on a page and no <article> in a post.

Here is how to proceed:

1. Hand the task to development or your agency. It concerns the template, not each page individually.
2. Have the main content of every page wrapped in <main>. If that is too much work, role="main" on the existing container is enough.
3. Have the post wrapped in <article> in the post template, inside <main>.
4. <nav>, <footer>, <section> and clean links and buttons are an optional extra.
5. Check that the pages look the same afterwards.
6. Mark the measure as done. The next full crawl checks the affected pages.

This turns a div desert into a clear structure. It is more accessible for people and more understandable for machines.

Sources and Further Reading #

• Google Search Central Blog, On web semantics
• Google Search Central, SEO Starter Guide
• Google Search Central, Links best practices
• Google Search Central, AI features and your website
• MDN, HTML elements reference
• MDN, HTML: A good basis for accessibility
• WHATWG HTML Standard, Sections
• W3C, Using ARIA
• W3C, ARIA in HTML
• W3C WAI-ARIA Authoring Practices, Main Landmark