Skip to main content

Semantic Tags in HTML5

Before HTML5, web developers structured and designed almost the entire page using a single element: <div>.

<div>s are generic and lack inherent meaning; they tell the browser nothing, nor search engines, nor screen readers about what they contain (whether it's the main menu, the content of an article, or the footer).

Semantic HTML refers to the use of tags that clearly describe their meaning (their semantics) to the machine reading the document.

Benefits of Semantics​

  1. Accessibility: Screen readers for visually impaired users can use these tags as "signposts" to quickly navigate the web page.
  2. SEO (Search Engine Optimization): Search engines give more importance to content within tags like <h1> or <article> than to content found in a common <div>, which helps index properly and prioritize your content.
  3. Clean and Maintainable Code: It makes the code much easier for developers to read, understand, and maintain.

Common Structural Semantic Tags​

  • <header>: Represents a group of introductory content or central navigational tools for a page or section. (Usually contains the logo, title, and often the navigation bar).
  • <nav>: Represents a section that contains important navigation links to the current document or other documents.
  • <main>: Specifies the dominant, primary, or specific content of the page. There should be only one visible <main> element per document.
  • <article>: Represents a self-contained, independent composition in a document. (Like a blog post, a news article, a tweet). It should make sense on its own.
  • <section>: Represents a generic independent section in a document, often (but not always) with its own heading. It is used to group thematically related content.
  • <aside>: Represents a portion of a document whose content is only indirectly related to the document's main content. It is often represented as sidebars containing things like glossaries, banners, or secondary menus.
  • <footer>: Represents the footer for its nearest ancestor section or for the entire document. It typically contains copyright information, authorship, links to privacy policies, etc.

Visual Example of a Semantic Structure​

<body>
  <header>
    <h1>My Personal Blog</h1>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
        <h2>How to learn HTML in 3 days</h2>
        <p>Published: October 12, 2023</p>
        <p>Learning HTML is surprisingly simple...</p>
    </article>
    <article>
        <h2>10 Semantic Tags You Must Know</h2>
        <p>Published: October 15, 2023</p>
        <p>Modern HTML goes beyond divs...</p>
    </article>
  </main>
    
  <aside>
    <h3>Search Categories</h2>
    <ul>
        <li><a href="#">Technology</a></li>
        <li><a href="#">Web Development</a></li>
    </ul>
  </aside>

  <footer>
    <p>&copy; 2023 My Personal Blog. All rights reserved.</p>
  </footer>
</body>