Core HTML5 Semantic Elements and Their Uses

Beginner

🧱 Semantic Elements in HTML5

Semantic HTML5 elements provide meaningful structure to web pages, improving:

  • ♿ Accessibility
  • 🔍 SEO
  • 🧭 Code clarity and maintainability

🏷️ Key Semantic Tags

  • <header>: Defines introductory content or navigation links
  • <nav>: Contains site or section navigation menus
  • <section>: Represents a standalone thematic section of a document
  • <article>: Encapsulates a self-contained content block (e.g., blog post)
  • <aside>: Holds tangential or supplementary content like sidebars
  • <footer>: Defines the footer for a section or entire page

📄 Example: Semantic Page Structure

<header>
  <h1>My Blog</h1>
</header>
<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</nav>
<section>
  <article>
    <h2>Latest Post</h2>
    <p>This is the content of the latest post.</p>
  </article>
</section>
<footer>
  <p>&copy; 2024 My Blog</p>
</footer>

✅ Using semantic tags enhances the structure and readability of your HTML, while making content more accessible to both users and search engines.