P1.5: Semantic HTML5 & SEO

Semantic HTML means using HTML tags that describe their meaning to both the developer, the browser, and search engines like Google.

1. Why Semantics Matter

Without semantic HTML, browsers treat everything as plain text blocks inside generic <div> tags. Proper semantics are crucial for:

1. Search Engine Optimization (SEO): Google crawls tags like <article>, <header>, and <h1> to index and rank webpages.
2. Accessibility (a11y): Screen readers use semantic tags to help visually impaired users navigate.

Kent C. DoddsView Profile 🔗

Real-World Developer Case Study

9 Years Exp

RoleJavaScript Engineer & Educator

Salary₹60 Lakhs/yr equivalent

CompanyRemix / Epic Web

Core Tech Stack

HTML5 SemanticsRemix RouterSEO AuditingARIA Accessibility

“Always remember: a screen reader reads the HTML DOM, not your styled CSS colors. Focus on structural hierarchy. Semantic tags are the foundation of professional web interfaces.”

2. Semantic Document Structures

Instead of wrapping sections in <div>, use HTML5 semantic tags:

• <header>: Site headers and navigation menus.
• <nav>: Set of navigation links.
• <main>: The dominant, unique content of the page (only one per page).
• <article>: Self-contained composition (blog post, news article).
• <section>: Thematic grouping of content.
• <aside>: Sidebar layout for ads, bio, or links.
• <footer>: Bottom disclaimer, copyright, and links.

<!-- Example of a Semantic page skeleton -->
<header>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>
<main>
  <article>
    <h1>HTML5 Semantics</h1>
    <p>This is a semantic article.</p>
  </article>
</main>
<footer>
  <p>&copy; 2026 Nextsem Online.</p>
</footer>