Semantic Tags in HTML

1.What is mean by semantic tags in html?

Semantic tags are HTML tags that tell both the browser and the developer what type of content they contain.

Example

❌ Non-semantic:

<div>This is a header</div>

✅ Semantic:

<header>This is a header</header>

2.Why semantic tags is used in html

Semantic tags are used in HTML to define the meaning and structure of web content, improving readability, SEO, and accessibility.

i)Better understanding of content

Example: tells it is a header, tells it is footer

ii)Improves SEO (Search Engine Optimization)

iii)Better accessibility

iv)Clean and readable code

v)Standard and professional layout

Example

❌ Without semantic tags:

<div id="header">Header</div>
<div id="nav">Menu</div>

✅ With semantic tags:

<header>Header</header>
<nav>Menu</nav>

3.Various semantic tags in html

🔹 Page Structure Semantic Tags

i) <header>

Represents top/intro content

Logo, heading, navigation

ii) <nav>

Navigation links

iii) <main>

Main content of the webpage (only one per page)

iv) <section>

Groups related content

v) <article>

Independent, self-contained content (blogs, news)

vi) <aside>

Side or related content

vii) <footer>

Bottom section (copyright, contact info)

🔹 Content Semantic Tags

i)<figure>

Image, diagram, illustration

ii) <figcaption>

Caption for figure

iii) <time>

Represents date or time

<time datetime="2026-01-21">Jan 21, 2026</time>

🔹 Text-Level Semantic Tags

i) <mark>

Highlights text

ii) <strong>

Important text (strong importance)

iii) <em>

Emphasized text

iv) <address>

Contact information

🔹 Media & Data Semantic Tags

i) <details>

Expandable content

ii) <summary>

Heading for details

<details>
  <summary>More Info</summary>
  Content here
</details>

4.Advantages of semantic tag

i)Better code readability

ii)Improves SEO

iii)Better accessibility

iv)Clear page structure

v)Easy maintenance

5.Disadvantages of semantic tags

i)Limited styling by default

ii)Learning curve for beginners

iii)Overuse or misuse

iv)Browser support issues (older browsers)

v)Not suitable for every situation