HTML5 Semantic Elements

What are Semantic Elements?

Semantic elements are HTML elements that clearly describe their meaning and role in a web page. Unlike generic <div> and <span>, which don’t tell you anything about their content, semantic tags tell both the browser and developers what kind of content is inside.

Why Use Semantic Elements?

Better readability: Easier for developers to understand the structure.
Accessibility: Helps screen readers and assistive technologies.
SEO friendly: Search engines understand your page better.

Common HTML5 Semantic Elements

Element	Typical Use
`<header>`	Defines the header for a page or section (often contains logo, nav).
`<nav>`	Contains navigation links.
`<main>`	Main content of the document.
`<section>`	Groups related content (like chapters or thematic groups).
`<article>`	Independent piece of content (blog post, news article).
`<aside>`	Sidebar content (ads, related links).
`<footer>`	Footer of a page or section (contact info, copyright).
`<figure>`	Self-contained content (like images with captions).
`<figcaption>`	Caption for `<figure>`.
`<mark>`	Highlights text.
`<time>`	Represents a date/time.

<!DOCTYPE html>
<html>
<head>
  <title>My Blog</title>
</head>
<body>
  <header>
    <h1>My Blog</h1>
    <nav>
      <a href="/">Home</a> | 
      <a href="/about">About</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>HTML5 is awesome!</h2>
      <p>Semantic elements make your HTML clearer.</p>
    </article>

    <aside>
      <h3>Related Posts</h3>
      <ul>
        <li><a href="#">CSS Basics</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    &copy; 2025 My Blog
  </footer>
</body>
</html>

<header> holds the site title & navigation.
<main> holds the primary content.
<article> is an individual piece (blog post).
<aside> is for extra info (like related posts).
<footer> has copyright.