HTML <section> एलिमेंट का उपयोग करना सीखें।
HTML <section> एलिमेंट का उपयोग एक कंटेनर एलिमेंट के रूप में किया जाता है जो दस्तावेज़ में व्यक्तिगत कंटेंट सेक्शन को दर्शाता है।
आपके पास एक वेब पेज हो सकता है जिसमें कई सेक्शन हों जो आपकी कंपनी के बारे में अलग-अलग जानकारी दिखाते हैं। उदाहरण के लिए:
- हीरो सेक्शन
- सेवाएं सेक्शन
- टीम सेक्शन
- प्रायोजक सेक्शन
- संपर्क करें सेक्शन
प्रत्येक सेक्शन को फिर सेल्फ-कंटेन्ड सेक्शन में एनकैप्सुलेट किया जा सकता है, जैसे:
<section> <h2>एक सेक्शन 1</h2> <p>...</p> <img src="" alt="" /> </section> <section> <h2>एक सेक्शन 2</h2> <p>...</p> <img src="" alt="" /> </section> <section> <h2>एक सेक्शन 3</h2> <p>...</p> <img src="" alt="" /> </section><section> एलिमेंट का एक अन्य उपयोग मामला <article> एलिमेंट्स के अंदर है।
मान लें कि आपके पास एक लंबा फॉर्म आर्टिकल है जो कई विषयों पर चर्चा करता है। उस उद्देश्य के लिए आप अपने आर्टिकल को विभिन्न विषय सेक्शन में विभाजित करने के लिए <section> एलिमेंट का उपयोग कर सकते हैं:
<article> <h1>मुख्य पोस्ट शीर्षक</h1> <section> <h2>विषय 1</h2> <p>...</p> <img src="" alt="" /> </section> <section> <h2>विषय 2</h2> <p>...</p> <img src="" alt="" /> </section> <section> <h2>विषय 3</h2> <p>...</p> <img src="" alt="" /> </section> </article>आप <section> एलिमेंट्स के अंदर <article> एलिमेंट्स भी डाल सकते हैं।
मान लें कि आपके फ्रंट पेज पर एक सेक्शन है जहां आप आर्टिकल कार्ड्स की सूची प्रदर्शित करते हैं जिनमें प्रत्येक में व्यक्तिगत पोस्ट का लिंक होता है:
<section> <h2>हमारे नवीनतम ब्लॉग पोस्ट देखें</h2> <article> <a href="/path-to-blog-post-1"> <h3>ब्लॉग पोस्ट 1</h3> </a> </article> <article> <a href="/path-to-blog-post-2"> <h3>ब्लॉग पोस्ट 2</h3> </a> </article> <article> <a href="/path-to-blog-post-3"> <h3>ब्लॉग पोस्ट 3</h3> </a> </article> </section><section> टैग कंटेनर एलिमेंट्स को परिभाषित करने के लिए उपयोग किए जाने वाले कई HTML टैग्स में से एक है। कुछ सबसे अधिक उपयोग किए जाने वाले HTML कंटेनर एलिमेंट्स हैं:
<article> , <main> , <header>, <footer>,<form>, और <div> , (जो एक जेनेरिक टैग है जिसका उपयोग हम तब करते हैं जब अन्य टैग्स में से कोई भी लागू नहीं होता)।
