Hello Dev Community! 👋
It's Day 3 of my journey to master full-stack development (MERN stack). After learning forms and fixing my file paths yesterday, today was all about making my HTML code smart, accessible, and clean.
Up until yesterday, I was using generic blocks like <div> for everything. Today, I unlocked the true power of Semantic HTML.
🧠 Key Learnings From Day 3
1. What is Semantic HTML?
Semantic means "relating to meaning." Semantic tags tell both the browser and search engines (SEO) exactly what kind of content is inside them, instead of just being a blind container.
Here are the tags I practiced today:
-
<nav>: Specifically for navigation links. -
<header>: For the introductory content or banner at the top. -
<section>: To group related content together (like an "About" or "Contact" area). -
<footer>: For the bottom copyright and link layout.
2. Building a Structured Navigation Bar
Instead of randomly putting links (<a>), I learned the professional way to structure a header and navbar using lists:
html
<header>
<div class="logo">MyBrand</div>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<footer>Footer</footer>
