What Are Semantic Tags?
Semantic HTML tags clearly describe their meaning to both:
- Browsers
- Developers
- Screen readers / SEO crawlers
Examples:
<header>
<nav>
<section>
<article>
<aside>
<footer>
<main>
<figure>
✔ They tell WHAT the content is
For example:
<header>= top section<article>= independent content<nav>= navigation menu
📌 Benefits of Semantic Tags
✔ 1. Better SEO
Search engines understand the structure → better ranking.
✔ 2. Accessibility
Screen readers can navigate more easily.
✔ 3. Readability
Developers understand page structure quickly.
✔ 4. Maintainability
Larger teams can manage the code more easily.
🧱 Example: Semantic layout
<header>My Blog</header>
<nav>Menu</nav>
<main>
<article>Blog Post</article>
<aside>Related Links</aside>
</main>
<footer>Footer Info</footer>
What Are Non-Semantic Tags?
Non-semantic tags do NOT describe their purpose.
Examples:
<div>
<span>
They simply act as containers for styling or grouping elements.
📌 When Are They Used?
- For layout when no semantic meaning is required
- For wrappers, flex/grid containers
- For inline styling or grouping content
Example:
<div class="card">
<span class="title">Title</span>
</div>
🔥 Quick Comparison Table
| Feature | Semantic Tags | Non-Semantic Tags |
|---|---|---|
| Meaning | Provide meaning | No meaning |
| SEO | Great | Not helpful |
| Accessibility | Excellent | Poor |
| Examples | <header>, <article> |
<div>, <span> |
| Use Case | Structure & content | Layout/design |
🎯 Short Interview Answer
Semantic tags describe the meaning and structure of content (like
<header>,<section>,<article>), helping with SEO, accessibility, and readability.
Non-semantic tags (<div>,<span>) provide no meaning—they are used mainly for styling and layout.
