What is Semantic HTML?

Semantic HTML is not just a coding style, it is a powerful tool for SEO and accessibility. By using semantic tags, your website becomes more structured, user-friendly, and future-proof.

Semantic HTML means using tags that have a meaningful name and purpose. Unlike <div> or <span> (which do not tell search engines or screen readers what the content represents), semantic tags clearly describe the role of the content. This helps search engines understand your page better, improves accessibility for screen readers, and makes your code cleaner and easier to maintain.

Example:

<header> = page or section header
<article> = independent article
<footer> = bottom part of a page

HTML5 Semantic

Importance of Semantic HTML

Improves SEO (Search Engine Optimization)

Search engines like Google understand semantic tags better, so your content gets indexed correctly and ranks higher.

Example: <article> signals that the content is a complete blog post or news story.

Enhances Accessibility

Screen readers (used by visually impaired users) can read semantic tags to explain page layout.

Example: <nav> is announced as "Navigation menu."

Better Code Readability

Developers can understand code structure easily without extra comments.

Future-proof & Standardized

HTML5 encourages semantic markup, making websites more modern and compatible.

Example :

<header>
  <h1>My Website</h1>
</header>

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<main>
  <article>
    <h2>Latest Blog Post</h2>
    <p>This is a self-contained article about Semantic HTML.</p>
  </article>
</main>

<footer>
  <p>&copy; 2025 My Website</p>
</footer>

Output :