HTML5 Semantic Tags: ,
Introduction
Purane HTML me developers mostly <div> tags ka use karte the webpage structure banane ke liye. Lekin HTML5 me Semantic Tags introduce kiye gaye jo webpage ka meaning aur structure clearly define karte hain.
Semantic tags SEO, accessibility aur clean coding ke liye bahut important hote hain.
Aaj hum seekhenge:
Semantic tags kya hote hain
<header>tag<footer>tag<article>tag<section>tagSEO aur accessibility benefits
Semantic Tags Kya Hote Hain?
Semantic ka matlab hota hai:
“Meaningful”
Semantic tags browser aur developers ko batate hain ki content kis purpose ke liye hai.
Non-Semantic vs Semantic Tags
Non-Semantic Tag
<div>
Ye content ka meaning nahi batata.
Semantic Tag
<header>
Ye clearly batata hai ki ye webpage ka header section hai.
HTML5 Semantic Structure
<header>
<section>
<article>
<footer>
Semantic Tags Ke Benefits
1. Better SEO
Search engines webpage structure better samajhte hain.
2. Better Accessibility
Screen readers content ko easily identify kar pate hain.
3. Clean Code
Code readable aur organized hota hai.
<header> Tag Kya Hai?
<header> webpage ya section ka top part define karta hai.
Example:
<header>
<h1>My Website</h1>
</header>
Header Me Kya Hota Hai?
Website logo
Navigation menu
Main heading
Intro content
<footer> Tag Kya Hai?
<footer> webpage ka bottom section define karta hai.
Example:
<footer>
<p>Copyright 2026</p>
</footer>
Footer Me Kya Hota Hai?
Copyright info
Contact details
Social links
Policies
<article> Tag Kya Hai?
<article> independent content define karta hai.
Example:
<article>
<h2>HTML Tutorial</h2>
<p>Learn HTML easily.</p>
</article>
Article Ka Use
Blog posts
News articles
Forum posts
Tutorials
<section> Tag Kya Hai?
<section> webpage ka thematic section define karta hai.
Example:
<section>
<h2>About Us</h2>
<p>Welcome to our website.</p>
</section>
Section Ka Use
Different webpage sections
About section
Services section
Contact section
<section> vs <article>
| Feature | <section> | <article> |
|---|---|---|
| Purpose | Group content | Independent content |
| Use | Webpage sections | Standalone content |
Complete Semantic Example
<!DOCTYPE html>
<html>
<head>
<title>Semantic Tags</title>
</head>
<body>
<header>
<h1>My Blog</h1>
</header>
<section>
<h2>About HTML</h2>
<p>HTML is used to create webpages.</p>
</section>
<article>
<h2>HTML5 Tutorial</h2>
<p>Learn semantic tags easily.</p>
</article>
<footer>
<p>Copyright 2026</p>
</footer>
</body>
</html>
SEO Me Semantic Tags Ka Role
1. Search Engine Understanding
Google webpage structure easily samajhta hai.
2. Better Content Ranking
Semantic structure SEO improve kar sakta hai.
3. Rich Search Results
Search engines better indexing kar pate hain.
Accessibility Me Semantic Tags Ka Role
Semantic tags screen readers ko webpage sections identify karne me help karte hain.
Example:
Header identify karna
Navigation identify karna
Main content identify karna
Common Beginner Mistakes
1. Har Jagah <div> Use Karna
Semantic tags available hone par unka use karna better hota hai.
2. <article> Aur <section> Ko Same Samajhna
Article = standalone content
Section = grouped content
3. Footer Ko Sirf Bottom Design Samajhna
Footer informational section hota hai.
Mini Practice Task
Ek webpage banao jisme:
Header
About section
Blog article
Footer
ho.
Practice Code
<header>
<h1>My Website</h1>
</header>
<section>
<h2>About Me</h2>
<p>I am learning HTML5.</p>
</section>
<article>
<h2>Latest Blog</h2>
<p>Semantic tags are useful.</p>
</article>
<footer>
<p>Copyright 2026</p>
</footer>
Interview Questions
Q1. Semantic tags ka main purpose kya hai?
Webpage structure aur meaning define karna.
Q2. Standalone content ke liye kaunsa tag use hota hai?
<article>
Q3. Webpage ke bottom section ke liye kaunsa tag use hota hai?
<footer>
Conclusion
Aaj aapne HTML5 semantic tags ko detail me seekha. Semantic tags modern Web Development ka important part hain aur SEO, accessibility aur clean coding me bahut help karte hain.