मैं <aside> अंदर <section> टैग का उपयोग करें?

Question

इस तरह एक मार्कअप होने:

<aside> 
    <div class="widget"> 
     <h2>Latest news</h2> 
     <ul>...</ul> 
     <a>more news</a> 
    </div> 
    <div class="widget"> 
     <h2>Choose site theme</h2> 
     <input type="select" /> 
    </div> 
    <div class="widget"> 
     <h2>Newsletter subscription</h2> 
     <form>...</form> 
    </div> 
    <div class="widget"> 
     <h2>Related articles</h2> 
     <ul>...</ul> 
    </div> 
</aside> 

कौन-सा टैग यहाँ और अधिक उपयुक्त है: <div> या <section>?
अनुभाग केवल <article> टैग के अंदर इस्तेमाल किया जा करने की अपेक्षा की है और कभी नहीं अंदर <aside> है?

Answer 1

एचटीएमएल 5 कल्पना एक aside तत्व के अंदर section तत्व का उपयोग करने से निषेध नहीं करता। aside तत्व के अंदर प्रवाह सामग्री के लिए अनुमति दी है, और कहा कि section तत्व शामिल हैं।

हालांकि, div तत्व अब भी है, एचटीएमएल 5 में, "अंतिम उपाय" का सेक्शन तत्व माना जाता है, इस संदर्भ में section का उपयोग करके तत्व के इरादे से चला जाता है। Spec से हम देखते हैं:

नोट: अनुभाग तत्व एक सामान्य कंटेनर तत्व नहीं है। जब स्टाइल उद्देश्यों के लिए या स्क्रिप्टिंग की सुविधा के लिए किसी तत्व की आवश्यकता होती है, तो लेखकों को इसके बजाय div तत्व का उपयोग करने के लिए प्रोत्साहित किया जाता है। एक सामान्य नियम यह है कि अनुभाग तत्व केवल तभी उपयुक्त होता है जब तत्व की सामग्री दस्तावेज़ की रूपरेखा में स्पष्ट रूप से सूचीबद्ध हो।

अब, थोड़ा एक की "वर्गों" एक तरफ निश्चित रूप से नहीं कुछ है कि पूरे दस्तावेज की रूपरेखा से संबंधित हैं, इसलिए अपने प्रश्न का संक्षिप्त उत्तर div उपयोग करने के लिए है। वैकल्पिक रूप से, क्योंकि आपका एक तरफ दिखता है जैसे इसमें चार "आइटम" हैं, आप ul पर चार li एस के साथ विचार कर सकते हैं और फिर नियम aside ul li के साथ शैली बना सकते हैं।

Answer 2

हाँ, आप section वहाँ का उपयोग कर सकते हैं।

आप शीर्षकों का उपयोग करते हैं, you have "implicit" sections anyway। section का उपयोग करके आप उन्हें स्पष्ट है, जो encouraged है बना सकते हैं (पिछले उद्धरण देखें)।

ये स्निपेट रहे शब्दार्थ बराबर (वे एक ही outline है):

<!-- using headings + div elements --> 
<aside class="example-1"> 
    <h1>Heading for this aside</h1> 
    <div> 
    <h2>Latest news</h2> 
    <p>…</p> 
    </div> 
    <div> 
    <h2>Choose site theme</h2> 
    <p>…</p> 
    </div> 
</aside> 

<!-- using headings only --> 
<aside class="example-2"> 
    <h1>Heading for this aside</h1> 
    <h2>Latest news</h2> 
    <p>…</p> 
    <h2>Choose site theme</h2> 
    <p>…</p> 
</aside> 

<!-- using section elements --> 
<aside class="example-3"> 
    <h1>Heading for this aside</h1> 
    <section> 
    <h2>Latest news</h2> 
    <p>…</p> 
    </section> 
    <section> 
    <h2>Choose site theme</h2> 
    <p>…</p> 
    </section> 
</aside> 

नोट: यदि आप aside के लिए शीर्षक नहीं प्रदान करते हैं , दस्तावेज़ रूपरेखा अलग होगा जब section प्रयोग किया जाता है। जो एक बुरी चीज नहीं है; मुझे लगता है कि रूपरेखा वह है जिसे आप वैसे भी चाहते हैं। आप gsnedders 'online outliner के साथ खेल सकते हैं।

बेशक

आप भी अन्य सेक्शनिंग बजाय तत्वों section की aside अंदर (जैसे nav संबंधित पोस्ट की सूची के लिए है कि aside, या article के नेविगेशन के लिए, आदि) हो सकता है।

---

साइड ध्यान दें: आपके मामले में, आप के बजाय कई aside तत्वों का उपयोग सोच सकते हैं। इसका सामान्य उत्तर नहीं दिया जा सकता है, यह सामग्री पर निर्भर करता है, लेकिन अंगूठे का नियम हो सकता है: का उपयोग कई sections/शीर्षकों के साथ करें, यदि इन सभी वर्गों को किसी भी तरह से संबंधित किया गया है (यानी यदि आप एक शीर्षक ढूंढ सकते हैं जो वर्णन करता है इन सभी वर्गों)। यदि नहीं, तो aside का उपयोग करें।

तो अपने उदाहरण दिखाई देगा:

<aside class="widget"> 
    <h2>Latest news</h2> 
    <ul>…</ul> 
    <a>more news</a> 
</aside> 

<aside class="widget"> 
    <h2>Choose site theme</h2> 
    <input type="select" /> 
</aside> 

<aside class="widget"> 
    <h2>Newsletter subscription</h2> 
    <form>…</form> 
</aside> 

<aside class="widget"> 
    <h2>Related articles</h2> 
    <ul>…</ul> 
</aside> 

(और इन के लिए एक कंटेनर div का उपयोग करें, यदि आप एक की जरूरत है।)