What is Semantic HTML?
Instead of using generic <div> for everything, use tags that DESCRIBE what the content is.
The problem (old way):
1<div class="header">Header</div>
2<div class="nav">Navigation</div>
3<div class="main">Content</div>
4<div class="footer">Footer</div>Browser doesn't know what these are. It just sees boxes.
The solution (semantic way):
1<header>Header</header>
2<nav>Navigation</nav>
3<main>Content</main>
4<footer>Footer</footer>Browser KNOWS these are header, navigation, main content, footer.
Complete semantic layout:
1<body>
2 <!-- Header: top section with logo and menu -->
3 <header>
4 <h1>My Website</h1>
5 <nav>
6 <a href="/">Home</a>
7 <a href="/about">About</a>
8 <a href="/contact">Contact</a>
9 </nav>
10 </header>
11
12 <!-- Main: primary content of the page (only ONE per page) -->
13 <main>
14 <!-- Article: self-contained content like blog post -->
15 <article>
16 <h2>Blog Post Title</h2>
17 <p>Article content goes here...</p>
18
19 <!-- Section: group of related content -->
20 <section>
21 <h3>Related Topics</h3>
22 <p>More information...</p>
23 </section>
24 </article>
25 </main>
26
27 <!-- Aside: sidebar content (ads, related links, author bio) -->
28 <aside>
29 <h3>About the Author</h3>
30 <p>Deepak is a web developer and teacher.</p>
31 </aside>
32
33 <!-- Footer: bottom section with copyright, contact info -->
34 <footer>
35 <p>© 2026 My Website. All rights reserved.</p>
36 <p><a href="mailto:info@example.com">Contact Us</a></p>
37 </footer>
38</body>Why semantic HTML is important:
Benefit | Explanation |
|---|---|
SEO | Google understands your page structure better = higher ranking |
Accessibility | Screen readers can navigate easily for blind users |
Clean code | Easier to read, maintain, and debug |
Future proof | Works with all modern browsers |
SEO TIP: Semantic tags help Google understand your page structure. Always use them instead of
<div>!