HTML Semantic Elements

Previous Next

Semantic elements clearly describe their meaning to both the browser and the developer. They improve accessibility, SEO, and code readability.

<header> – introductory content, logo, heading
<nav> – site or section navigation
<main> – the main, unique content of the page
<section> – thematic grouping of content
<article> – independent, self-contained content
<aside> – tangential content (sidebars, callouts)
<footer> – footer for page or section
<figure> & <figcaption> – media and its caption

1) Semantic Page Skeleton


<header>
  <h1>Codingwithsonu</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/html/html-home.php">HTML</a>
  </nav>
</header>

<main>
  <article>
    <h2>Learn HTML Semantics</h2>
    <p>Semantic tags add meaning to your markup...</p>
  </article>

  <aside>
    <p>Related links, ads, or author bio.</p>
  </aside>
</main>

<footer>
  <p>© 2025 Codingwithsonu</p>
</footer>

2) `<section>` vs `<article>`


<!-- A section groups related content under a theme -->
<section aria-labelledby="news-title">
  <h2 id="news-title">Latest News</h2>

  <!-- Articles inside are self-contained entries -->
  <article>
    <h3>HTML5 Updates</h3>
    <p>…content…</p>
  </article>

  <article>
    <h3>CSS Tricks</h3>
    <p>…content…</p>
  </article>
</section>

3) `<figure>` with `<figcaption>`


<figure>
  <img src="../asset/img/sample.jpg" alt="HTML5 logo">
  <figcaption>Figure 1: The HTML5 logo</figcaption>
</figure>

Figure 1: The HTML5 logo

Mini Layout Demo

Site Header

Article Title

This is self-contained content that can stand on its own.

Tips:

Use <main> once per page and avoid nesting it inside other landmarks.
Give sections good headings and use aria-labelledby where useful.
Prefer semantic tags over generic <div>/<span> when they convey meaning.