एचटीएमएल 5 सर्वोत्तम अभ्यास; अनुभाग / शीर्ष लेख / अलग / लेख तत्व

545

वेब पर एचटीएमएल 5 के बारे में पर्याप्त जानकारी है (और स्टैकओवरफ्लो पर भी), लेकिन अब मैं "सर्वोत्तम प्रथाओं" के बारे में उत्सुक हूं। अनुभाग / हेडर / लेख जैसे टैग नए हैं, और हर किसी के बारे में अलग-अलग राय है कि आपको इन टैग का उपयोग कब और कहां करना चाहिए। तो आप लोग निम्नलिखित लेआउट और कोड के बारे में क्या सोचते हैं?

वेबसाइट लेआउट

  1  <!doctype html>
  2      <head>
  3          <title>Website</title>
  4      </head>
  5  
  6      <body>
  7          <section>
  8              <header>
  9                  <div id="logo"></div>
 10                  <div id="language"></div>
 11              </header>
 12  
 13              <nav>
 14                  <ul>
 15                      <li>menu 1</li>
 16                      <li>menu 2</li>
 17                      <li>menu 3</li>
 18                      <li>menu 4</li>
 19                      <li>menu 5</li>
 20                  </ul>
 21              </nav>
 22  
 23              <div id="main">
 24                  <div id="main-left">
 25                      <article>
 26                          <header><h1>This is a title</h1></header>
 27  
 28                          <p>Lorem ipsum dolor sit amet, consectetur
 29                          adipiscing elit. Quisque semper, leo eget</p>
 30  
 31                          <p>Lorem ipsum dolor sit amet, consectetur
 32                          adipiscing elit. Quisque semper, leo eget</p>
 33  
 34                          <p>Lorem ipsum dolor sit amet, consectetur
 35                          adipiscing elit. Quisque semper, leo eget</p>
 36  
 37                          <p>Lorem ipsum dolor sit amet, consectetur
 38                          adipiscing elit. Quisque semper, leo eget</p>
 39                      </article>
 40                  </div>
 41  
 42                  <div id="main-right">
 43                      <section id="main-right-hot">
 44                          <h2>Hot items</h2>
 45                          <ul>
 46                              <li>Lorem ipsum</li>
 47                              <li>dolor sit</li>
 48                              <li>...</li>
 49                          </ul>
 50                      </section>
 51  
 52                      <section id="main-right-new">
 53                          <h2>New items</h2>
 54                          <ul>
 55                              <li>Lorem ipsum</li>
 56                              <li>dolor sit</li>
 57                              <li>...</li>
 58                          </ul>
 59                      </section>
 60                  </div>
 61              </div>
 62  
 63              <div id="news-items">
 64                  <header><h2>The latest news</h2></header>
 65  
 66                  <div id="item_1">
 67                      <article>
 68                          <header>
 69                              <img src="#" title="titel artikel" />
 70                              <h3>Lorem ipsum .....</h3>
 71                          </header>
 72                          <p>Lorem ipsum dolor sit amet,
 73                          adipiscing elit. Quisque semper, </p>
 74                          <a href="#">Read more</a>
 75                      </article>
 76                  </div>
 77  
 78  
 79                  <div id="item_2">
 80                      <article>
 81                          <header>
 82                              <img src="#" title="titel artikel" />
 83                              <h3>Lorem ipsum .....</h3>
 84                          </header>
 85                          <p>Lorem ipsum dolor sit amet,
 86                          adipiscing elit. Quisque semper, </p>
 87                          <a href="#">Read more</a>
 88                      </article>
 89                  </div>
 90  
 91  
 92                  <div id="item_3">
 93                      <article>
 94                          <header>
 95                              <img src="#" title="titel artikel" />
 96                              <h3>Lorem ipsum .....</h3>
 97                          </header>
 98                          <p>Lorem ipsum dolor sit amet,
 99                          adipiscing elit. Quisque semper, </p>
100                          <a href="#">Read more</a>
101                      </article>
102                  </div>
103              </div>
104  
105              <footer>
106                  <ul>
107                      <li>menu 1</li>
108                      <li>menu 2</li>
109                      <li>menu 3</li>
110                      <li>menu 4</li>
111                      <li>menu 5</li>
112                  </ul>
113              </footer>
114          </section>
115      </body>
116  </html>

लाइन 7. sectionपूरी वेबसाइट के आसपास? या केवल एक div?

पंक्ति 8. प्रत्येक के sectionसाथ शुरू header?

पंक्ति 23. क्या यह divसही है? या यह होना चाहिए section?

लाइन 24. स्प्लिट लेफ्ट / राइट कॉलम ए के साथ div।

लाइन 25. articleटैग के लिए सही जगह है ?

पंक्ति 26. क्या h1-टैग में अपने -टैग लगाना आवश्यक है header?

पंक्ति 43. सामग्री मुख्य लेख से संबंधित नहीं है, इसलिए मैंने फैसला किया कि यह एक है sectionऔर एक नहीं है aside।

लाइन 44. एच 2 बिना header

लाइन 53. sectionबिनाheader

लाइन 63. सभी (गैर-संबंधित) समाचार आइटम के साथ div

लाइन 64. headerh2 के साथ

लाइन 65. हम्म, divया section? या इसे हटा दें divऔर केवल article-tag का उपयोग करें

लाइन 105. पाद :-)

html  header  article 
— बास वैन डोरस्ट
स्रोत
— क्रिस्टोफ रूसी

जवाबों:

486

असल में, जब आप शीर्ष लेख / पाद लेख की बात करते हैं तो आप काफी सही होते हैं। यहाँ पर कुछ मूलभूत जानकारी दी गई है कि प्रत्येक प्रमुख HTML5 टैग का उपयोग कैसे किया जा सकता है / (मैं नीचे दिए गए लिंक से जुड़े पूर्ण स्रोत को पढ़ने का सुझाव देता हूं):

अनुभाग - विषयवस्तु से संबंधित सामग्री को एक साथ समूहीकृत करने के लिए प्रयुक्त। एक दिव्य तत्व की तरह लगता है, लेकिन यह नहीं है। Div का कोई अर्थ नहीं है। खंड के तत्वों के साथ अपने सभी डिव को बदलने से पहले, हमेशा अपने आप से पूछें: "क्या सभी सामग्री संबंधित है?"

अलग - अलग ढंग से संबंधित सामग्री के लिए उपयोग किया जाता है। सिर्फ इसलिए कि कुछ सामग्री मुख्य सामग्री के बाईं या दाईं ओर दिखाई देती है, अलग-अलग तत्व का उपयोग करने के लिए पर्याप्त कारण नहीं है। अपने आप से पूछें कि क्या मुख्य सामग्री के अर्थ को कम किए बिना एक तरफ की सामग्री को हटाया जा सकता है। पुलकॉट मूर्त रूप से संबंधित सामग्री का एक उदाहरण है।

हेडर - हेडर तत्व और हेडर (या मास्टहेड) के सामान्य स्वीकृत उपयोग के बीच एक महत्वपूर्ण अंतर है। एक पृष्ठ में आमतौर पर केवल एक हेडर या 'मास्टहेड' होता है। HTML5 में आप जितने चाहें उतने हो सकते हैं। कल्पना इसे "परिचयात्मक या नेविगेशनल एड्स के एक समूह" के रूप में परिभाषित करती है। आप अपनी साइट पर किसी भी अनुभाग में एक हेडर का उपयोग कर सकते हैं। वास्तव में, आपको संभवतः अपने अधिकांश अनुभागों के भीतर एक हेडर का उपयोग करना चाहिए। युक्ति अनुभाग तत्व का वर्णन करता है "आम तौर पर एक शीर्षक के साथ सामग्री का एक विषयगत समूहन।"

नौसेना - प्रमुख नेविगेशन जानकारी के लिए इरादा। एक साथ लिंक किए गए लिंक का एक समूह नौसेना तत्व का उपयोग करने के लिए पर्याप्त कारण नहीं है। दूसरी ओर साइट-वाइड नेविगेशन, एक नौसेना तत्व में है।

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

स्रोत : https://clzd.me/html5-section-aside-header-nav-footer-elements-not-as-obpret-as-they-sound/

इसके अतिरिक्त, यहाँ पर एक विवरण है article, जो उपरोक्त स्रोत में नहीं मिला है:

लेख - उस तत्व के लिए उपयोग किया जाता है जो स्वतंत्र, स्व-निहित सामग्री को निर्दिष्ट करता है। एक लेख को अपने आप समझ में आना चाहिए। अपने सभी डिव को लेख तत्वों के साथ बदलने से पहले, हमेशा अपने आप से पूछें: "क्या इसे बाकी वेब साइट से स्वतंत्र रूप से पढ़ना संभव है?"

— नाथन जेबी
स्रोत
68
यह मेरे लिए एक पहेली है कि इस उत्तर को कितने वोट मिले: यह <article>तत्वों के बारे में बात नहीं करता है , यह उल्लेख किए गए तत्वों के विपरीत नहीं है, न ही उन्हें समूह बनाता है। उत्तर न तो "सर्वोत्तम अभ्यास" देता है, न ही यह ओपी के किसी भी स्पष्ट प्रश्न का उत्तर देता है!
— राबर्ट सीमर
2
@RobertSiemer मेरे लिए यह भी एक पहेली है कि आपकी टिप्पणी को 24 कैसे मिला और सवाल केवल 6 डाउनवोट्स का है ...
— Veger
@RobertSiemer cuz यह बहुत अच्छा लग रहा है, आपको क्या लगता है? मुझे नहीं पता था कि यह आपकी टिप्पणी की जाँच करने और अगले उत्तर के साथ पुष्टि करने तक खराब था।
— Det
237

दुर्भाग्य से अब तक दिए गए उत्तर (सबसे अधिक मतदान सहित) या तो "सिर्फ" सामान्य ज्ञान, सादे गलत या सबसे अच्छे से भ्रमित करने वाले हैं। कोई भी महत्वपूर्ण कीवर्ड 1 पॉप अप नहीं करता है!

मैंने 3 उत्तर लिखे:

  1. यह स्पष्टीकरण (यहां शुरू)।
  2. ओपी के सवालों के ठोस जवाब।
  3. बेहतर विस्तृत HTML।

यहां चर्चा किए गए html तत्वों की भूमिका को समझने के लिए आपको यह जानना होगा कि उनमें से कुछ दस्तावेज़ को अनुभाग में रखते हैं। प्रत्येक और प्रत्येक HTML दस्तावेज़ को रूपरेखा-everyor⁠- सामग्री की तालिका (TOC) बनाने के उद्देश्य से HTML5 रूपरेखा एल्गोरिथ्म के अनुसार सेक्शन किया जा सकता है । रूपरेखा आम तौर पर (इन दिनों) दिखाई नहीं देती है, लेकिन लेखकों को HTML का उपयोग इस तरह से करना चाहिए कि परिणामी रूपरेखा उनके इरादों को दर्शाती है।

आप के साथ अनुभाग बना सकते हैं वास्तव में इन तत्वों और कुछ नहीं :

  • (स्पष्ट) उपखंड बनाना
    • <section> वर्गों
    • <article> वर्गों
    • <nav> वर्गों
    • <aside> वर्गों
  • सिबलिंग सेक्शन या उपखंड बनाना
    • <h*>2 के साथ अनिर्दिष्ट प्रकार के खंड (सभी ऐसा नहीं करते हैं, नीचे देखें)
  • वर्तमान स्पष्ट (उप) खंड को बंद करने के लिए

नाम रखे जा सकते हैं:

  • <h*> बनाया वर्गों खुद का नाम
  • <section|article|nav|aside>वर्गों को पहले नाम दिया जाएगा <h*>यदि कोई है
    • ये <h*>केवल वही हैं जो स्वयं सेक्शन नहीं बनाते हैं

वर्गों के लिए एक और बात है: निम्नलिखित संदर्भ (अर्थात तत्व) "रूपरेखा सीमाएं" बनाते हैं। उनके पास जो भी अनुभाग हैं वे उनके लिए निजी हैं:

  • दस्तावेज़ के साथ ही <body>
  • के साथ तालिका कोशिकाओं <td>
  • <blockquote>
  • <details>, <dialog>, <fieldset>, और<figure>
  • और कुछ नहीं

शीर्षक

example HTML
<body> <h3>if you want siblings at top level...</h3> <h3>...you have to use untyped sections with <h*>...</h3> <article> <h1>...as any other section will descent</h1> </article> <nav> <ul> <li><a href=...>...</a></li> </ul> </nav> </body> has this outline
1. if you want siblings at top level... 2. ...you have to use untyped sections with <h*>... 2.1. ...as any other section will descent 2.2. (unnamed navigation)









इससे दो सवाल उठते हैं:

बीच क्या अंतर है <article>और <section>?

  • दोनों कर सकते हैं:
    • एक दूसरे में निहित हो
    • एक अलग संदर्भ या घोंसले के शिकार के स्तर में एक अलग धारणा लें
  • <section>s पुस्तक अध्याय की तरह हैं
    • वे आमतौर पर भाई-बहन होते हैं (शायद एक अलग दस्तावेज़ में?)
    • साथ में उनके पास कुछ आम है, जैसे कि एक किताब में अध्याय
  • एक लेखक, एक <article>, कम से कम निम्नतम स्तर पर
    • मानक उदाहरण: एक एकल ब्लॉग टिप्पणी
    • स्वयं एक ब्लॉग प्रविष्टि भी एक अच्छा उदाहरण है
    • एक ब्लॉग प्रविष्टि <article>और उसकी टिप्पणी <article>को भी एक के साथ लपेटा जा सकता है<article>
    • यह कुछ "पूर्ण" चीज है, समान श्रृंखला में हिस्सा नहीं है
  • <section>एक में <article>एक पुस्तक में अध्यायों की तरह हैं
  • <article>एस में एक <section>(एक श्रृंखला के अंदर) के एक मात्रा में कविताओं की तरह हैं

कैसे करते हैं <header>, <footer>और कैसे <main>फिट होते हैं?

  • सेक्शनिंग पर उनका शून्य प्रभाव है
  • <header> तथा <footer>
    • वे आपको प्रत्येक और हर खंड के क्षेत्रों को चिह्नित करने की अनुमति देते हैं
    • यहां तक ​​कि एक खंड के भीतर आप उन्हें कई बार कर सकते हैं
    • इस भाग में मुख्य भाग से अंतर करना
    • केवल लेखक के स्वाद तक सीमित
    • <header>
      • इस अनुभाग के शीर्षक / नाम को चिह्नित कर सकते हैं
      • इस अनुभाग के लिए एक लोगो हो सकता है
      • अनुभाग के शीर्ष या ऊपरी भाग में होने की कोई आवश्यकता नहीं है
    • <footer>
      • इस अनुभाग के क्रेडिट / लेखक को चिह्नित कर सकते हैं
      • अनुभाग के शीर्ष पर आ सकता है
      • एक से ऊपर भी हो सकता है <header>
  • <main>
    • केवल एक बार अनुमति दी गई
    • शीर्ष स्तर अनुभाग के मुख्य भाग को चिह्नित करता है (अर्थात दस्तावेज़, <body>जो है)
    • उपधाराओं के पास अपने मुख्य भाग के लिए कोई मार्कअप नहीं है
    • <main>दस्तावेज़ के कुछ उपखंडों में "छुपाएँ" भी कर सकते हैं, जबकि दस्तावेज़ <header>और <footer>नहीं (उस मार्कअप के शीर्षलेख / पाद लेख को चिह्नित करेगा)
      • लेकिन इसे <article>धारा 3 में अनुमति नहीं है
    • दस्तावेज़ के गैर-हेडर, नॉन-फ़ूटर, गैर-मुख्य सामग्री से "वास्तविक चीज़" को अलग करने में मदद करता है, अगर यह आपके मामले में समझ में आता है ...

1 मन में आता है: रूपरेखा, एल्गोरिथ्म, अंतर्निहित सेक्शनिंग
2 मैं उपयोग <h*>के लिए आशुलिपि के रूप में <h1>, <h2>, <h3>, <h4>, <h5>और <h6>
3 न है <main>में अनुमति <aside>या <nav>है, लेकिन यह कोई आश्चर्य की बात की है। - वास्तव में: <main>केवल (नेस्टेड) ​​अवरोही <section>वर्गों में छिप सकते हैं या शीर्ष स्तर पर दिखाई दे सकते हैं, अर्थात्<body>

— रॉबर्ट सीमर
स्रोत
32
उत्तर स्वयं एक कविता की तरह है। मेरा पसंदीदा हिस्सा है: sections in an article are like chapters in a book, articles in a section are like poems in a volume- मैंने देखा है सबसे अच्छा और सबसे सहज articleबनाम sectionस्पष्टीकरण!
— सेर्गेई लुकिन
1
कुछ बुलेट बिंदुओं में संक्षेपित बॉयलरप्लेट के बिना यह व्यापक ज्ञान है। साझा करने के लिए धन्यवाद! कभी-कभी SO पर सबसे अच्छा उत्तर न तो स्वीकृत होता है और न ही सबसे अधिक मूल्यांकित।
3
मुझे पता है कि यह क्लिच है, लेकिन, "यह स्वीकृत उत्तर होना चाहिए!"। फुटनोट्स और सब कुछ! धन्यवाद!
— यूजीन
यूजीन और फीट या सही हैं। याद रखें कि इस मतदान के दौरान आप अधूरे और गलत जवाब दे सकते हैं। यह उनके लेखकों के लिए कोई अपराध नहीं है, यह सबसे अच्छा जवाब सुनिश्चित करने की लागत है जिसे पहले देखा जाता है। चुने हुए उत्तर पर रॉबर्ट की टिप्पणी के अलावा मुझे यह भी पसंद नहीं है क्योंकि यह वेब में कहीं और से (अपूर्ण) सामग्री को लूटता है।
— IAmNaN
यह बहुत विस्तृत जवाब है और बहुत सी बातें स्पष्ट कर दी हैं, धन्यवाद!
— अलादीन 16
111

डिव तत्वों को नए तत्वों से बदला जा सकता है: हेडर, नेवी, सेक्शन, आर्टिकल, एक तरफ, और पाद।

उस दस्तावेज़ का मार्कअप निम्न की तरह लग सकता है:

<body>
     <header>...</header>
     <nav>...</nav>
     <article>
          <section>
               ...
          </section>
     </article>
     <aside>...</aside>
     <footer>...</footer>
</body>

आपको इस सूची में ए सूची के अलावा और अधिक जानकारी मिल सकती है ।

— cilerler
स्रोत
25
यह बॉयलरप्लेट संरचना इस पृष्ठ पर स्थान के लायक नहीं है। 1) उल्लेख किए गए HTML तत्वों में से कोई भी दस्तावेज़ में किसी भी स्थिति से बंधा हुआ नहीं है। 2) यह झूठा अर्थ लगाता है कि <शीर्ष लेख> और <पाद> दस्तावेज़ स्तर के तत्व हैं। 3) यह झूठा है कि <खंड> केवल <लेख> -चिल्ड के रूप में करना है। @DanDascalescu
— रॉबर्ट सिएमर
2
अधिक @RobertSiemer सहमत नहीं हो सका। यह अभी भी एचटीएमएल 5 तत्वों के बारे में सबसे आम गलत धारणाओं में से एक है और हमारी प्यारी मार्कअप भाषा के लिए एक अर्थिक बाधा बन रही है।
— कानो
पुन :: 2), नहीं हो सकता है <header>और <footer>दस्तावेज़ स्तर के तत्वों, साथ ही <section|article|nav|aside>वर्गों के भीतर हो सकता है?
— फ्लि‍म
1
@ फ़ीलम, हाँ वे कर सकते हैं। मेरा कहना था: उत्तर गलत नहीं है - यह सिर्फ ज्यादा जवाब नहीं देता है।
— रॉबर्ट सिएमर 19
63

मैं सुझाव दूंगा कि HTML3 को संरचित करने के बारे में W3 विकी पृष्ठ :

<header>किसी साइट की हेडर सामग्री को शामिल करने के लिए उपयोग किया जाता है। <footer> किसी साइट की पाद सामग्री शामिल है। <nav>इसमें पृष्ठ के लिए नेविगेशन मेनू, या अन्य नेविगेशन कार्यक्षमता शामिल है।

<article>सामग्री का एक स्टैंडअलोन टुकड़ा होता है जो कि
एक आरएसएस आइटम के रूप में सिंडिकेटेड होता है , उदाहरण के लिए एक समाचार आइटम।

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

<aside> उस सामग्री के एक ब्लॉक को परिभाषित करता है जो इसके आस-पास मुख्य सामग्री से संबंधित है, लेकिन इसके प्रवाह के लिए केंद्रीय नहीं है।

उनमें एक छवि शामिल है जिसे मैंने यहाँ साफ़ किया है:

एचटीएमएल 5

कोड में, ऐसा दिखता है:

<body>
  <header></header>    
  <nav></nav>    
  <section id="sidebar"></section>    
  <section id="content"></section>    
  <aside></aside>    
  <footer></footer>
</body>

आइए HTML5 तत्वों में से कुछ को अधिक विस्तार से देखें।

<section>

<section>तत्व कार्यक्षमता या विषयों क्षेत्र के विशिष्ट विभिन्न क्षेत्रों से युक्त, या अलग अलग वर्गों में एक लेख या कहानी को तोड़ने के लिए है। तो इस मामले में: "साइडबार 1" में विभिन्न उपयोगी लिंक शामिल हैं जो साइट के हर पृष्ठ पर बने रहेंगे, जैसे "आरएसएस की सदस्यता" और "स्टोर से संगीत खरीदें"। "मुख्य" में इस पृष्ठ की मुख्य सामग्री है, जो ब्लॉग पोस्ट है। साइट के अन्य पृष्ठों पर, यह सामग्री बदल जाएगी। यह काफी सामान्य तत्व है, लेकिन फिर भी इसका मतलब पुराने की तुलना में अधिक अर्थपूर्ण है <div>।

<article>

<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>

<header> तथा <footer>

जैसा कि हमने पहले ही ऊपर उल्लेख किया है, <header>और <footer>तत्वों का उद्देश्य हेडर और फुटर सामग्री को क्रमशः लपेटना है। हमारे विशेष उदाहरण में <header>तत्व में एक लोगो छवि होती है, और <footer>तत्व में कॉपीराइट नोटिस होता है, लेकिन यदि आप चाहें तो आप अधिक विस्तृत सामग्री जोड़ सकते हैं। यह भी ध्यान दें कि आपके पास प्रत्येक पृष्ठ पर एक से अधिक शीर्ष लेख और पाद लेख हो सकते हैं - साथ ही शीर्ष स्तर के शीर्ष लेख और पाद लेख पर हमने अभी चर्चा की है, आप प्रत्येक के अंदर एक <header>और <footer>तत्व निहित हो सकते हैं <article>, इस स्थिति में वे उस पर लागू होंगे विशेष लेख। हमारे उपरोक्त उदाहरण में जोड़ना:

<article>
  <header></header>    
  <section id="introduction"></section>      
  <section id="content"></section>      
  <section id="summary"></section>      
  <footer></footer>
</article>

<nav>

<nav>तत्व नेविगेशन लिंक या अन्य निर्माणों (जैसे एक खोज फार्म) कि आप वर्तमान साइट के विभिन्न पृष्ठों, या वर्तमान पृष्ठ के विभिन्न क्षेत्रों में ले जाएगा ऊपर अंकन के लिए है। अन्य लिंक, जैसे प्रायोजित लिंक, गिनती नहीं करते हैं। आप निश्चित रूप से शीर्षक और अन्य संरचना तत्वों को अंदर शामिल कर सकते हैं <nav>, लेकिन यह अनिवार्य नहीं है।

<aside>

आपने देखा होगा कि हमने <aside>दूसरे साइडबार को चिह्नित करने के लिए एक तत्व का उपयोग किया है : एक जिसमें नवीनतम गिग्स और संपर्क विवरण हैं। यह पूरी तरह से उपयुक्त है, जैसा <aside>कि मुख्य प्रवाह से संबंधित जानकारी के टुकड़ों को चिह्नित करने के लिए है, लेकिन इसमें सीधे फिट नहीं होते हैं। और इस मामले में मुख्य सामग्री बैंड के बारे में है! अन्य अच्छे विकल्पों के लिए <aside>ब्लॉग पोस्ट (ओं) के लेखक, एक बैंड जीवनी, या उनके एल्बम को खरीदने के लिए लिंक के साथ एक बैंड डिस्कोग्राफी के बारे में जानकारी होगी।

कहाँ छोड़ता है <div>?

तो, हमारे पृष्ठों पर उपयोग करने के लिए इन सभी नए तत्वों के साथ, विनम्र के दिन <div>गिने जाते हैं, निश्चित रूप से? नहीं। वास्तव में, <div> अभी भी एक पूरी तरह से वैध उपयोग है। सामग्री के एक क्षेत्र को समूहीकृत करने के लिए कोई अन्य उपयुक्त तत्व उपलब्ध नहीं होने पर आपको इसका उपयोग करना चाहिए, जो अक्सर तब होता है जब आप विशुद्ध रूप से एक सामग्री का उपयोग समूह की सामग्री को एक साथ स्टाइल / विज़ुअल उद्देश्यों के लिए करते हैं। एक सामान्य उदाहरण <div>पृष्ठ पर सभी सामग्री को लपेटने के लिए उपयोग कर रहा है , और फिर ब्राउज़र विंडो में सभी सामग्री को केंद्रित करने के लिए CSS का उपयोग कर रहा है, या संपूर्ण सामग्री के लिए एक विशिष्ट पृष्ठभूमि छवि लागू करता है।

— जस्टिन
स्रोत
1
नेस्टेड वर्गों के लिए, यह <section class="summary">बजाय के बजाय उपयोग करने के लिए और अधिक समझ में नहीं आता है <section id="summary">? यदि आपके पास एक पृष्ठ पर कई लेख हैं, तो बाद की विधि डुप्लिकेट आईडी के एक ही पृष्ठ पर परिणाम देगी - एक HTML अशुद्ध-पेस। सही?
— जेपी ल्यू
हां, मैं शायद उस उदाहरण के बजाय कक्षाओं का उपयोग करूंगा।
— जस्टिन
1
क्या आपके द्वारा उल्लेखित सभी टैग "मुख्य" में लिपटे नहीं होने चाहिए जो कि "शरीर" में लिपटे हुए हैं?
— फ्रांसिस्को एगुइलेरा
1
mainटैग जोड़ने के लिए अच्छा होगा। पृष्ठ पर अद्वितीय सामग्री क्या है, इसके आधार पर यह निर्णय लिया जाएगा। इस उदाहरण में, मुझे लगता है कि मैं इसे केंद्र के चारों ओर रखूंगा section। और पढ़ें: w3.org/TR/2012/WD-html-main-element-20121217 "किसी दस्तावेज़ के मुख्य सामग्री अनुभाग में ऐसी सामग्री शामिल है जो उस दस्तावेज़ के लिए अद्वितीय है और साइट जैसे दस्तावेज़ों के एक सेट में दोहराई गई सामग्री को शामिल नहीं करती है नेविगेशन लिंक, कॉपीराइट जानकारी, साइट लोगो और बैनर और खोज फ़ॉर्म। "
— जस्टिन
इसके अभी भी इतने अस्पष्ट रूप में MDN प्रलेखन है
— 6
23

[ मेरे "मुख्य उत्तर" में स्पष्टीकरण ]

पंक्ति 7. पूरी वेबसाइट के चारों ओर अनुभाग ? या केवल एक div ?

न तो। स्टाइल के लिए: का उपयोग करें <body>, यह पहले से ही वहाँ है। सेक्शनिंग / शब्दार्थ के लिए: जैसा कि मेरे उदाहरण एचटीएमएल में विस्तृत है, इसका प्रभाव उपयोगिता के विपरीत है। पहले से ही लपेटी गई सामग्री के लिए अतिरिक्त रैपर कोई सुधार नहीं है, लेकिन शोर है।


पंक्ति 8. प्रत्येक अनुभाग हेडर से शुरू होता है?

नहीं, यह लेखक की पसंद है कि सामग्री को आम तौर पर "हेडर" के रूप में संक्षेपित किया जाए। और अगर वह हेडर-कंटेंट अतिरिक्त अंकन के बिना स्पष्ट रूप से पहचानने योग्य है, तो यह पूरी तरह से बिना रह सकता है <header>। यह लेखक की पसंद भी है।


पंक्ति 23. क्या यह तलाक सही है? या यह एक अनुभाग होना चाहिए ?

<div>शायद गलत है। यह इरादों पर निर्भर करता है: क्या यह स्टाइल के लिए है केवल यह सही हो सकता है। यदि यह अर्थ उद्देश्यों के लिए है यह गलत है: यह एक होना चाहिए <article>बजाय के रूप में मेरे अन्य जवाब में दिखाया गया है । <article>यह सही भी है अगर यह स्टाइल और सेक्शनिंग दोनों के लिए है।

<section>यहाँ गलत लगता है, क्योंकि इस से पहले या बाद में कोई समान खंड नहीं हैं, जैसे किसी पुस्तक में अध्याय। (यह उद्देश्य है <section>)।


लाइन 24. विभाजन एक साथ छोड़ दिया / सही स्तंभ div ।

क्यों नहीं?


लाइन 25. लेख टैग के लिए सही जगह है ?

हाँ, समझ में आता है।


लाइन 26. क्या हेडर -टैग में अपना एच 1 -टैग लगाना जरूरी है?

नहीं। एक अकेला <h*>तत्व को शायद कभी भी अंदर जाने की ज़रूरत नहीं है <header>(लेकिन अगर आप चाहें तो ऐसा कर सकते हैं) क्योंकि यह पहले से ही स्पष्ट है कि यह आने वाला है। - यह समझ में आता है अगर यह <header>भी एक टैगलाइन शामिल है ( <p>उदाहरण के साथ चिह्नित ), उदाहरण के लिए।


पंक्ति 43. सामग्री मुख्य लेख से संबंधित नहीं है, इसलिए मैंने फैसला किया कि यह एक खंड है और एक तरफ नहीं है ।

यह गलतफहमी है कि आसपास की सामग्री के लिए <aside>"स्पर्श संबंधी " होना आवश्यक है। मुद्दा यह है: <aside>यदि सामग्री केवल " स्पर्शरेखा से संबंधित" है या नहीं तो सभी का उपयोग करें!

फिर भी, <aside>एक सभ्य विकल्प होने के अलावा , "हॉट आइटम" और "नए आइटम" के रूप में <article>अभी भी बेहतर हो सकता है , <section>एक पुस्तक में दो अध्यायों की तरह नहीं पढ़ा जा सकता है। आप पूरी तरह से उनमें से एक के लिए जा सकते हैं और दूसरे को किसी चीज़ की वैकल्पिक छँटाई की तरह नहीं, एक पूरे के दो हिस्सों की तरह।


लाइन 44. हेडर के बिना H2

महान है।


लाइन 53. हेडर के बिना अनुभाग

खैर, वहाँ कोई नहीं है <header>, लेकिन <h2>-हायडिंग बहुत स्पष्ट है कि इस भाग में कौन सा शीर्ष लेख है।


लाइन 63. सभी (गैर-संबंधित) समाचार आइटम के साथ div

<article>या <aside>बेहतर हो सकता है।


लाइन 64. एच 2 के साथ हेडर

पहले से ही चर्चा की।


लाइन 65. हम्म, डिव या सेक्शन ? या इस div को हटा दें और केवल लेख -tag का उपयोग करें

बिल्कुल सही! निकालें <div>।


लाइन 105. पाद :-)

बहुत ही उचित।

— रॉबर्ट सीमर
स्रोत
3 उत्तर में एक उत्तर को विभाजित करना सहायक नहीं है।
— क्रिश्चियन स्ट्रेम्पफर
6
@ChristianStrempfer यह वास्तव में मददगार है, क्योंकि बहुत से लोग ओपी (इस उत्तर) के विशिष्ट प्रश्नों के विशिष्ट उत्तरों को पढ़ने के लिए नहीं आते हैं, लेकिन हाथ में विषय के बारे में अधिक पढ़ने के लिए (मेरा मुख्य उत्तर)। - मेरा मानना ​​है कि एक बड़े जवाब के साथ मुझे वो वोट भी नहीं मिलेंगे जो मेरे अकेले मुख्य जवाब पर हैं। - आपकी क्या सलाह है?
— रॉबर्ट सिएमर
मैं उन्हें एक उत्तर में विलय करने का सुझाव देता हूं। उन्हें विभाजित करने के लिए संग्रह वोट अच्छा तर्क नहीं है। विशेष रूप से तीसरा उत्तर अकेले नहीं हो सकता, क्योंकि आप अपना मुख्य उत्तर बता रहे हैं।
— क्रिश्चियन स्ट्रेम्पफर
@ChristianStrempfer जो मेरे स्वाद के लिए बहुत लंबा होगा। - मैं तालिकाओं में सुधार पर काम कर रहा हूं, हालांकि ...
— रॉबर्ट सिएमर
20

मेरे "मुख्य" उत्तर में स्पष्टीकरण के अनुसार प्रश्न में दस्तावेज़ को एक रूपरेखा के अनुसार चिह्नित किया जाना चाहिए।

निम्नलिखित दो तालिकाओं में मैं दिखाता हूं:

  • मूल HTML और इसकी रूपरेखा
  • एक संभावित इच्छित रूपरेखा और HTML ऐसा कर रहा है

original html (shortened)
<body> <section> <header> <div id=logo></div> <div id=language></div> </header> <nav> ... </nav> <div id=main> <div id=main-left> <article> <header> <h1>The real thing</h1> </header> </article> </div> <div id=main-right> <section id=main-right-hot> <h2>Hot items</h2> </section> <section id=main-right-new> <h2>New items</h2> </section> </div> </div> <div id=news-items> <header> <h2>The latest news</h2> </header> <div id=item_1> <article> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> <div id=item_2> <article> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> <div id=item_3> <article> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> </div> <footer> <ul><li>...</ul> </footer> </section>

original html relevant for outline
<body> <section> // logo and language <nav> ... </nav> <article> <h1>The real thing</h1> </article> <section> <h2>Hot items</h2> </section> <section> <h2>New items</h2> </section> <h2>The latest news</h2> <article> <h3>...</h3> </article> <article> <h3>...</h3> </article> <article> <h3>...</h3> </article> // footer links </section>












































resulting outline
1. (untitled document) 1.1. (untitled section) 1.1.1. (untitled navigation) 1.1.2. The real thing (h1) 1.1.3. Hot items (h2) 1.1.4. New items (h2) 1.1.5. The latest news (h2) 1.1.6. news item_1 (h3) 1.1.7. news item_2 (h3) 1.1.8. news item_3 (h3)


The outline of the original is
definitively not what was intended.

































































निम्न तालिका एक उन्नत संस्करण के लिए मेरा प्रस्ताव दिखाती है। मैं निम्नलिखित मार्कअप का उपयोग करता हूं:

  • <removed>
  • <NEW_OR_CHANGED_ELEMENT>
  • <element MOVED_ATTRIBUTE=1>

possible intended outline
1. (main) 1.1. The real thing 1.2. (hot&new) 1.2.1. Hot items 1.2.2. New items 2. The latest news 2.1. news item_1 2.2. news item_2 2.3. news item_3










































































modified html
<body>  <section> <header> <ASIDE> <div id=logo></div> <div id=language></div> </ASIDE> </header> <nav> ... </nav> <ARTICLE id=main>   <div id=main-left> <article ID=main-left> <header> <h1>The real thing</h1> </header> </article>   </div> <ARTICLE id=main-right> <ARTICLE id=main-right-hot> <h2>Hot items</h2> </ARTICLE> <ARTICLE id=main-right-new> <h2>New items</h2> </ARTICLE> </ARTICLE> </ARTICE> <ARTICLE id=news-items> <header> <h2>The latest news</h2> </header>   <div id=item_1> <article ID=item_1> <header> <h3>...</h3> </header> <a>read more</a> </article>   </div>   <div id=item_2> <article ID=item_2> <header> <h3>...</h3> </header> <a>read more</a> </article>   </div>   <div id=item_3> <article ID=item_3> <header> <h3>...</h3> </header> <a>read more</a> </article>   </div> </ARTICLE> <footer> <NAV> <ul><li>...</ul> </NAV> </footer>  </section>``

resulting outline
1. (untitled document) 1.1. (untitled logo and lang) 1.2. (untitled navigation) 1.3. (untitled main) 1.3.1 The real thing 1.3.2. (untitled hot&new) 1.3.2.1. Hot items 1.3.2.2. New items 1.4. The latest news 1.4.1. news item_1 1.4.2. news item_2 1.4.3. news item_3 1.5. (untitled footer nav)


The modified HTML reflects the
intended outline way better than
the original.
































































— रॉबर्ट सीमर
स्रोत
उत्कृष्ट विस्तृत उत्तर के लिए धन्यवाद, यह बहुत ज्ञानवर्धक है। मैं विषय के बारे में अधिक जानना चाहता हूं, इसलिए मुझे आशा है कि आप कुछ विकल्पों की व्याख्या कर सकते हैं, जो मेरे लिए अजीब लगते हैं। मैं उन्हें व्यक्तिगत टिप्पणियों के रूप में पोस्ट करूंगा।
— गोर
1. हेडर के चारों ओर> div [id = logo] मुझे अप्रासंगिक लगता है। वर्तमान में यह एक हेडर है, लेकिन शब्दार्थ रूप से नहीं। भाषा div शायद किसी तरह का नेविगेशन है और लोगो शायद पूरी साइट पर हेडर की तरह है लेकिन निश्चित रूप से पेज पर नहीं है।
— गोर
2. <आर्टिक आईडी = मुख्य> वास्तव में केवल प्रस्तुतिकरण लगता है। इसमें अंदर से संबंधित कुछ भी शामिल नहीं है। (यही बात <ARTICLE id = main-right> के बारे में भी सही है, लेकिन यह वहां बहुत अधिक बचाव योग्य है ("समाचार और हॉट" के रूप में)।) मैं सबसे कम में div या main का उपयोग करने का सुझाव देता हूं।
— गोर
3. <आर्टिक आईडी = समाचार-आइटम> मुझे विशिष्ट मामले के रूप में लगता है जहां मैं एक तरफ उपयोग करूंगा। इसका मुख्य लेख से कोई लेना देना नहीं है, यह सिर्फ कुछ न्यूज़फ़ीड है। और मैं मानता हूं कि इसमें व्यक्तिगत "छोटे" लेखों के रूप में समाचार शामिल हैं।
— गोर
1
अपने प्रस्ताव को संपादित करने पर विचार करें, आपका "सैद्धांतिक" उत्तर बहुत अच्छा लिखा गया है, लेकिन मुझे लगता है कि अधिकांश शुरुआती सिर्फ कोड उदाहरण को देखेंगे और वे वास्तव में भ्रमित हो सकते हैं, क्योंकि यह सैद्धांतिक भाग के अनुरूप नहीं है।
— Gorn
17

मुख्य गलती: आपको पूरे दस्तावेज़ में "डिविटिस" है।
यही कारण है?

<header>
    <div id="logo"></div>
    <div id="language"></div>
</header>

के बजाय:

<header role="banner">
    <!-- Not the best -->
    <h1 id="logo"></h1> <!-- or <figure> and <figcaption>, or <h1> and <p>... -->
    <h2 id="language"></h2>

    <!-- Better, if the IDs have not semantic sense -->
    <h1></h1>
    <h2></h2>
</header>

इस हेडर को स्टाइल करने के लिए, सीएसएस पदानुक्रम: बॉडी> सेक्शन> हेडर> एच 1, बॉडी> सेक्शन> हेडर> एच 2 का उपयोग करें

अधिक, ... लाइन 63: हेडर क्यों h2 ?? यदि आप शीर्ष लेख के अंदर किसी भी अधिक तत्व को शामिल नहीं करते हैं, तो बस एक एच 2 का उपयोग करें।
ध्यान रखें, आपकी संरचना दस्तावेज़ को स्टाइल करने के लिए नहीं है, बल्कि एक दस्तावेज़ स्व-समझाया गया है।

इसे बाकी दस्तावेज़ों पर लागू करें; सौभाग्य ;)

— COVI
स्रोत
4
— bradley.ayers
भूमिका = "बैनर" h1 पर ही होना चाहिए, पूरे हेडर पर नहीं? इस तरह यह एक स्क्रीन रीडर के एक टुकड़े की ओर इशारा करता है जिसे स्क्रीन रीडर घोषित करेगा, HTML का ग्लोब नहीं।
— एनगमेंट
11
लोगो और भाषा के लिए h1 और h2 का उपयोग करना मेरे लिए मायने नहीं रखता है। दाईं ओर की छोटी छोटी भाषा का बटन इस पृष्ठ की दूसरी सबसे महत्वपूर्ण सामग्री / जानकारी होनी चाहिए? और अगर आप अपने लोगो को h1 के अंदर रखते हैं तो खोज बॉट से पता चलेगा कि हर पृष्ठ की मुख्य सामग्री एक ही है (मेरे दिमाग में बहुत उबाऊ है)। H1 और h2 के उपयोग के लिए @MeanEYE उत्तर भी देखें। इसके अलावा अगर आपको शब्दार्थ की आवश्यकता हो तो आईडी गैर-अर्थ संबंधी उपयोग आरडीएफए है। आपका रास्ता सीएसएस चयनकर्ताओं को धीमा कर देता है: Developers.google.com/speed/docs/best-practices/…
— F Lekschas
10

लेख टैग पर आइटम_1, आइटम_2 इत्यादि स्वयं क्यों नहीं हैं? ऐशे ही:

<article id="item_1">
...
</article>
<article id="item_2">
...
</article>
...

रैपर divs जोड़ना अनावश्यक लगता है। ID मानों का HTML में कोई अर्थ नहीं है, इसलिए मुझे लगता है कि ऐसा करने के लिए यह पूरी तरह से मान्य होगा - आप यह नहीं कह रहे हैं कि वर्तमान लेख के संदर्भ में पहला लेख हमेशा item_1, सिर्फ item_1 है। आईडी का ऐसा कोई मतलब नहीं है जो संदर्भ से स्वतंत्र हो।

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

— मैट ब्राउन
स्रोत
2
मैं सिर्फ मूल उदाहरण का पालन कर रहा था और दिखा रहा था कि अनावश्यक आवरण विभाजन के बिना एक ही बात को कैसे पूरा किया जाए। आईडी किसी भी कारण से हो सकती है ... एक बात के लिए, उन्हें इंगित करने वाले लंगर लिंक हो सकते हैं।
— मैट ब्राउन ने
5
  1. अनुभाग का उपयोग केवल एक दस्तावेज के अंदर एक अनुभाग को लपेटने के लिए किया जाना चाहिए (जैसे अध्याय और इसी तरह)
  2. हेडर टैग के साथ : नहीं। हेडर टैग पृष्ठ हेडर के लिए एक आवरण का प्रतिनिधित्व करता है और एच 1, एच 2, आदि के साथ भ्रमित नहीं होना चाहिए।
  3. कौन सा डिव? : डी
  4. हाँ
  5. W3C स्कूलों से:

    टैग बाहरी सामग्री को परिभाषित करता है। बाहरी सामग्री बाहरी प्रदाता से समाचार-लेख, या वेब लॉग (ब्लॉग) से एक पाठ, या मंच से एक पाठ, या बाहरी स्रोत से कोई अन्य सामग्री हो सकती है।

  6. नहीं, हेडर टैग का एक अलग उपयोग है। H1, H2, आदि दस्तावेज शीर्षकों का प्रतिनिधित्व करते हैं H1 सबसे महत्वपूर्ण है

मैंने अन्य लोगों का उत्तर नहीं दिया क्योंकि यह अनुमान लगाना कठिन है कि आप किस विषय का उल्लेख कर रहे थे। यदि और प्रश्न हैं, तो कृपया मुझे बताएं।

— MeanEYE
स्रोत
1
आपके उत्तर के लिए धन्यवाद! बिंदु 3 पर; मुझे खेद है, लाइन-नंबर सही नहीं थे। यह बिंदु 3 के बजाय लाइन_23 होना चाहिए; मेरी पोस्ट में भी लाइन परिवर्तन देखें।
— बास वैन डोरस्ट
हां, मैं अपनी साइटों पर यही काम करता हूं। साइट संरचना बनाने के लिए आमतौर पर DIV का उपयोग किया जाता है। एचटीएमएल 5 में हेडर, फुटर और इसी तरह के टैग पेश करना केवल चीजों को पढ़ने में आसान बनाने के लिए है। वे DIV के समान व्यवहार करते हैं।
— माध्य २
3
अपने स्रोतों की जाँच करें। W3c स्कूलों की साइट यह निर्दिष्ट नहीं करती है कि articleजरूरी बाहरी स्रोत से हो। w3schools.com/html5/tag_article.asp
— chharvey
हम्म, मैंने यह भी नहीं सोचा था कि लेख को बाहरी स्रोत से उपयोग किया जाना है। यह एक पुराना उत्तर छोड़ दिया गया है, मुझे शायद ही याद हो कि यह किस बारे में था। :)
— मतलब
मैं # 1 से सहमत हूं। मुझे लगता है कि उन तत्वों तत्व ASIDE के रूप में अधिक समझ में आता है।
— एंडी
3

यहां मेरा उदाहरण है जिसमें मैं काम करता हूं

यहाँ छवि विवरण दर्ज करें

— इवान
स्रोत
2 
<body itemscope itemtype="http://schema.org/Blog">
 <header>
  <h1>Wake up sheeple!</h1>
  <p><a href="news.html">News</a> -
     <a href="blog.html">Blog</a> -
     <a href="forums.html">Forums</a></p>
  <p>Last Modified: <span itemprop="dateModified">2009-04-01</span></p>
  <nav>
   <h1>Navigation</h1>
   <ul>
    <li><a href="articles.html">Index of all articles</a></li>
    <li><a href="today.html">Things sheeple need to wake up for today</a></li>
    <li><a href="successes.html">Sheeple we have managed to wake</a></li>
   </ul>
  </nav>
 </header>
 <main>
  <article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
   <header>
    <h1 itemprop="headline">My Day at the Beach</h1>
   </header>
   <div itemprop="articleBody">
    <p>Today I went to the beach and had a lot of fun.</p>
    ...more content...
   </div>
   <footer>
    <p>Posted <time itemprop="datePublished" datetime="2009-10-10">Thursday</time>.</p>
   </footer>
  </article>
  ...more blog posts...
 </main>
 <footer>
  <p>Copyright ©
   <span itemprop="copyrightYear">2010</span>
   <span itemprop="copyrightHolder">The Example Company</span>
  </p>
  <p><a href="about.html">About</a> -
     <a href="policy.html">Privacy Policy</a> -
     <a href="contact.html">Contact Us</a></p>
 </footer>
</body>

https://www.w3.org/TR/2014/REC-html5-20141028/sections.html#the-nav-element

— Юрий Светлов
स्रोत
1

मुझे नहीं लगता कि आपको समाचार आइटम सारांश (टैग 67, 80, 93) पर टैग का उपयोग करना चाहिए। आप अनुभाग का उपयोग कर सकते हैं या केवल संलग्नक div है।

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

जब आप you अधिक पढ़ें ’पर क्लिक करते हैं तो बाद वाला पृष्ठ कर सकते हैं

— conordarcy
स्रोत
1

संपादित करें: दुर्भाग्य से मुझे खुद को सही करना होगा।

नीचे देखें https://stackoverflow.com/a/17935666/2488942W3 स्पेक्स के लिंक के लिए जिसमें एक उदाहरण शामिल है (उन लोगों के विपरीत जो मैंने पहले देखा था)।

लेकिन फिर .... यहाँ @Fez के लिए इसके बारे में एक अच्छा लेख है।

मेरी मूल प्रतिक्रिया थी:

जिस तरह से w3 स्पेक्स संरचित हैं:

4.3.4 खंड

4.3.4.1 शरीर तत्व

4.3.4.2 अनुभाग तत्व

4.3.4.3 नव तत्व

4.3.4.4 लेख तत्व

....

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

मुझे लगता है कि इसका उपयोग इस तरह किया जाना चाहिए:

section: Chapter 1
    nav: Ch. 1.1
         Ch. 1.2

    article: Ch. 1.1
             some insightful text

    article: Ch. 1.2
             related to 1.1 but different topic

या एक समाचार वेबसाइट के लिए:

section: News
    article: This happened today
    article: this happened in England

section: Sports
    article: England - Ukraine 0:0
    article: Italy books tickets to Brazil 2014
— पंडिता
स्रोत
1

„लाइन 23. क्या यह तलाक सही है? या यह एक अनुभाग होना चाहिए? "

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

<main>
    <!-- The main content -->
</main>

http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-main-element

— feeela
स्रोत
0

मैं इस प्रश्न को अधिक स्पष्ट रूप से स्पष्ट करना चाहता हूं, मुझे सही करें यदि मैं गलत हूं तो आइए फेसबुक वॉल का एक उदाहरण लें

1. सभी "अनुभाग" टैग के अंतर्गत आता है, जो दर्शाता है कि यह पृष्ठ से अलग है।

2. सभी पोस्ट "लेख" टैग के अंतर्गत आते हैं।

3. फिर हमारे पास एक पोस्ट है, जो "सेक्शन" टैग के तहत आता है।

3. हम शीर्षक "एक्स उपयोगकर्ता पोस्ट यह" इसके लिए हम "शीर्षक" टैग का उपयोग कर सकते हैं।

4. जब पोस्ट के अंदर हमारे पास तीन खंड एक होते हैं, वह है इमेज / टेक्स्ट, लाइक-शेयर-कमेंट बटन और कमेंट बॉक्स।

5. टिप्पणी बॉक्स के लिए हम लेख टैग का उपयोग कर सकते हैं।

— गोरखधंधा
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.