Understanding Semantic Tags

Semantic tags aren’t just about styling—they provide structure, clarity, and meaning. Instead of using non-descriptive <div> elements everywhere, you use semantic tags to help browsers, search engines, and screen readers understand the layout and hierarchy of your content.

• <header> – Contains introductory content or navigation links.
• <nav> – Defines a block of navigational links.
• <main> – Specifies the main content of the document that is unique from other pages.
• <section> – Groups content into thematic sections with a header, often with their own heading.
• <article> – Encapsulates a self-contained composition that can be independently distributed or reused.
• <aside> – Contains content indirectly related to the main content, like sidebars or call-out boxes.
• <footer> – Provides information about its containing section, such as author info or related documents.

By using these elements, your HTML becomes more readable, accessible, and easily maintained.

Detailed Example and Best Practices

Below is a detailed example demonstrating how to structure a basic webpage using semantic HTML elements. Notice the inline comments that explain the purpose of each section.

      <!-- Header Section: Contains the site title and introductory info -->
      <header>
        <h1>My Awesome Website</h1>
        <p>An engaging tagline that describes what the website is about.</p>
      </header>
      
      <!-- Navigation Section: Holds the main navigation links for site-wide navigation -->
      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="services.html">Services</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
      
      <!-- Main Section: Where the primary content is held -->
      <main>
        <article>
          <h2>Understanding Semantic HTML</h2>
          <p>
            Semantic HTML provides clear definition and purpose to your website's structure. It improves SEO and accessibility 
            by making it easier for search engine crawlers and assistive technologies to navigate and interpret your content.
          </p>
        </article>
      
        <!-- Aside Section: Contains supplementary content like tips or related links -->
        <aside>
          <h3>Did You Know?</h3>
          <p>
            Incorporating ARIA roles along with semantic tags can further enhance accessibility, especially for users relying on screen readers.
          </p>
        </aside>
      </main>
      
      <!-- Footer Section: Provides complementary details such as copyright or contact information -->
      <footer>
        <p>© 2025 My Awesome Website. All rights reserved.</p>
      </footer>