Semantic Tags – HTML & CSS - Mastery

🏷️ Semantic Tags in HTML

Semantic tags make your HTML more meaningful and easier to understand — both for developers and search engines.

✅ Why Use Semantic Tags?

They describe the purpose of content.
Make code cleaner and easier to manage.
Help with SEO and accessibility.

🏷️ Common Semantic Tags:

<header>

Usually placed at the top of a page or section.
Contains titles, logos, navigation links, etc.

<header>
  <h1>My Blog</h1>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
  </nav>
</header>

<footer>

Goes at the bottom of a page.
Used for copyright info, contact links, etc.

<footer>
  <p>&copy; 2025 My Blog. All rights reserved.</p>
</footer>

<section>

Used to divide a page into logical sections.
Think of it like a chapter in a book.

<section>
  <h2>Our Services</h2>
  <p>We offer web design and development services.</p>
</section>

<article>

For self-contained content like blog posts, news, or comments.
Makes sense on its own, even outside the page.

<article>
  <h2>How I Built My First Website</h2>
  <p>It all started with HTML and CSS...</p>
</article>

<nav>

For navigation links like menus, sidebars, or tables of contents.
Helps users navigate different sections or pages.
Often used once at the top or side, but can be used multiple times.

<nav>
  <ul>
     <li><a href="index.html">Home</a></li>
     <li><a href="about.html">About</a></li>
     <li><a href="services.html">Services</a></li>
     <li><a href="contact.html">Contact</a></li>
   </ul>
</nav>

🔍 Bonus Tip:

Semantic tags are especially helpful when working with screen readers and for making your code future-proof!