HTML Semantics

HTML is not just a way to display content — it is a contract between your page and the browsers, screen readers, search engines, and other tools that consume it. The specific elements you choose communicate meaning, not just appearance. That meaning is called semantics.

Why Semantics Matter

A <div> and a <nav> can look identical on screen. But a screen reader announces a <nav> as a navigation landmark and lets users jump straight to it. A search engine treats <article> content as the primary body of a page. A browser’s reader mode strips everything except semantic content areas. Using the wrong element — or defaulting to <div> everywhere — silently removes all of those benefits.

Three concrete harms of non-semantic HTML:

Screen reader users cannot navigate by landmarks (they must read every element in order).
Search engines cannot distinguish main content from sidebars or footers.
Browser features like reader mode, print styles, and focus management break or degrade.

Block vs Inline

Block-level elements start on a new line and expand to fill their container’s full width. Examples: <p>, <div>, <h1>–<h6>, <ul>, <ol>, <li>, <section>, <article>.

Inline elements flow within text and only occupy as much width as their content. Examples: <span>, <a>, <strong>, <em>, <code>, <time>, <abbr>.

The distinction matters for CSS layout, margin/padding behavior, and valid nesting (you cannot put a <p> inside a <span>).

Key Landmark Elements

Element	Purpose
`<header>`	Introductory content for the page or a section — logo, title, top nav
`<nav>`	A block of navigation links (primary menu, breadcrumbs, pagination)
`<main>`	The single primary content area of the page — use only once
`<section>`	A thematically related group of content that would benefit from a heading
`<article>`	Self-contained content that makes sense on its own (blog post, card, comment)
`<aside>`	Content tangentially related to the main content (callout box, related links)
`<footer>`	Closing content — copyright, contact links, secondary nav

Good vs Bad Example

<!-- ❌ Non-semantic: meaningful only to sighted users -->
<div class="header">
  <div class="nav">
    <div class="nav-item"><a href="/">Home</a></div>
    <div class="nav-item"><a href="/about">About</a></div>
  </div>
</div>
<div class="content">
  <div class="post">
    <div class="title">My First Post</div>
    <div class="body">Lorem ipsum...</div>
  </div>
</div>
<div class="footer">© 2025</div>

<!-- ✅ Semantic: structure is machine-readable -->
<header>
  <nav aria-label="Primary">
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>
<main>
  <article>
    <h1>My First Post</h1>
    <p>Lorem ipsum...</p>
  </article>
</main>
<footer>
  <p>© <time datetime="2025">2025</time></p>
</footer>

Figure, Figcaption, and Time

<figure> wraps self-contained media (images, diagrams, code blocks) and <figcaption> provides an accessible caption. The <time> element attaches a machine-readable date to human-readable text:

<figure>
  <img src="chart.png" alt="Monthly active users, Jan–Jun 2025" />
  <figcaption>Figure 1: User growth over the first half of 2025.</figcaption>
</figure>

<p>Published on <time datetime="2025-06-15">June 15, 2025</time>.</p>

IMPORTANT

Every <img> must have an alt attribute. For decorative images use alt="" (empty string, not missing). Screen readers skip empty-alt images but announce images with a missing alt attribute as the filename — which is useless.

NOTE

<section> should almost always have a heading as its first child. If a grouping of content doesn’t warrant a heading, <div> is often the right choice instead.

TIP

Install the “Accessibility Insights for Web” browser extension or run Lighthouse in DevTools to instantly see which semantic landmarks your page exposes and which are missing.

Further Learning

Search these terms to go deeper:

“ARIA landmark roles” — how ARIA supplements (not replaces) native HTML semantics
“HTML5 document outline algorithm” — why heading hierarchy still matters even with sectioning elements
“WebAIM screen reader survey” — real data on how assistive technology users navigate the web
“SEO semantic HTML” — how search engines use structured markup to understand page content
“MDN HTML elements reference” — the canonical list of every element with usage guidance

HTML Semantics

Imagine you’re organizing a book. You could dump every sentence into one giant paragraph — or you could add chapters, a table of contents, and page headers. The words are the same, but the second version is far easier to navigate. Semantic HTML is that structure for a web page: choosing tags that describe what something is, not just how it looks.

Why the right tags matter

A <div> (a generic box) and a <nav> (a navigation menu) can look identical on screen. But the difference is huge for people and machines that can’t “see” your page:

Screen readers (software that reads pages aloud for blind users) can jump straight to a <nav> or <main>. With plain <div>s, they have to read everything top to bottom.
Search engines like Google use <article> to find the real content of your page, so it ranks better.
Browser features like reader mode and print layouts rely on these tags to work.

Use the wrong tag and you quietly lose all of that.

Two kinds of elements: block and inline

Block elements start on their own line and stretch across the full width. Think of paragraphs and headings: <p>, <h1>, <div>, <section>.
Inline elements sit inside a line of text and only take up as much room as they need: <a> (a link), <strong> (bold), <span>, <time>.

Quick rule: block = a stacked box, inline = a word or two inside a sentence.

The “landmark” tags to know

These describe the main regions of a page:

Tag	What it’s for
`<header>`	The top strip — logo, title, main menu
`<nav>`	A set of navigation links
`<main>`	The main content (use it once per page)
`<article>`	A self-contained chunk — a blog post, a comment
`<aside>`	Side content — a callout or related links
`<footer>`	The bottom strip — copyright, contact

See the difference

<!-- ❌ Everything is a plain box — meaningless to a screen reader -->
<div class="header">
  <div class="nav"><a href="/">Home</a></div>
</div>
<div class="content">
  <div class="title">My First Post</div>
</div>

<!-- ✅ Same look, but now the structure has meaning -->
<header>
  <nav aria-label="Primary"><a href="/">Home</a></nav>
</header>
<main>
  <article>
    <h1>My First Post</h1>
  </article>
</main>

Pictures and dates

<figure> groups an image with a caption, and <time> gives a date the computer can actually read:

<figure>
  <img src="chart.png" alt="User growth, Jan–Jun 2025" />
  <figcaption>Figure 1: users over the first half of 2025.</figcaption>
</figure>

<p>Published on <time datetime="2025-06-15">June 15, 2025</time>.</p>

IMPORTANT

Every <img> needs an alt — a short text description for people who can’t see it. If the image is purely decorative, use alt="" (empty) so screen readers skip it.

In one sentence

Pick the tag that matches the meaning of your content — <nav> for menus, <main> for the main stuff, <article> for a post — and your page instantly works better for real people and for Google.

Want to go deeper?

Switch to Expert mode above for the full breakdown, including how <section> vs <article> differ and how ARIA landmarks fit in.