HTML Semantic Elements
header, nav, main, article, section

HTML Semantic Elements: Adding Meaning to Structure

HTML isn’t just about how things look — it’s also about what they mean. Semantic elements give structure real meaning, helping browsers, developers, and screen readers understand content at a deeper level.

What Are Semantic Elements?

Semantic elements clearly describe their purpose. Unlike generic containers like <div> and <span>, semantic tags like <header>, <article>, and <footer> make the page easier to interpret, index, and style.

<header>: Introductory Content

Used for page or section headers, usually containing navigation, branding, or headlines.

<header>
  <h1>Fruit Times</h1>
  <nav>
    <a href="#apple">Apple</a>
    <a href="#banana">Banana</a>
  </nav>
</header>

Fruit Times  
[ Apple | Banana ]

<footer>: Closing Content

Typically placed at the end of a page or section with copyright, contact links, or summaries.

<footer>
  <p>© 2025 Fruit World. All rights reserved.</p>
</footer>

<nav>: Site or Page Navigation

Wraps the set of navigational links.

<nav>
  <ul>
    <li><a href="#apple">Apple</a></li>
    <li><a href="#banana">Banana</a></li>
  </ul>
</nav>

<main>: The Primary Content

Holds the central topic of the document, excluding headers, footers, sidebars.

<main>
  <h2>Fruit of the Day: Cherry</h2>
  <p>Cherries are small, round, and sweet.</p>
</main>

<article>: Standalone Content

Perfect for blog posts, news stories, or user comments — content that can stand alone.

<article>
  <h3>Banana Benefits</h3>
  <p>Bananas are rich in potassium and energy.</p>
</article>

<section>: Thematic Grouping

Represents a group of related content — such as a group of items or a specific topic section.

<section>
  <h3>Citrus Fruits</h3>
  <p>Includes lemon, orange, and lime.</p>
</section>

<aside>: Tangential or Sidebar Content

For notes, related links, or advertisements that sit outside the main narrative.

<aside>
  <h4>Did You Know?</h4>
  <p>Apples float because they’re 25% air!</p>
</aside>

<figure> and <figcaption>: Image with Caption

Use these to group illustrations, charts, or photos with relevant text.

<figure>
  <img src="banana.jpg" alt="A ripe banana">
  <figcaption>A perfectly ripe banana.</figcaption>
</figure>

<time>: Human and Machine-Readable Date/Time

Encodes a specific date or time, improving readability for search engines and devices.

<p>Harvest begins on <time datetime="2025-08-01">August 1st</time>.</p>

<mark>: Highlighted Text

Use to emphasize or highlight a keyword or searched term within content.

<p>The most searched fruit today is <mark>apple</mark>.</p>

Putting It All Together: Semantic Page Structure

<header>
  <h1>Fruit Blog</h1>
  <nav>
    <a href="#apple">Apple</a> | <a href="#banana">Banana</a>
  </nav>
</header>

<main>

  <section>
    <article>
      <h2>All About Cherries</h2>
      <p>Cherries are tasty and full of antioxidants.</p>
    </article>

    <aside>
      <h4>Did You Know?</h4>
      <p>One cherry tree can produce 7,000 cherries.</p>
    </aside>
  </section>

  <figure>
    <img src="cherry.jpg" alt="Fresh cherries">
    <figcaption>A basket of freshly picked cherries.</figcaption>
  </figure>

</main>

<footer>
  <p>Posted on <time datetime="2025-05-24">May 24, 2025</time></p>
</footer>

Benefits of Semantic HTML

• Improves SEO: Search engines better understand your content.
• Accessibility: Screen readers interpret pages more accurately.
• Readability: Developers and collaborators can quickly scan and understand layout.

Summary

Semantic HTML is about structure with purpose. You've now learned how to:

• Use key semantic tags like header, article, section, main, and more
• Make content clearer to users, search engines, and assistive tech
• Build web pages that are accessible, maintainable, and meaningful

What’s Next?

Up next: We dive into **ARIA roles and accessibility enhancements** — extending semantics even further for inclusive design.