HTML <section> टैग

HTML <section> टैग क्या है?

HTML में <section> टैग एक सिमेंटिक एलिमेंट है जो दस्तावेज़ में एक सामान्य खंड (section) को परिभाषित करता है, जैसे अध्याय, हेडर, फुटर, या कोई अन्य विषयगत समूह। यह सामग्री को तार्किक रूप से व्यवस्थित करने में मदद करता है।

प्रत्येक <section> में आमतौर पर एक शीर्षक (<h1>-<h6>) होता है जो उस खंड का विषय बताता है।

उदाहरण

नीचे एक प्रोफाइल पेज है जहां शैक्षिक योग्यता और कार्य अनुभव को अलग-अलग सेक्शन में व्यवस्थित किया गया है:

<!DOCTYPE html>
<html>
<body>
<h1>Profile</h1>
<h2>Educational Qualification</h2>
<section>
  <h2>Graduation</h2>
  <select>
    <option value="bca">BCA</option>
    <option value="bcom">B.COM</option>
    <option value="btech">B.TECH</option>
  </select>
</section>
<section>
  <h2>Postgraduation</h2>
  <select>
    <option value="mca">MCA</option>
    <option value="mcom">M.COM</option>
    <option value="mtech">M.TECH</option>
    <option value="msc">M.Sc</option>
  </select>
</section>
<section>
  <p>Worked at ABC Corporation from July 2015 - May 2019 as a Technical Manager.</p>
</section>
</body>
</html>

आउटपुट

सामग्री तीन अलग-अलग सेक्शन में व्यवस्थित दिखाई देगी:

कोड विश्लेषण

हमने <select> टैग के साथ अलग-अलग सेक्शन सेट किए हैं। पहला सेक्शन है:

<section>
  <h2>Graduation</h2>
  <select>
    <option value="bca">BCA</option>
    <option value="bcom">B.COM</option>
    <option value="btech">B.TECH</option>
  </select>
</section>

बाकी दो सेक्शन निम्न हैं:

<section>
  <h2>Postgraduation</h2>
  <select>
    <option value="mca">MCA</option>
    <option value="mcom">M.COM</option>
    <option value="mtech">M.TECH</option>
    <option value="msc">M.Sc</option>
  </select>
</section>
<section>
  <p>Worked at ABC Corporation from July 2015 - May 2019 as a Technical Manager.</p>
</section>

<section> बनाम <div> बनाम <article>

सर्वोत्तम अभ्यास

• प्रत्येक <section> में एक शीर्षक (<h1>-<h6>) शामिल करें।
• केवल स्टाइलिंग के लिए <section> का उपयोग न करें; इसके बजाय <div> उपयोग करें।
• नेस्टेड सेक्शन में उचित शीर्षक पदानुक्रम बनाए रखें।