HTML5 में "अनुभाग" टैग का सही उपयोग कैसे करें?

Question

मैं HTML5 में एक लेआउट बनाने की कोशिश कर रहा हूं और कई अलग-अलग लेखों को पढ़ने के बाद मैं उलझन में हूं। मैं कुछ इनपुट प्राप्त करने की कोशिश कर रहा हूं कि इसका उपयोग कैसे किया जाना चाहिए।

नीचे वे विविधताएं हैं जिनके साथ मैं आगे और पीछे जा रहा हूं:

1)

<section id="content">
      <h1>Heading</h1>
      <div id="primary">
         Some text goes here...
      </div>
   </section>

क्या आप कंटेनर की तरह कार्य करने के लिए अनुभाग टैग का उपयोग कर सकते हैं?

2)

 <div id="content">
      <h1>Heading</h1>
      <section id="primary">
         <article>
            <h2>Post Title</h2>
            <p>Some text goes here...</p>
         </article>
      </section>
      <section id="primary">
         <article>
            <h2>Post Title</h2>
            <p>Some text goes here...</p>
         </article>
      </section>
   </div>

<section>टैग का उपयोग करने की सही विधि क्या है ?

Comments

तकनीकी रूप से दोनों सही हैं।

— सेठ

मैं कहूंगा कि न तो उदाहरण सही लगता है ... बल्कि केवल डमी टेक्स्ट के साथ कहना कठिन है और कोई वास्तविक संदर्भ नहीं है क्योंकि <section>यह शब्दार्थ टैग है और जेनेरिक आवरण जैसा नहीं है <div>।

— वेस्ले मर्च

आपके पास निश्चित रूप से एक ही आईडी के साथ दो तत्व (अनुभाग या अन्यथा) नहीं होने चाहिए।

— सैम डटन

Answer 1

जवाब वर्तमान कल्पना में है:

अनुभाग तत्व किसी दस्तावेज़ या एप्लिकेशन के सामान्य अनुभाग का प्रतिनिधित्व करता है। इस संदर्भ में एक खंड, सामग्री का एक विषयगत समूहन है, आमतौर पर शीर्षक के साथ।

अनुभागों के उदाहरण अध्याय, टैब किए गए संवाद बॉक्स में विभिन्न टैब किए गए पृष्ठ या थीसिस के गिने हुए अनुभाग होंगे। एक वेब साइट का मुख पृष्ठ एक परिचय, समाचार आइटम और संपर्क जानकारी के लिए खंडों में विभाजित किया जा सकता है।

लेखकों को अनुभाग तत्व के बजाय लेख तत्व का उपयोग करने के लिए प्रोत्साहित किया जाता है जब यह तत्व की सामग्री को सिंडिकेट करने के लिए समझ में आता है ।

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

संदर्भ:

• http://www.w3.org/TR/html5/sections.html#the-section-element
• http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element

और देखें:

• http://html5doctor.com/the-section-element/
• http://www.impressivewebs.com/html5-section/

ऐसा लगता है कि इस तत्व के उद्देश्य के बारे में बहुत भ्रम है, लेकिन एक चीज जिस पर सहमति है वह यह है कि यह सामान्य आवरण नहीं है, जैसे <div>कि। इसका उपयोग सिमेंटिक उद्देश्यों के लिए किया जाना चाहिए, न कि सीएसएस या जावास्क्रिप्ट हुक (हालांकि यह निश्चित रूप से हो सकता है स्टाइल किया जा या "पटकथा")।

एक बेहतर उदाहरण, मेरी समझ से, ऐसा कुछ लग सकता है:

<div id="content">
  <article>
     <h2>How to use the section tag</h2>
     <section id="disclaimer">
         <h3>Disclaimer</h3>
         <p>Don't take my word for it...</p>
     </section>
     <section id="examples">
       <h3>Examples</h3>
       <p>But here's how I would do it...</p>
     </section>
     <section id="closing_notes">
       <h3>Closing Notes</h3>
       <p>Well that was fun. I wonder if the spec will change next week?</p>
     </section>
  </article>
</div>

ध्यान दें कि <div>, पूरी तरह से गैर-शब्दार्थ होने के नाते, दस्तावेज़ में कहीं भी उपयोग किया जा सकता है कि HTML कल्पना इसे अनुमति देता है, लेकिन आवश्यक नहीं है।

Comments

मुझे यकीन नहीं है कि रैपर डिव के लिए क्या है, लेकिन अन्यथा एक अच्छा जवाब।

— अलोहसी

रैपर div ओपी के उदाहरण से था, सिर्फ यह दिखाते हुए कि कैसे एक जेनेरिक रैपर को अन्य तत्वों के साथ उचित रूप से इस्तेमाल किया जा सकता है जो मुझे लगता है, लेकिन निश्चित रूप से एक डिव लगभग कहीं भी काम करेगा।

— वेस्ले मर्क

क्या अनुभाग में शीर्षक (h1, h2, आदि) भी नहीं होना चाहिए?

— जॉय वी।

एक शीर्षक में एक शीर्षक होना चाहिए और आपको इसका उपयोग नहीं करना चाहिए यदि इसमें केवल एक तत्व है।

— कीनाबेल १abel

अच्छा उदाहरण। एक खंड उपयुक्त है यदि तत्वों की सामग्री को दस्तावेज़ की रूपरेखा में सूचीबद्ध किया जाएगा, इसलिए गैर-अर्थिक आवरण विभाग एक खंड नहीं है, लेकिन लेख के भाग अनुभाग हैं। आमतौर पर एक सेक्शन में हेडिंग भी होगी।

— सुपरल्युमरी

Answer 2

HTML3 को संरचित करने के बारे में W3 विकी पृष्ठ में , यह कहता है:

<section>: या तो विभिन्न लेखों को अलग-अलग उद्देश्यों या विषयों में समूह के लिए उपयोग किया जाता है, या किसी एक लेख के विभिन्न अनुभागों को परिभाषित करने के लिए।

और फिर एक छवि प्रदर्शित करता है जिसे मैंने साफ किया:

यह भी जानना महत्वपूर्ण है कि <article>टैग का उपयोग कैसे करें (ऊपर उसी W3 लिंक से):

<article>से संबंधित है <section>, लेकिन स्पष्ट रूप से अलग है। जबकि <section>सामग्री या कार्यक्षमता के अलग-अलग वर्गों को समूहीकृत करने के लिए है, संबंधित सामग्री के <article>अलग-अलग स्टैंडअलोन टुकड़ों को रखने के लिए है, जैसे कि व्यक्तिगत ब्लॉग पोस्ट, वीडियो, चित्र या समाचार आइटम। इसे इस तरह से सोचें - यदि आपके पास सामग्री के कई आइटम हैं, जिनमें से प्रत्येक अपने दम पर पढ़ने के लिए उपयुक्त होगा, और आरएसएस फ़ीड में अलग-अलग वस्तुओं के रूप में सिंडिकेट करने के लिए समझ में आएगा, तो <article>उन्हें चिह्नित करने के लिए उपयुक्त है।

हमारे उदाहरण में, <section id="main">ब्लॉग प्रविष्टियाँ हैं। प्रत्येक ब्लॉग प्रविष्टि एक आरएसएस फ़ीड में एक आइटम के रूप में सिंडिकेटिंग के लिए उपयुक्त होगी, और समझ में आएगी जब अपने दम पर पढ़ा जाएगा, संदर्भ से बाहर, इसलिए <article>उनके लिए एकदम सही है:

<section id="main">
    <article>
      <!-- first blog post -->
    </article>

    <article>
      <!-- second blog post  -->
    </article>

    <article>
      <!-- third blog post -->
    </article>
</section>

सरल हुह? हालांकि जागरूक रहें कि आप लेखों के अंदर भी सेक्शन कर सकते हैं, जहाँ ऐसा करने का कोई मतलब नहीं है। उदाहरण के लिए, यदि इन ब्लॉग पोस्टों में से प्रत्येक में अलग-अलग वर्गों की एक सुसंगत संरचना है, तो आप अपने लेखों के अंदर भी अनुभाग डाल सकते हैं। यह कुछ इस तरह दिख सकता है:

<article>
  <section id="introduction">
  </section>

  <section id="content">
  </section>

  <section id="summary">
  </section>
</article>

Comments

निश्चित रूप से आप <main>इसके बजाय एक-प्रति-दस्तावेज़ टैग का उपयोग करेंगे <section id="main"?

— डेव एवरिट

मैं सहमत हूं, का उपयोग <main>करना आदर्श होगा।

— जस्टिन

Answer 3

मेरी समझ यह है कि अनुभाग एक शीर्षक के साथ एक अनुभाग रखता है जो पृष्ठ के "प्रवाह" का एक महत्वपूर्ण हिस्सा है (एक तरफ नहीं)। अनुभाग अध्यायों, दस्तावेजों के क्रमांकित भागों और इतने पर होंगे।

ARTICLE सिंडिकेटेड सामग्री के लिए है - जैसे पोस्ट, समाचार कहानियां आदि। ARTICLE और SECTION पूरी तरह से अलग हैं - आपके पास एक के बिना एक हो सकता है क्योंकि वे बहुत अलग उपयोग के मामले हैं।

खंड के बारे में एक और बात यह है कि यदि आपके पृष्ठ में केवल एक खंड है तो आपको इसका उपयोग नहीं करना चाहिए। साथ ही, प्रत्येक सेक्शन में एक हेडिंग (H1-6, HGROUP, HEADING) होनी चाहिए। शीर्षकों को अनुभाग के साथ "स्कोप" किया जाता है, इसलिए यदि आप मुख्य पृष्ठ में एक एच 1 का उपयोग करते हैं (अनुभाग के बाहर) और फिर अनुभाग के अंदर एक एच 1, बाद को एच 2 के रूप में माना जाएगा।

कल्पना में उदाहरणलेखन के समय बहुत अच्छे हैं।

तो आपके पहले उदाहरण में सही होगा यदि आपके पास सामग्री के कई खंड हैं जिन्हें ARTICLEs के रूप में वर्णित नहीं किया जा सकता है। (एक मामूली बात के साथ कि आपको #primary DIV की आवश्यकता नहीं होगी, जब तक आप इसे स्टाइल हुक के लिए नहीं चाहते - पी टैग बेहतर होगा)।

दूसरा उदाहरण सही होगा यदि आपने सभी अनुभाग टैग हटा दिए - उस दस्तावेज़ का डेटा लेख, पोस्ट या ऐसा कुछ होगा।

अनुभागों को कंटेनरों के रूप में उपयोग नहीं किया जाना चाहिए - DIV अभी भी उस के लिए सही उपयोग है, और किसी भी अन्य कस्टम बॉक्स के साथ आप आ सकते हैं।

Answer 4

आप निश्चित रूप से कंटेनर के रूप में अनुभाग टैग का उपयोग कर सकते हैं। यह एक div के साथ या html5 कल्पना कहती है की तुलना में अधिक महत्वपूर्ण तरीके से समूह सामग्री के लिए है:

अनुभाग तत्व किसी दस्तावेज़ या एप्लिकेशन के सामान्य अनुभाग का प्रतिनिधित्व करता है। इस संदर्भ में एक खंड, सामग्री का विषयगत समूहन है, आमतौर पर शीर्षक के साथ। http://www.w3.org/TR/html5/sections.html#the-section-element

Answer 5

सही तरीका # 2 है। आपने अपने दस्तावेज़ के अनुभाग को परिभाषित करने के लिए अनुभाग टैग का उपयोग किया है। चश्मा से http://www.w3.org/TR/html5/sections.html :

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

Comments

मुझे यकीन नहीं है कि # 2 इस टैग (रैपिंग <article>एस) का सबसे अच्छा उपयोग है , लेकिन यह वास्तव में केवल उदाहरण के रूप में केवल डमी पाठ के साथ बताना असंभव है, और "प्राथमिक" के साथ दो खंड id...

— वेस्ले मर्च

Answer 6

यह सिर्फ गलत है: एक आवरण नहीं है। दस्तावेज़ की रूपरेखा तैयार करने में मदद करने के लिए तत्व आपकी सामग्री के शब्दार्थ अनुभाग को दर्शाता है। इसमें हेडिंग होनी चाहिए। यदि आप एक पृष्ठ आवरण तत्व (HTML या XHTML के किसी भी स्वाद के लिए) की तलाश कर रहे हैं, तो क्रोक कैमेन द्वारा बताए गए तत्व पर सीधे शैलियों को लागू करने पर विचार करें। यदि आपको अभी भी स्टाइल के लिए एक अतिरिक्त तत्व की आवश्यकता है, तो एक का उपयोग करें। जैसा कि डॉ। माइक बताते हैं, div मर नहीं रहा है, और अगर कुछ और उपयुक्त नहीं है, तो संभवतः यह वह जगह है जहाँ आप वास्तव में अपने CSS को लागू करना चाहते हैं।

आप इसे देख सकते हैं: http://html5doctor.com/avoiding-common-html5-mistakes/