HTML5 <section> Tag
Introduction to HTML5 <section> Tag
HTML5 का <section> tag किसी web page या web application के generic sections को represent/define करता है। Section को यँहा पर ऐसे content के group के संदर्भ में use किया गया है जो किसी एक topic से related है।
उदाहरण के लिए किसी website के homepage को कई sections में divide किया जा सकता है। जैसे की एक section company के बारे में पूरी जानकारी represent कर सकता है, दूसरा section contact information को represent कर सकता है, तीसरा section company के द्वारा provide की गयी services को represent कर सकता है और चौथा section copyrights को represent कर सकता है।
सभी sections एक दूसरे से independent होते है और अलग अलग information represent करते है। <section> tag के माध्यम से search engines को आपके page को समझने में आसानी होती है। हर <section> element को heading या child <section> element द्वारा uniquely identify किया जाता है।
Difference between <section> & <div>
<section> element एक container element नहीं है। यदि आपको सिर्फ एक ऐसे container element की जरुरत है जिसमें आप दूसरे elements को डाल सकें और उसे design कर सकें तो इसके लिए आपको <div> element use करना चाहिए।
<div> element की कोई special meaning नहीं होती है। Search engines द्वारा <div> element को skip कर दिया जाता है। क्योंकि <div> element को सिर्फ दूसरे elements को contain करने के लिए use किया जाता है।
हर <section> एक अलग page की तरह होता है जो search engines द्वारा identify किया जाता है। इससे search engines को एक page की बेहतर समझ मिलती है।
Syntax of HTML5 <section> Tag
<section> tag का general syntax निचे दिया जा रहा है।
<section>
//Heading...
//Child section element
</section>
हर <section> element की heading होती है जो ये बताती है की ये section कौनसी information represent कर रहा है। एक <section> element में आप दूसरा child <section> element भी create कर सकते है।
Attributes of HTML5 <section> Tag
<section> tag सभी global attributes जैसे की id, class आदि को support करता है। साथ ही ये element HTML event attributes को भी support करता है।
Example:
निचे
<html>
<body>
<section>
<h1>Best Hindi Tutorials</h1>
<p>Computer Science & IT Tutorials in Hindi</p>
</section>
<section>
<h1>About Us</h1>
<p>Best Hindi Tutorials is a online portal for computer science & IT students in Hindi</p>
</section>
<section>
<h1>Contact Us</h1>
<p>You can always contact us at [email protected]</p>
</section>
<section>
<h1>Services</h1>
<p>We can help you design your website or blog</p>
</section>
<section>
<h1>Copyrights</h1>
<p> Copyrights 2015-17 All rights reserved.</p>
</section>
</body>
</html>
ऊपर दिए गया उदाहरण में 5 sections (Main header, about us, contact us, services, copyrights) create किये गए है। ऐसा करने से search engine robot समझ सकता है की page को 5 parts में divide किया गया है जो अलग अलग information represent कर रहे है। ये उदाहरण निचे दिया गया output generate करता है।
