शब्दार्थ सूची में शीर्षक कैसे जोड़ें

Question

यह मुझे थोड़ी देर के लिए परेशान कर रहा है, और मैं सोच रहा हूं कि क्या यह ठीक से करने के लिए कोई सहमति है। जब मैं एक HTML सूची का उपयोग कर रहा हूं, तो मैं सूची के लिए एक शीर्षक कैसे जोड़ सकता हूं?

एक विकल्प यह है:

<h3>Fruits I Like:</h3>
<ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

लेकिन शब्दार्थ रूप से <h3>शीर्षक स्पष्ट रूप से संबंधित नहीं है<ul>

एक अन्य विकल्प यह है:

<ul>
    <li><h3>Fruits I Like:</h3></li>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

लेकिन यह थोड़ा गंदा लगता है, क्योंकि शीर्षक वास्तव में सूची मदों में से एक नहीं है।

इस विकल्प को W3C द्वारा अनुमति नहीं है:

<ul>
    <h3>Fruits I Like:</h3>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

के रूप में <ul>की केवल एक या अधिक शामिल कर सकते हैं <li>s '

पुरानी "सूची शीर्षक" <lh>सबसे अधिक समझ में आता है

<ul>
    <lh>Fruits I Like:</lh>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

लेकिन निश्चित रूप से यह आधिकारिक तौर पर HTML का हिस्सा नहीं है

मैंने सुना है यह सुझाव दिया है कि हम <label>एक फार्म की तरह उपयोग करते हैं :

<ul>
    <label>Fruits I Like:</label>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

लेकिन यह थोड़ा अजीब है और वैसे भी मान्य नहीं होगा।

अपनी सूची के शीर्षलेखों को स्टाइल करने की कोशिश करते समय शब्दार्थ संबंधी समस्याओं को देखना आसान है, जहां मुझे <h3>पहले अपने टैग लगाने की आवश्यकता है <li>और उन्हें कुछ इस तरह से स्टाइल करने के लिए लक्षित करें:

ul li:first-of-type {
    list-style: none;
    margin-left: -1em;
    /*some other header styles*/
}

भयावहता! लेकिन कम से कम इस तरह से मैं टैग <ul>को स्टाइल करके पूरी , हेडिंग और सभी को नियंत्रित कर सकता हूं ul।

ऐसा करने का सही तरीका क्या है? कोई विचार?

Comments

कुछ लोग एलएच का उपयोग कर रहे हैं, लेकिन यह महसूस नहीं कर सकते हैं कि वे वास्तव में "वास्तविक" एचटीएमएल टैग का उपयोग नहीं कर रहे हैं, लेकिन सिर्फ एक यादृच्छिक टैग नाम बना रहे हैं। ब्राउज़र ऐसे टैग को इनलाइन तत्व मानते हैं। कुछ आपको इस पर एक क्लास और सीएसएस लगाने की अनुमति देंगे।

— ग्लेन लिटिल

के संभावित डुप्लिकेट stackoverflow.com/questions/2417891/...

— goodeye

HTML में एक सूची के लिए शीर्षक, शीर्षक या लेबल को

— साबित

Answer 1

जैसा कि फेलिप अलसाक्रिएशंस ने पहले ही कहा है, पहला विकल्प ठीक है।

यदि आप यह सुनिश्चित करना चाहते हैं कि सूची के नीचे कुछ भी नहीं है, जैसा कि शीर्षक से संबंधित है, तो यह है कि HTML5 सेक्शनिंग सामग्री तत्व क्या हैं। उदाहरण के लिए, आप कर सकते हैं

<h2>About Fruits</h2>
<section>
  <h3>Fruits I Like:</h3>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
  </ul>
</section>
<!-- anything here is part of the "About Fruits" section but does not 
     belong to the "Fruits I Like" section. -->

Comments

इसके बहुत सारे अर्थ निकलते हैं; धन्यवाद। बेशक, यदि हम एचटीएमएल 5 का उपयोग करने जा रहे हैं, तो शीर्षकों के <h1>अंदर होना चाहिए <section>क्योंकि यह उन टैगों के भीतर शीर्ष स्तर का शीर्षक है।

— टॉमस मुल्डर

आप <h1>वहाँ, निश्चित रूप से उपयोग कर सकते हैं । लेकिन <h3>ठीक भी है। जब तक आप एक ही खंड के भीतर एक उच्च स्तरीय शीर्षक का उपयोग नहीं करते हैं।

— अलोहसी

हमें एच 1..एच 6 हेडिंग (यहां एच 2 और एच 3) के लिए लंबे समय तक ब्राउज़ करना चाहिए, जब तक कि ब्राउज़र, स्क्रीन रीडर और अन्य सहायक प्रौद्योगिकियां एचटीएमएल 5 में बताए गए शीर्षकों को सही ढंग से रेखांकित न करें (देखें कोडिंग .smashingmagazine.com/2011/08/16) ... - "ब्रॉज़" खोजें ...)। मुझे यकीन नहीं है कि यह कुछ महीनों में कितना विकसित हुआ, लेकिन शायद ब्राउज़र की पहुंच एपीआई के संबंध में इतना तेज़ नहीं है: /

— फेलिपएल्स

@davidjb - सावधान रहें, यह वही नहीं है जो सलाह कहती है। यह कहता है कि शीर्ष स्तर प्रदान करने के लिए h1-h6 का उपयोग किया जाना चाहिए। अर्थात h1 तत्वों का उपयोग केवल पृष्ठ पर शीर्ष स्तर के लिए किया जाना चाहिए। यह नहीं कहता है कि उस उच्चतम स्तर पर केवल एक शीर्षक हो सकता है। संयोग से, ब्राउज़र निर्माताओं ने स्पष्ट कर दिया है कि रूपरेखा रूपरेखा को लागू करने का उनका कोई इरादा नहीं है, इसलिए स्थिति में जल्दी सुधार होने की उम्मीद कम है।

— अलोहसी

@ मीचेल - यह इस बात पर निर्भर करता है कि आप बीच में दृष्टिगत हैं, या शब्दार्थ में। यदि नेत्रहीन है, तो यह सीएसएस के लिए एक समस्या है, और आदर्श रूप से आपके मार्क-अप को नहीं बदलेगा। यदि शब्दार्थ में, तो मुझे यकीन नहीं है कि आपको किस प्रकार की सूची मिली है। यह हो सकता है कि आपको दो सूचियाँ मिली हों, एक नहीं।

— एलोहसी

Answer 2

इस मामले में मैं एक परिभाषा सूची का उपयोग करूंगा:

<dl>
  <dt>Fruits I like:</dt>
  <dd>Apples</dd>
  <dd>Bananas</dd>
  <dd>Oranges</dd>
</dl>

Comments

लेबल द्वारा वर्णित चीजों की एक अनियंत्रित सूची के लिए, ऊपर दिए गए उदाहरण की तरह, मुझे लगता है कि यह सबसे अच्छा विकल्प है। शब्दार्थ बिल्कुल मेल खाता है: यहां एक शब्द या लेबल है (फल मुझे पसंद हैं), और यहां आइटम हैं जो उस लेबल (प्रत्येक फल) के अनुरूप हैं।

— एंड्रयू

यह सचमुच एक विवरण सूची है । यह सबसे अच्छा समाधान इमो है।

— डेरेक 會 會

प्रदर्शन: सूची-आइटम ... बुलेट प्रदर्शित करने के लिए सीएसएस। अच्छा उत्तर।

— माइका

Answer 3

आपका पहला विकल्प अच्छा है। यह कम से कम समस्याग्रस्त है और आपको पहले ही सही कारण मिल गए हैं कि आप अन्य विकल्पों का उपयोग क्यों नहीं कर पाए।

वैसे, आपका शीर्षक IS स्पष्ट रूप से जुड़ा हुआ है <ul>: यह सूची से ठीक पहले है! ;)

संपादित करें: स्टीव फॉल्कनर, डब्ल्यू 3 सी एचटीएमएल 5 और 5.1 के संपादकों में से एक ने एक ltतत्व की परिभाषा को छोड़ दिया है । यह एक अनौपचारिक मसौदा है कि वह HTML 5.2 के लिए चर्चा करेगा, अभी और कुछ नहीं।

Comments

मैं मानता हूं, अन्य समाधानों का कोई मतलब नहीं है

यह सच है, एक तरह से एक शीर्षक का उपयोग कर की तरह <p>। लेकिन मैं अभी भी कुछ और अधिक स्पष्ट करना चाहूंगा, तालिकाओं के लिए <th> `के लिए forविशेषता की तरह कुछ <label>' or the । मुझे लगता है कि <lh>विकल्प सबसे अधिक समझ में आता है अगर वास्तव में W3C द्वारा समर्थित थे।

— टॉमस मूलर

Answer 4

<div> आपकी सामग्री में एक तार्किक विभाजन है, शब्दार्थ यह मेरी पहली पसंद होगी यदि मैं सूची के साथ शीर्षक को समूहीकृत करना चाहता था:

<div class="mydiv">
    <h3>The heading</h3>
    <ul>
       <li>item</li>
       <li>item</li>
       <li>item</li>
    </ul>
</div>

तो आप एक इकाई के रूप में सब कुछ एक साथ शैली के लिए निम्नलिखित सीएसएस का उपयोग कर सकते हैं

.mydiv{}
.mydiv h3{}
.mydiv ul{}
.mydiv ul li{}
etc...

Comments

अच्छा विकल्प, कम से कम स्टाइल के उद्देश्यों के लिए।

— टॉमस मुल्डर

शब्दार्थवादी बोलने का अर्थ कुछ भी नहीं है, मुझे नहीं लगता कि यह आपकी पहली पसंद (स्टाइल मुद्दे से बाहर) क्यों होगी? : x

— रामबोफेट

@ रामबोफेट, बड़ी नेक्रोमेंसी! यह उत्तर 2012 से था, इससे पहले कि html5 अनुभाग और अन्य अधिक शब्दार्थ सही विकल्प प्रस्तुत करते। कुछ ब्राउज़रों ने पहले से ही अनुभाग का समर्थन किया, लेकिन कुछ ने नहीं किया। "div" आपकी सामग्री में "तार्किक विभाजन" के लिए छोटा है, इसलिए उस समय स्टाइल के लिए अपनी सामग्री को विभाजित करने का सबसे अच्छा तरीका था।

— एवर्ट

आप पूरी तरह से सही हैं, आपने "'12" भाग नहीं देखा है

— रामबोबफेट

Answer 5

आप <figure>अपनी सूची में किसी शीर्षक को जोड़ने के लिए तत्व का उपयोग भी कर सकते हैं :

<figure>
    <figcaption>My favorite fruits</figcaption>    
       <ul>
          <li>Banana</li>
          <li>Orange</li>
          <li>Chocolate</li>
       </ul>
</figure>

स्रोत: https://www.w3.org/TR/2017/WD-html53-20171214/single-page.html#the-li-element (उदाहरण 162)

Answer 6

एक नए वर्ग को परिभाषित करने का प्रयास करें, अल्सर, सीएसएस में। p.ulheader ~ ul उन सभी का चयन करता है जो तुरंत My Header का अनुसरण करते हैं

p.ulheader ~ ul {
   margin-top:0;
{
p.ulheader {
   margin-bottom;0;
}

Answer 7

W3.org के अनुसार (ध्यान दें कि यह लिंक लंबे समय से समाप्त ड्राफ्ट HTML 3.0 कल्पना में है ):

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

प्रारंभिक सूची टैग होना चाहिए <UL>। इसके बाद एक वैकल्पिक सूची शीर्षलेख ( <LH>कैप्शन </LH>) और उसके बाद पहली सूची आइटम ( <LI>) है। उदाहरण के लिए:

<UL>
  <LH>Table Fruit</LH>
  <LI>apples
  <LI>oranges
  <LI>bananas
</UL>

जिसे निम्न रूप में प्रस्तुत किया जा सकता है:

टेबल फ्रूट

• सेब
• संतरे
• केले

नोट: कुछ विरासत दस्तावेजों में पहले LI तत्व से पहले हेडर या सादा पाठ शामिल हो सकते हैं। बुरी तरह से बनाई गई विरासत दस्तावेजों को संभालने के लिए इस संभावना को पूरा करने के लिए HTML 3.0 उपयोगकर्ता एजेंटों के कार्यान्वयन की सलाह दी जाती है।

Comments

डाउनवोटिंग क्योंकि यह "1995 के ड्राफ्ट 3.0 विनिर्देश के लिंक" के अनुसार है, जिसने इसे ड्राफ्ट से बाहर कभी नहीं बनाया। "Lh" टैग ने इसे गैर-ड्राफ्ट HTML कल्पना में कभी नहीं बनाया।

— ब्रूक्स मूसा

HTML 3.0वाह यह एक बहुत पुराना दस्तावेज है।

— डेरेक 會 會

Answer 8

मैंने हेडिंग उल के अंदर डाल दी। ऐसा कोई नियम नहीं है जो कहता है कि UL में केवल LI तत्व होने चाहिए।

Comments

तथ्य के रूप में, वहाँ है। whatwg.org/specs/web-apps/current-work/#the-ul-element , सामग्री मॉडल

— विक्की