Semantic HTML5 Elements kya hain?
Semantic elements wo HTML tags hote hain jo apne content ke meaning aur context ko clearly define karte hain. Ye web developers ke liye page ko samajhna aasan banate hain aur search engines ya assistive technologies ke liye bhi useful hote hain.
Kuch Common Semantic Elements aur Unka Use
Element | Description | Use Case |
---|---|---|
<header> |
Page ya section ka header define karta hai | Logo, navigation links, heading etc. |
<nav> |
Navigation ke block ko define karta hai | Menus, table of contents etc. |
<main> |
Page ka main content | Blog post, article, landing page content |
<section> |
Document me ek general section hota hai | Content groups ya thematic grouping |
<article> |
Self-contained independent content | News article, blog post, commentary |
<aside> |
Primary content ke alawa side content | Sidebar, callout boxes |
<footer> |
Page ya section ka footer | Copyright info, contact links |
<figure> |
Self-contained content jaise image, diagram | Photos, illustrations |
<figcaption> |
Figure ka caption provide karta hai | Image ya diagram description |
Simple Semantic HTML5 Structure Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semantic HTML5 Example</title>
</head>
<body>
<header>
<h1>RKTechGame</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Latest Article</h2>
<p>Ye ek semantic article ka udaharan hai.</p>
</article>
<aside>
<h3>Sidebar Content</h3>
<p>Yahan extra information di ja sakti hai.</p>
</aside>
</main>
<footer>
<p>© 2025 RKTechGame</p>
</footer>
</body>
</html>
Semantic Elements ke Fayde
- Code ko zyada readable aur maintainable banate hain.
- Search engines easily content samajh pate hain, jo SEO me madad karta hai.
- Screen readers aur assistive devices ke liye accessibility badhta hai.
- Consistent web standards follow karna asaan hota hai.