3. Semantic HTML

Semantic HTML uses tags that clearly describe the meaning of the content to both browsers and developers.

SEO: Better search ranking
♿ Accessibility: Helps Screen Readers
📖 Readability: Cleaner code
TagPurpose
<header>Page/Section Header
<nav>Navigation Menu
<section>Page Section
<article>Independent Content
<footer>Page Footer

Layout Example

<header>
  <h1>My Website</h1>
</header>
<nav>
  <a href="#">Home</a>
</nav>
<section>
  <h2>About Us</h2>
  <p>This is the about section.</p>
</section>
<footer>
  <p>Copyright 2026</p>
</footer>

Visual Map:

Header
Navigation
Main Section
Aside
Footer