HTML Semantic Tags

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

They tell what the content is, not just how it looks.

Simple Meaning

• Semantic = Meaningful
• Semantic tags make HTML easy to read, understand, and SEO-friendly

Human Body Example

Common HTML Semantic Tags

1. <header>

Used for top section (logo, title)

<header>
  <h1>My Website</h1>
</header>

2. <nav>

Used for navigation links

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
</nav>

3. <main>

Main content of the page

<main>
  <p>Main content here</p>
</main>

4. <section>

Used to divide content into parts

<section>
  <h2>Courses</h2>
</section>

5. <article>

Independent content (blog, post)

<article>
  <h2>Blog Post</h2>
</article>

6. <aside>

Side content (ads, sidebar)

<aside>
  Related Links
</aside>

7. <footer>

Bottom section

<footer>
  © 2026 Learn Syntax
</footer>

Semantic vs Non-Semantic

Why Use Semantic Tags?

• Better SEO
• Easy to read code
• Screen-reader friendly
• Professional structure