HTML Semantics

Semantic tags give meaning to your web page structure — they tell the browser not just how to display something, but also "what this section is." This greatly helps with SEO, accessibility, and code readability.

What Is Semantics

"Semantics" means "meaning." You can build any layout with <div>, but the browser can't understand the container's purpose. Semantic tags communicate their purpose directly through their names:

HTML

<header>
  <h1>My Blog</h1>
  <nav>
    <a href="index.html">Home</a>
  </nav>
</header>
<main>
  <article>
    <h2>Article Title</h2>
    <p>Article content...</p>
  </article>
  <aside>Sidebar</aside>
</main>
<footer>
  <p>&copy; 2026</p>
</footer>

▶ Try It Yourself

📌 Common Tags: <header> page header, <nav> navigation, <main> main content, <section> section, <article> article, <aside> sidebar, <footer> footer. They are all block-level containers that function like <div>, but their names describe their purpose.

Benefits of Semantics

Semantics offer three direct benefits: search engines understand your page structure more accurately; screen readers can jump to specific areas; developers understand the layout at a glance, without guessing what a <div> class name means.

Image/Content Container: figure and figcaption

<figure> wraps self-contained content like images, code blocks, or charts, while <figcaption> provides a caption for it:

HTML

<figure>
  <img src="chart.png" alt="2026 sales data chart">
  <figcaption>Figure 1: Quarterly sales comparison for 2026</figcaption>
</figure>

<figure>
  <pre><code>console.log("Hello World");</code></pre>
  <figcaption>Code example: printing Hello World</figcaption>
</figure>

▶ Try It Yourself

Time and Highlighting: time and mark

<time> makes dates and times machine-readable, and <mark> highlights search keywords or important text:

HTML

<p>Published on <time datetime="2026-06-12">June 12, 2026</time></p>

<p>Search for: <mark>semantic tags</mark>,
results will be highlighted.</p>

<p><time datetime="2026-06-12T14:30:00+08:00">
2:30 PM tomorrow</time> the meeting will be held.</p>

▶ Try It Yourself

Collapsible Content: details and summary

<details> creates an expandable/collapsible interactive widget, and <summary> defines its visible heading. Pure HTML, no JavaScript needed:

HTML

<details>
  <summary>What are semantic tags?</summary>
  <p>Semantic tags are HTML tags that use meaningful names
  to describe content purpose, such as &lt;header&gt;,
  &lt;nav&gt;, &lt;article&gt;, etc.</p>
</details>

<details open>
  <summary>Already expanded panel (with open attribute)</summary>
  <p>Adding the open attribute makes the panel expanded by default.</p>
</details>

▶ Try It Yourself

💡 More Semantic Tags: <blockquote> for quotes, <code> for code, <address> for contact info, <dialog> for dialogs. Everything can be semantic — find the most fitting tag before using a generic one.

📖 Summary

Core semantic tags: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>
<figure> + <figcaption> wrap images/code with captions
<time> marks machine-readable dates; <mark> highlights text
<details> + <summary> create pure-HTML collapsible panels
Semantics improve SEO, accessibility, and code readability
<div> and <span> have no semantics; only use them when no suitable tag exists

📝 Exercises

Build a Skeleton: Use semantic tags to build a blog page structure and fill in some placeholder text.
Compare the Experience: Use a screen reader to navigate a pure <div> page and a semantic page side by side, and observe the difference.

← Previous: HTML Styles Next: HTML Layout →