HTML & CSS: The Document Model•The Document•Lesson 2 of 18

Semantic HTML

Semantic HTML means choosing elements based on their meaning, not their default appearance. Every element in HTML has a purpose—a role in the document structure that browsers, search engines, and assistive technologies understand.

Using <div> and <span> everywhere is like writing a research paper entirely in plain text without headings, paragraphs, or citations. The content exists, but the structure is invisible.

Block vs Inline: Flow and Phrasing

HTML elements fall into two fundamental categories based on how they behave in the layout flow.

Block-level elements (flow content) start on a new line and take up the full available width. They can contain other block elements and inline elements.

Inline elements (phrasing content) sit within the flow of text and only take up as much width as their content requires. They can only contain other inline elements or text.

<!-- Block-level: each starts a new line -->
<p>This is a paragraph.</p>
<div>This is a division.</div>
<h2>This is a heading.</h2>

<!-- Inline: flows with surrounding text -->
<p>This is <strong>bold text</strong> and <em>italic text</em> in a paragraph.</p>

This distinction matters because you cannot nest block elements inside inline elements. This breaks HTML rules:

<!-- WRONG: block inside inline -->
<span>
  <div>Invalid nesting</div>
</span>

<!-- CORRECT: inline inside block -->
<p>
  This is <span class="highlight">valid</span> nesting.
</p>

Sectioning Content

Sectioning elements divide your document into logical regions. They create landmarks that assistive technologies use for navigation.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Semantic Structure</title>
</head>
<body>
  <header>
    <h1>Site Title</h1>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h2>Article Title</h2>
      <p>Article content goes here.</p>
    </article>

    <aside>
      <h3>Related Links</h3>
      <ul>
        <li><a href="/related">Related Article</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>Copyright 2026</p>
  </footer>
</body>
</html>

Each sectioning element has a specific semantic purpose:

  • <header>: Introductory content or navigation aids. Can appear multiple times (page header, article header).
  • <nav>: Major navigation blocks. Not every list of links needs a <nav>—reserve it for primary site navigation.
  • <main>: The primary content of the document. Only one <main> per page. Excludes repeated content like sidebars and navigation.
  • <section>: A thematic grouping of content, typically with a heading. Represents a chapter, tabbed content, or distinct topic.
  • <article>: A self-contained piece of content that could stand alone: blog post, news story, forum post, product card.
  • <aside>: Tangentially related content. Sidebars, pull quotes, or related links.
  • <footer>: Footer for its nearest sectioning ancestor. Can appear in articles, sections, or at the page level.

Text Semantics

Choose text elements based on their semantic meaning, not their visual styling.

Headings

Headings (<h1> through <h6>) create a document outline. They should form a logical hierarchy without skipping levels.

<!-- WRONG: skipped from h1 to h3 -->
<h1>Page Title</h1>
<h3>Subsection</h3>

<!-- CORRECT: logical hierarchy -->
<h1>Page Title</h1>
<h2>Major Section</h2>
<h3>Subsection</h3>

Use only one <h1> per page—it represents the main topic. Screen readers use heading structure for navigation. Search engines use it to understand content hierarchy.

Emphasis and Importance

<strong> indicates importance, seriousness, or urgency. Screen readers may announce it with emphasis.

<b> applies bold styling without semantic meaning. Use for keywords in a review or product names—visual distinction without added weight.

<em> indicates stress emphasis, changing the meaning of the sentence.

<i> applies italic styling for technical terms, foreign phrases, or thoughts—visual distinction without emphasis.

<!-- Semantic emphasis -->
<p><strong>Warning:</strong> Do not touch live wires.</p>
<p>Make sure to <em>close</em> the door, not lock it.</p>

<!-- Visual styling without semantic weight -->
<p>The term <i>habeas corpus</i> is Latin for "you have the body."</p>
<p>Search for <b>React hooks</b> in the documentation.</p>

Other Text Semantics

<mark> highlights text for reference purposes, like search results.

<p>Results for "semantic HTML": <mark>semantic</mark> HTML improves accessibility.</p>

<time> represents dates or times in a machine-readable format.

<p>Published <time datetime="2026-01-20">January 20, 2026</time></p>

<code> represents inline code fragments.

<p>Use the <code>fetch()</code> function to make HTTP requests.</p>

Lists

Lists structure related items. Choosing the right list type adds semantic meaning.

Unordered lists (<ul>) for items without inherent sequence:

<ul>
  <li>Milk</li>
  <li>Eggs</li>
  <li>Bread</li>
</ul>

Ordered lists (<ol>) for sequential items where order matters:

<ol>
  <li>Preheat oven to 350°F</li>
  <li>Mix ingredients</li>
  <li>Bake for 30 minutes</li>
</ol>

Description lists (<dl>) for term-definition pairs:

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

Description lists work for glossaries, metadata, FAQ sections—any content with paired terms and definitions.

The Figure Pattern

The <figure> element represents self-contained content that's referenced from the main flow but could be moved without affecting meaning: images, diagrams, code listings, or quotes.

Use <figcaption> to provide a caption within the figure.

<figure>
  <img src="dom-tree.png" alt="Visual representation of a DOM tree structure">
  <figcaption>Figure 1: The DOM tree for a simple HTML document</figcaption>
</figure>
<figure>
  <pre><code>function greet(name) {
  return `Hello, ${name}!`;
}</code></pre>
  <figcaption>Example 2: A simple greeting function in JavaScript</figcaption>
</figure>

The <figure> element groups content with its caption, creating an explicit relationship between them.

Avoiding Divitis

Divitis is the excessive use of <div> and <span> elements when semantic alternatives exist. It makes your HTML less meaningful and harder to understand.

<!-- Divitis: meaningless structure -->
<div class="header">
  <div class="title">About Us</div>
  <div class="nav">
    <div class="link"><a href="/">Home</a></div>
    <div class="link"><a href="/about">About</a></div>
  </div>
</div>
<div class="content">
  <div class="text">We build things.</div>
</div>

<!-- Semantic: meaningful structure -->
<header>
  <h1>About Us</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>
<main>
  <p>We build things.</p>
</main>

The semantic version:

  • Requires less markup
  • Works without CSS
  • Communicates structure to assistive technologies
  • Creates navigable landmarks
  • Expresses intent clearly

Why Semantics Matter

Semantic HTML is not about satisfying validators or following arbitrary rules. It's about creating documents that work in contexts you cannot predict.

Your HTML might be:

  • Read by a screen reader to a blind user
  • Indexed by a search engine
  • Rendered on a smartwatch or in a car dashboard
  • Stripped of CSS on a slow connection
  • Parsed by a browser extension
  • Converted to PDF or ePub
  • Displayed in reader mode

Semantic markup ensures your content remains meaningful across all these scenarios. The structure survives independent of presentation.

Check Your Understanding

Which element should you use for tangentially related content like a sidebar?

Not quite. The correct answer is highlighted.

What is the difference between <strong> and <b>?

Not quite. The correct answer is highlighted.
The element represents self-contained content like images or code listings with an optional caption.
Not quite.Expected: figure

What is 'divitis'?

Not quite. The correct answer is highlighted.

Practice

Summary

  • Block vs Inline: Flow content (block) starts new lines and can contain other blocks; phrasing content (inline) flows with text and can only contain inline elements.
  • Sectioning Elements: Use <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer> to create meaningful document structure and navigation landmarks.
  • Text Semantics: Choose <strong> for importance, <em> for emphasis, <mark> for highlights, and <time> for dates—each carries specific meaning beyond visual styling.
  • Lists Matter: Use <ul> for unordered items, <ol> for sequences, and <dl> for term-definition pairs—structure clarifies relationships.
  • Figure Pattern: Wrap self-contained content like images or code blocks in <figure> with a <figcaption> to create explicit relationships.
  • Avoid Divitis: Reserve <div> and <span> for non-semantic styling hooks—start with semantic elements that communicate meaning without CSS.