HTML: HTML Semantics
Last updated: 2026-09-08
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.
1. 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:
▶ Example
▶ Try it Yourself<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.
2. 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.
3. Image/Content Container: <figure> and <figcaption>
<figure> wraps self-contained content like images, code blocks, or charts, while <figcaption> provides a caption for it:
▶ Example
▶ Try it Yourself4. Time and Highlighting: <time> and <mark>
<time> makes dates and times machine-readable, and <mark> highlights search keywords or important text:
▶ Example
▶ Try it Yourself5. Collapsible Content: <details>and <summary>
<details> creates an expandable/collapsible interactive widget, and <summary> defines its visible heading. Pure HTML, no JavaScript needed:
▶ Example
▶ Try it Yourself<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.
❓ FAQ
<header> tells search engines "this is the page header," <main> indicates "this is core content," <article> means "this is a standalone article." Search engines give higher weight to content inside <main> and <article>. Additionally, semantic tags help search engines generate more accurate result snippets (displaying article titles, authors, publish dates).<section> and <article>?<article> is independent, complete content that can be published or reused on its own (like blog posts, news articles, reviews). <section> is a thematic grouping of content, typically with a heading, but isn't standalone (like chapters, tab panels, product features). The test: if the content block makes sense on its own, use <article>; if it needs context to be understood, use <section>.<div>?<div> only when no suitable semantic tag exists. Common scenarios: 1) Pure styling containers (wrapping elements for Flexbox layout); 2) JavaScript hooks (modals, popups); 3) Groupings with no semantic meaning. Rule: first look for semantic tags (header/nav/main/section/article/aside/footer), fall back to div when none fit.<details> and <summary> browser compatibility?<details> and <summary> are HTML5 native collapsible panels, supported by all modern browsers (Chrome, Firefox, Safari, Edge) — excellent compatibility. Benefits: collapsible without JavaScript, supports keyboard navigation and screen readers. Limitations: limited styling customization (like arrow icons), complex interactions still need JavaScript. IE doesn't support it, but IE is discontinued — no need to worry.📖 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.
