Skip to content

Latest commit

 

History

History
77 lines (51 loc) · 1.97 KB

Readme.md

File metadata and controls

77 lines (51 loc) · 1.97 KB

Episode 17: Semantic vs Non-Semantic Tags

Welcome to Episode 17 of the Learn HTML series! In this episode, we explore the difference between semantic and non-semantic HTML tags — a crucial concept in modern web development.

🧠 Learning Objectives

By the end of this episode, you’ll be able to:

  • Understand what semantic HTML means
  • Identify common semantic and non-semantic tags
  • Know the benefits of using semantic tags for accessibility and SEO

📘 What are Semantic Tags?

Semantic tags clearly describe their meaning to both the browser and the developer.

✅ Examples of Semantic Tags:

  • <header>: Represents introductory content or a group of navigational links.
  • <nav>: Represents a navigation section.
  • <main>: Represents the main content of the document.
  • <section>: Represents a standalone section.
  • <article>: Represents self-contained content like blog posts or articles.
  • <footer>: Represents footer content.

📙 What are Non-Semantic Tags?

Non-semantic tags don’t provide any meaning about their content.

🚫 Examples of Non-Semantic Tags:

  • <div>: Generic container for content.
  • <span>: Generic inline container.

🎯 Why Use Semantic Tags?

  • Accessibility: Screen readers and assistive tech understand your content better.
  • SEO: Search engines can better crawl and index your site.
  • Readability: Makes code more understandable for humans.

🧪 Try It Yourself

<!-- Semantic HTML Example -->
<article>
  <header>
    <h1>Blog Title</h1>
    <p>By Varun</p>
  </header>
  <section>
    <p>This is a blog about HTML tags...</p>
  </section>
  <footer>
    <p>Published on April 2025</p>
  </footer>
</article>

🔗 Next Episode

➡️ Episode 18: Block-level vs Inline Elements

In the next episode, we’ll understand the difference between block-level and inline elements and how they impact layout and styling!