⬅ Previous Next ➡

17. HTML5 Semantic Elements

HTML5 Semantic Elements
  • Semantic Elements: A semantic element clearly describes its meaning to both the browser and the developer.
    • Non-semantic: <div> and <span> (Tells us nothing about its content).
    • Semantic: <header>, <footer>, <article> (Clearly defines its content).
  • Why use them?:
    • SEO (Search Engine Optimization): Google understands which part of your page is the main content and which is the footer.
    • Accessibility: Screen readers for the visually impaired can navigate the page much easier.
    • Readability: Makes the code much easier for developers to organize and maintain.
  • Key HTML5 Semantic Tags:
    • <header>: Container for introductory content or navigation links.
    • <nav>: Defines a set of navigation links (menu).
    • <main>: Specifies the main, unique content of the document.
    • <section>: Defines a thematic grouping of content (like chapters).
    • <article>: Defines independent, self-contained content (like a blog post or news story).
    • <aside>: Defines content "aside" from the main content (like a sidebar).
    • <footer>: Defines a footer for a document or section (copyright, contact info).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Semantic Page Layout (HTML5)</title>
</head>

<body>

<!-- The Header -->
<header>
  <h1>SSWebTechIO Tech Blog</h1>

  <nav>
    <ul>
      <li><a href="https://sswebtechio.com">Home</a></li>
      <li><a href="https://quitexams.com">Quiz Practice (QuiteXams)</a></li>
      <li><a href="https://www.sswebtechio.com/typing/typing.php">Typing Test</a></li>
    </ul>
  </nav>
</header>

<!-- The Main Content -->
<main>

  <section>
    <h2>Latest Posts</h2>

    <article>
      <h3>Understanding HTML5 Semantic Tags</h3>
      <p>Semantic tags describe the meaning of content, like header, nav, main, section, article, aside, and footer.</p>
    </article>

    <article>
      <h3>Why Use Semantic Layout?</h3>
      <p>It improves readability, SEO, and helps screen readers understand the page structure.</p>
    </article>

  </section>

  <!-- Sidebar Content -->
  <aside>
    <h4>About Author</h4>
    <p>Written by SSWebTechIO / Meher InfoTech.</p>

    <h4>Quick Links</h4>
    <ul>
      <li><a href="https://sswebtechio.com">SSWebTechIO Website</a></li>
      <li><a href="https://quitexams.com">QuiteXams</a></li>
    </ul>
  </aside>

</main>

<!-- The Footer -->
<footer>
  <p>&copy; 2026 SSWebTechIO. All rights reserved.</p>
</footer>

</body>
</html>
⬅ Previous Next ➡