What Are Semantic HTML Tags?

Semantic HTML tags clearly describe their meaning in a human- and machine-readable way. They improve accessibility, SEO, and code readability.

<header> Tag

The <header> tag defines the introductory section of a page or a section. It typically contains:

Logo or site identity
Navigation links
Page titles or headlines
Search forms

<header>
  <div class="logo">My Website</div>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<footer> Tag

The <footer> tag represents the footer section of a document or section. It usually contains:

Copyright information
Contact details
Social media links
Secondary navigation
Related documents

<footer>
  <p>&copy; 2025 My Website. All rights reserved.</p>
  <address>
    Contact: <a href="mailto:contact@example.com">contact@example.com</a>
  </address>
  <nav class="footer-nav">
    <a href="#">Privacy Policy</a> | 
    <a href="#">Terms of Service</a>
  </nav>
</footer>

<main> Tag

The <main> tag holds the primary content of a page. It should be unique and not repeat across pages.

There should be only one <main> per page
Should not contain repeated content like headers/footers
Helps screen readers identify the main content area

<main>
  <h1>Welcome to Our Website</h1>
  <article>
    <h2>Latest News</h2>
    <p>This is the main content area with the most important information.</p>
  </article>
  <section>
    <h2>Featured Products</h2>
    <!-- Product listings -->
  </section>
</main>

<article> Tag

The <article> tag defines independent, self-contained content that could be distributed separately.

Blog posts
News articles
Forum posts
Product cards
User comments

<article>
  <header>
    <h2>The Future of Web Development</h2>
    <p>Published on <time datetime="2025-05-15">May 15, 2025</time> by Jane Doe</p>
  </header>
  <p>Full article content goes here...</p>
  <footer>
    <p>Category: Technology</p>
  </footer>
</article>

Additional Semantic Tags

Tag	Purpose	Example Use
`<section>`	Thematic grouping of content	Chapter, tabbed content, numbered sections
`<nav>`	Navigation links	Main menu, table of contents, pagination
`<aside>`	Tangentially related content	Sidebars, pull quotes, advertising
`<figure>`	Self-contained flow content	Images, diagrams, code snippets with captions
`<time>`	Machine-readable date/time	Event dates, publication times

Benefits of Using Semantic Tags

Improved Accessibility: Screen readers can better interpret and navigate content
Enhanced SEO: Search engines understand content structure and importance
Cleaner Code: More readable and maintainable HTML
Future Compatibility: Standards-compliant code works better long-term
Better Styling: Provides natural hooks for CSS without excessive classes
Device Adaptation: Helps browsers optimize content for different devices

Best Practices

Use semantic elements for their intended purpose
Combine semantic tags for better structure (e.g., <article> within <main>)
Don't use semantic tags just for styling - use CSS for presentation
Maintain proper nesting hierarchy
Test with screen readers to ensure accessibility
Use W3C validator to check semantic correctness

Complete Semantic Page Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Semantic HTML Example</title>
</head>
<body>
  <header>
    <h1>Website Title</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h2>Article Title</h2>
      <p>Article content...</p>
      <section>
        <h3>Comments</h3>
        <article class="comment">
          <p>First comment...</p>
        </article>
      </section>
    </article>

    <aside>
      <h2>Related Links</h2>
      <ul>
        <li><a href="#">Related Article 1</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2025 Company Name</p>
  </footer>
</body>
</html>