HTML5 <main> Tag
Introduction to HTML5 <main> Tag
HTML5 में header, article और footer आदि को specify करने के लिए अलग अलग tags provide किये गए है। इन tags के माध्यम से पता चल जाता है की header content कौनसा और footer content कौनसा है। उसी प्रकार HTML5 आपको document के main content को specify करने के लिए <main> element provide करती है।
<main> tag document में main content को specify करता है। <main> tag के अंदर का content हमेशा unique होना चाहिए। उदाहरण के लिए इस element में आप <article> element के द्वारा article specify कर सकते है। क्योंकि articles अलग अलग webpages में unique होते है।
<main> tag में ऐसा कोई content नहीं होना चाहिए जो repeat होता है। इस tag में आपको निचे दिया गया content नहीं include करना चाहिए।
- <main> tag में आप sidebars include नहीं कर सकते है।
- <main> tag के अंदर आपको navigational links भी नहीं डालनी चाहिए।
- Website header और लोगो भी <main> tag में नहीं डाले जा सकते है।
- Search bar और copyright information भी आपको इस tag में नहीं डालनी चाहिए।
- <aside>, <header>, <footer> और <nav> tags आपको <main> tag में नहीं specify करने चाहिए। साथ ही <main> tag को भी इन tags में define नहीं किया जाना चाहिए।
एक बात ध्यान रखने योग्य है की आपको एक से अधिक <main> element किसी webpage में नहीं define करने चाहिए है। यदि आप ऐसा करने का प्रयास करते है तो w3c validator error throw करता है।
Syntax of HTML5 <main> Tag
<main> tag का general syntax निचे दिया जा रहा है।
<main>
//main content of document such as article
</main>
दूसरे HTML5 tags की तरह ही <main> भी newly introduce किया गया है इसलिए सभी browsers इसे support नहीं करते है और उनके pass पहले से कोई layout नहीं होता है की <main> को कैसे display करना है। ऐसी situation में आपको ये ध्यान रखना चाहिए की <main> हमेशा block level elements की तरह ही display किया जाए। ऐसा आप CSS के द्वारा कर सकते है।
main
{
display:block;
}
Attributes of HTML5 <main> Tag
<main> tag HTML के द्वारा provide किये गए सभी global attributes (class, id आदि) और event attributes (onmouseover, onclick आदि) को support करता है।
Example of HTML5 <main> Tag:
<html>
<head>
<title>HTML5 main Tag Demo</title>
</head>
<body>
<header>
<h1>Best Hindi Tutorials</h1>
<p>Computer Science And IT tutorials in Hindi</p>
</header>
<main>
<article>
<h2>HTML5 main Tag</h2>
<p>This is an article. And I am try to show you the significance of HTML5 main Tag</p>
</article>
</main>
<footer>
Copyrights Best Hindi Tutorials 2015-17
</footer>
</body>
</html>
ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।
