Semantic HTML

Analogy categoryAnalogies

Introduction

Semantic HTML means using HTML elements whose tag names describe the meaning of the content they wrap, rather than only its visual appearance. Elements like <header>, <nav>, <main>, <article>, <section>, and <footer> tell the browser, assistive technologies, and search engines what role a piece of content plays on the page, instead of relying on generic <div> and <span> tags with class names for everything.

🏏

Cricket analogy: Like a scoreboard clearly labeling 'Batting', 'Bowling', and 'Fielding' sections instead of just showing unlabeled numbered boxes, semantic tags such as header, nav, and main tell browsers and assistive tech what role each part of the page plays rather than relying on generic divs.

Syntax

html

<body>
  <header>
    <h1>My Blog</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Post Title</h2>
      <p>Post content goes here...</p>
    </article>
    <aside>
      <p>Related links</p>
    </aside>
  </main>

  <footer>
    <p>&copy; 2026 My Blog</p>
  </footer>
</body>

Explanation

Each semantic tag has a specific purpose: <header> identifies introductory content or navigation aids for its nearest ancestor, <nav> marks a block of navigation links, <main> wraps the primary content unique to a page (there should only be one per document), <article> represents a self-contained piece of content that could stand alone (like a blog post), <section> groups related content under a heading, <aside> holds tangentially related content such as sidebars, and <footer> contains closing information like copyright or contact details.

🏏

Cricket analogy: Like a cricket ground having a dedicated pavilion (header) for pre-match announcements, a scoreboard (main) for the actual play everyone came to see, and a media box (aside) for tangential commentary, each semantic tag has one specific job rather than being an interchangeable general-purpose space.

Example

html

<section>
  <h2>Latest Articles</h2>
  <article>
    <h3>Understanding Semantic HTML</h3>
    <p>Semantic elements improve accessibility and SEO...</p>
  </article>
  <article>
    <h3>Why Divs Aren't Always Enough</h3>
    <p>Generic containers lack meaning for screen readers...</p>
  </article>
</section>

Output

Visually, semantic elements render like block-level <div>s by default with no special styling. The real benefit shows up in the accessibility tree: screen readers announce landmarks such as 'navigation', 'main', and 'banner', letting users jump directly to the section they need instead of reading the whole page top to bottom.

🏏

Cricket analogy: Like a plain wooden signboard at a cricket ground that looks unremarkable to a passing fan but is instantly meaningful to a groundskeeper who knows its markings, semantic elements render with no special visual styling yet carry structural meaning that screen readers can announce as landmarks.

Key Takeaways

Semantic elements describe meaning, not just appearance.
Use <main> only once per page for the primary content.
<article> should make sense independently of surrounding content.
Semantic markup improves accessibility, SEO, and code readability.
Prefer semantic tags over generic <div>/<span> whenever a suitable element exists.