HTML Full Course [Day 8] [Hindi] 💻 | Convert Basic HTML Code to a Semantic HTML5 🚀 | Mohit Decodes

HTML Tutorial – Part 8: Convert Basic HTML to Semantic HTML5

Welcome to Day 8 of the HTML Full Course [Hindi] by Mohit Decodes! In this lesson, you will learn how to transform traditional HTML code into clean, meaningful, and modern Semantic HTML5.

🔍 What is Semantic HTML5?

Semantic HTML5 uses tags that describe the purpose of content clearly, improving:

  1. Code readability and maintainability
  2. SEO (Search Engine Optimization)
  3. Accessibility for screen readers and assistive technologies

⚙️ Common Semantic HTML5 Tags & Their Uses:

TagPurpose
<header>Page or section header
<nav>Navigation links
<main>Main content of the page
<section>Thematic grouping of content
<article>Independent content (e.g., blog posts)
<aside>Sidebar or related content
<footer>Footer of the page or section


🔄 Converting Basic HTML to Semantic HTML5:

Before (Basic HTML):

html
CopyEdit
<div id="header">
<h1>Welcome to Mohit Decodes</h1>
</div>
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<div id="content">
<p>This is a paragraph.</p>
</div>
<div id="footer">
<p>© 2025 Mohit Decodes</p>
</div>

After (Semantic HTML5):

html
CopyEdit
<header>
<h1>Welcome to Mohit Decodes</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
<main>
<p>This is a paragraph.</p>
</main>
<footer>
<p>© 2025 Mohit Decodes</p>
</footer>

🎯 Why Use Semantic HTML5?

  1. Improves SEO ranking
  2. Makes your code easier to understand for developers
  3. Enhances accessibility for users with disabilities
  4. Enables better browser support and future-proofing