Skip to main content

Semantic HTML

Open any website and look at it as a human. You instantly see a header at the top, a menu, the main story, a sidebar, and a footer at the bottom. Your eyes tell you what each part is for.

But a browser, a search engine, or a screen reader has no eyes. It only sees your markup. If every part is just a <div>, they all look the same, and nothing tells the machine what is a menu and what is a story. Semantic HTML fixes that: you choose elements by their meaning, so people and software can understand the page.

This section teaches the elements that give a page its structure, plus three interactive ones (details, summary, and dialog) that give you accordions and pop-ups with no JavaScript.


What You Will Learn​

In this section, you will be able to:

  • Explain what semantic HTML is, and why it matters
  • Build page structure with <header>, <nav>, <main>, and <footer>
  • Group content with <section>, <article>, and <aside>, and know which to pick
  • Mark up contact details with <address>
  • Create expandable content with <details> and <summary>
  • Open modal and non-modal pop-ups with <dialog>
  • Combine everything into a semantic page layout
  • Test your structure like a screen reader user would
Prerequisites

You should know basic HTML elements, headings, and attributes. If you need a refresher on how pages connect, read Links and Navigation. Forms are covered separately in HTML Forms.

What "Semantic" Means​

Semantic means "carrying meaning". A semantic element tells you what its content is, not just how it looks.

Non-semanticSemantic
<div>: "a box", no meaning<nav>: "navigation links"
<span>: "some text", no meaning<address>: "contact details"
<div class="top"><header>
<div class="menu"><nav>
<div class="story"><article>
<div class="sidebar"><aside>
<div class="bottom"><footer>
<div onclick="..."><button>

Both versions can look identical with CSS. The difference is invisible to the eye, and very visible to everything else.

Div Soup vs Semantic HTML​

Compare the same page written two ways:

index.html
<div class="top">
  <div class="logo">My Site</div>
  <div class="menu">
    <a href="/">Home</a>
    <a href="/about">About</a>
  </div>
</div>

<div class="content">
  <div class="story">
    <div class="title">How to bake bread</div>
    <div>Mix flour, water, salt, and yeast…</div>
  </div>
  <div class="sidebar">Related: sourdough</div>
</div>

<div class="bottom">© 2026 My Site</div>

The second version is also shorter, clearer to read, and easier to style (you can select nav instead of inventing .menu).

Try It: What a Screen Reader Finds​

Press the button. A small script scans each page for landmarks, the named regions that screen reader users use to jump around a page, much as you use your eyes to jump to the menu or the main story.

index.html
<!-- Page A: all divs -->
<div>My Site</div>
<div><a href="/">Home</a> · <a href="/about">About</a></div>
<div>
  <div>How to bake bread</div>
  <div>Mix flour, water, salt, and yeast…</div>
</div>
<div>Related: sourdough</div>
<div>© 2026 My Site</div>

<!-- Page B: semantic elements -->
<header>My Site</header>
<nav aria-label="Main"><a href="/">Home</a> · <a href="/about">About</a></nav>
<main>
  <article>
    <h1>How to bake bread</h1>
    <p>Mix flour, water, salt, and yeast…</p>
  </article>
</main>
<aside>Related: sourdough</aside>
<footer>© 2026 My Site</footer>

Page A has no landmarks at all. A screen reader user must listen to the page from top to bottom to find the menu. Page B gives them a list of regions to jump between. That one change is the heart of this section.

Why It Matters​

BenefitWhat it means in practice
AccessibilityScreen reader users jump between landmarks, skip repeated menus, and understand what each region is. Keyboard users get built-in behaviour from details, dialog, and button
Search enginesCrawlers use structure to understand which part of the page is the main content and which is navigation or a footer. (Structure helps them understand your page. It is not a magic ranking switch.)
Readable code<nav> says more than <div class="n1">. Other developers, and your future self, will thank you
Easier stylingSelect by element name, with fewer invented class names
Built-in featuresBrowser reading modes, translation tools, and assistive technologies rely on structure. details and dialog work with no JavaScript
ResilienceA semantic page still makes sense when CSS fails to load, or on a device you did not test
Global reachClear structure survives translation, voice assistants, and low-bandwidth readers

The Semantic Elements at a Glance​

ElementRole (what it is announced as)Use it forLesson
<header>banner (page level)Introduction: site name, logo, intro contentHeader
<nav>navigationA block of major navigation linksNav
<main>mainThe central content, once per pageMain
<section>region (if named)A themed group of content, with a headingSection
<article>articleA self-contained piece: post, story, product cardArticle
<aside>complementaryRelated but separate content: a sidebarAside
<footer>contentinfo (page level)Closing information: copyright, contactsFooter
<address>(none)Contact details for the page or articleAddress
<details> and <summary>groupContent the visitor can expand and collapseDetails, Summary
<dialog>dialogModal and non-modal pop-upsDialog

Try It: The Page Map​

Click each region of the wireframe to see which element it should be, and how a screen reader announces it.

index.html
<body>
  <header>…</header>

  <nav aria-label="Main">…</nav>

  <main>
    <article>…</article>
  </main>

  <aside>…</aside>

  <footer>…</footer>
</body>

Which Element Should I Use?​

When you are not sure, ask what the content is:

The content is...Use
The top of the page or of a section<header>
A set of major links<nav>
The one main thing on the page<main>
A complete piece that could be shared or syndicated on its own<article>
A themed part of a page, with its own heading<section>
Side content, or a tangent<aside>
The closing information<footer>
Contact information<address>
Extra detail the visitor may reveal<details> with <summary>
A pop-up that needs attention<dialog>
Just a hook for styling or scripting, with no meaning<div> (or <span> inside text)
div is not evil

<div> and <span> are still useful. Use them when no semantic element fits, for example a wrapper for layout. The mistake is using them when a better element exists.

Semantic Elements Do Not Replace Headings​

Landmarks (header, main, nav...) mark the regions of a page. Headings (h1 to h6) mark the outline of the content inside them. You need both:

  • Landmarks let people jump between regions.
  • Headings let people scan topics.

A good page has one <h1>, followed by headings in a logical order, inside the right landmarks. You can see how they work together in Semantic Page Layout.

Your Learning Path​

Follow the lessons in order. They go from the big idea, to the page frame, to grouping content, to interactive elements, and finish by putting it all together.

How to Check Your Own Pages​

You do not need special software to test structure. Try these:

  1. Turn off CSS. (In your browser's developer tools, or use a reader mode.) Is the page still in a sensible order?
  2. Tab through the page with only a keyboard. Does focus follow the visual order?
  3. Look at the outline. Do the headings read like a table of contents?
  4. Use a screen reader's landmark list. (VoiceOver on Mac and iPhone, NVDA on Windows, TalkBack on Android.) Is there one main, one banner, and sensibly named navigation?
  5. Use your browser's accessibility panel in the developer tools to see the roles the browser assigned.
  6. Run an HTML validator, and an accessibility checker such as Lighthouse or axe. They find only some problems, so always add the manual checks above.

Common Beginner Mistakes​

MistakeWhat goes wrongWhere you will fix it
Using <div> for everythingNo landmarks, no meaningWhy Semantic HTML
Using headings for size, not structureBroken outline for screen readersSemantic Page Layout
More than one <main>Confusing landmarksMain
Putting everything in <section>A section with no heading adds nothingSection
Confusing <section> and <article>Wrong structureArticle
Using <nav> for every link groupToo many landmarks to jump betweenNav
Using <aside> just to get a box on the sideWrong meaningAside
Making a <div> act like a buttonNo keyboard supportDetails, Dialog
Using <address> for any postal addressIt is for contact details of the page or articleAddress
Using semantic elements only for their default lookMeaning matters, not appearanceWhy Semantic HTML

Semantic HTML for a Global Audience​

  • Set lang on the <html> element, so screen readers use the right voice, and translation tools know the source language.
  • Set dir="rtl" for right-to-left languages such as Arabic and Hebrew. Semantic structure mirrors cleanly, because the order in the HTML is the order people read.
  • Name your landmarks in the page's language. If you have more than one nav, give each an aria-label such as "Main" or "Footer", and translate it.
  • Keep reading order logical in the HTML itself, not only in CSS. People using translation tools, voice assistants, and reader modes get the source order.
  • Write short, plain headings and labels that translate well.
  • Remember low-bandwidth readers. A semantic page works with little or no CSS and JavaScript, which matters on slow or old devices.

A Note on Security and Privacy​

Semantic elements describe structure, and they do not protect anything.

  • <details> and <dialog> hide content visually, but not from the page. Anything inside is still in the HTML that anyone can read. Never put secrets in a collapsed section or a closed dialog.
  • <address> is public. Put only contact details you want public. Publishing a personal email or phone number invites spam and worse.
  • Escape user content you place inside any of these elements, as you would anywhere else.

Quick Recap​

Test yourself. Click a question to reveal the answer.

1. What does "semantic" mean in HTML?

It means the element's name carries meaning about its content (a <nav> is navigation, an <article> is a self-contained piece), rather than just how it looks.

2. Why can a page full of <div>s be a problem?

A <div> has no meaning, so browsers, search engines, and screen readers cannot tell a menu from a story from a footer. Screen reader users cannot jump between regions.

3. Which elements form the basic frame of a page?

<header>, <nav>, <main>, and <footer>, with <aside> for related side content.

4. When is <div> still the right choice?

When no semantic element fits, for example a wrapper for layout or a styling hook. The mistake is using it when a better element exists.

5. Do semantic elements replace headings?

No. Landmarks mark the regions of a page, and headings mark the topic outline inside them. A good page uses both.

6. Do <details> and <dialog> keep their content secret?

No. They only hide it visually. The content is still in the page source, so never put secrets in them.

Key Takeaways​

  • Semantic HTML means choosing elements for their meaning, so people and software understand your page.
  • <header>, <nav>, <main>, <footer>, and <aside> create landmarks that screen reader users jump between.
  • <section> groups content by theme (with a heading), and <article> marks a self-contained piece.
  • <address>, <details>, <summary>, and <dialog> give you contact markup, accordions, and pop-ups with built-in behaviour.
  • Use <div> and <span> only when nothing semantic fits.
  • Landmarks and headings work together: regions plus outline.
  • Test with CSS off, a keyboard, and a screen reader's landmark list.
  • Semantic structure helps accessibility, search engines, maintenance, and a global audience, but it is not security.

Ready to begin? Start with Why Semantic HTML.