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

Question

HTML सूची के लिए अर्थ कैप्शन प्रदान करने का उचित तरीका क्या है ? उदाहरण के लिए, निम्न सूची में "शीर्षक" / "कैप्शन" है।

फल

• सेब
• नाशपाती
• संतरा

शब्द "फल" को कैसे संभाला जाना चाहिए, इस तरह से कि यह शब्द सूची से ही जुड़ा हुआ है?

Comments

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

मुझे आश्चर्य है कि यह प्रश्न बंद कर दिया गया है; यह स्पष्ट रूप से शब्दार्थ के बारे में है, सौंदर्यशास्त्र या किसी अन्य व्यक्तिपरक विषय के बारे में नहीं। सवाल सीधे पूछ रहा है "क्या इस स्थिति के लिए एक उपयुक्त शब्दार्थ मार्कअप है?" और, जैसा कि HTML5 का संबंध है, उत्तर "हां" है ।

— डेसकॉग

मैं इतने सारे प्रश्नों को देखकर थक गया हूं जो मेरी राय के अनुसार "राय-आधारित" के रूप में बंद हैं। यह एक गर्भनिरोधक है। हमें अपनी राय व्यक्त करने दें। साथ ही, यह प्रश्न "सर्वोत्तम अभ्यास" के बारे में है। लोगों को सर्वोत्तम प्रथाओं (स्रोतों के साथ) के बारे में मान्य तर्क हो सकते हैं। हम वे तर्क चाहते हैं। इसके बारे में "राय" नहीं है

— म्लाडेन एडमोविक

मैंने इस प्रश्न को फिर से खोलने के लिए मतदान किया है और इसे कम राय-वाई ध्वनि के लिए संपादित किया है। अब यह स्पष्ट रूप से एक शीर्षक जोड़ने के लिए सही अर्थ का तरीका पूछता है।

— लजार लुजुबेनोविक

Answer 1

हालांकि आपके मार्कअप को प्रभावी ढंग से संरचित करने वाला कोई कैप्शन या हेडिंग तत्व नहीं है, इसका एक ही प्रभाव हो सकता है। यहाँ कुछ सुझाव हैं:

नेस्टेड सूची

<ul>
    <li>
        Fruit
        <ul>
            <li>Apple</li>
            <li>Pear</li>
            <li>Organge</li>
        </ul>
    </li>
</ul>

---

सूची से पहले शीर्षक

<hX>Fruit</hX>
<ul>
    <li>Apple</li>
    <li>Pear</li>
    <li>Orange</li>
</ul>

---

परिभाषा सूची

<dl>
  <dt>Fruit</dt>
  <dd>Apple</dd>
  <dd>Pear</dd>
  <dd>Orange</dd>
</dl>

Comments

@alohci यदि सूची में और परिभाषाएँ होने वाली हैं तो क्या गलत है w / एक परिभाषा सूची या एक अव्यवस्थित सूची?

— १

@ मिश्र: कृपया विस्तृत करें। आपकी टिप्पणी से प्रेरित है लेकिन जैसा कि यह खड़ा है यह बिल्कुल भी मददगार नहीं है क्योंकि आप यह नहीं समझाते हैं कि अन्य विकल्प 'शब्दशः मान्य' क्यों नहीं हैं

— Stijn de Witt

@StijndeWitt - यह सब सच है। इस उदाहरण में यह गलत शब्दार्थ है क्योंकि यह प्रश्न में नहीं है। HTML मार्कअप सही होने के साथ यही समस्या है, वास्तविक सामग्री और संदर्भ यह मामलों में है।

— Alohci

@JeffereyCave <ul>एक बच्चे के रूप में (या किसी अन्य ब्लॉक-स्तरीय तत्व) के रूप में HTML विनिर्देश के<p> अनुसार अमान्य है , जिसमें कहा गया है कि केवल "नोड्यूज़िंग कंटेंट" हो सकता है जैसे कि बच्चा नोड्स। <p>

— 16

@ahsteele दिलचस्प ... एमडीएन ने इसे विवरण सूची के रूप में सूचीबद्ध किया है ... ओह! "HTML5 से पहले, [इसे] एक परिभाषा सूची के रूप में जाना जाता था।" developer.mozilla.org/en-US/docs/Web/HTML/Element/dl । आपका लिंक html4 के लिए था। और उस लिंक पर, वे एक dl को एक डायलॉग का प्रतिनिधित्व करते हुए एक उदाहरण देते हैं, जिसमें प्रत्येक dt स्पीकर को चिन्हित करता है और dd को वह कहते हैं जो वे कहते हैं। इसलिए मुझे पूरा यकीन है कि वे, जो भी वे कहते हैं, ठीक से इस तरह से भी इस्तेमाल किया जा सकता है।

— RoboticRenaissance

Answer 2

विकल्प 1

एचटीएमएल 5 में तत्व figureऔर figcaptionतत्व हैं , जो मुझे काफी अच्छी तरह से काम करते हैं।

उदाहरण:

<figure>
    <figcaption>Fruit</figcaption>
    <ul>
        <li>Apple</li>
        <li>Pear</li>
        <li>Orange</li>
    </ul>
</figure>

फिर इन्हें आसानी से CSS के साथ स्टाइल किया जाता है।

---

विकल्प 2

छद्म तत्व से पहले CSS3 का उपयोग करना एक अच्छा समाधान हो सकता है:

HTML:

<ul title="Fruit">
    <li>Apple</li>
    <li>Pear</li>
    <li>Orange</li>
</ul>

सीएसएस:

ul[title]::before {
    content: attr(title);
    /* then add some nice styling as needed, eg: */
    display: block;
    font-weight: bold;
    padding: 4px;
}

आप निश्चित रूप से की तुलना में एक अलग चयनकर्ता का उपयोग कर सकते हैं ul[title]; उदाहरण के लिए, आप एक 'शीर्षक-जैसा-हेडर' वर्ग जोड़ सकते हैं और ul.title-as-header::beforeइसके बजाय उपयोग कर सकते हैं, या आपको जो भी आवश्यक हो।

यह आपको पूरी सूची के लिए टूलटिप देने का दुष्प्रभाव है। यदि आप ऐसा टूलटिप नहीं चाहते हैं, तो आप इसके बजाय एक डेटा विशेषता का उपयोग कर सकते हैं (जैसे, <ul data-title="fruit">और ul[data-title]::before { content: attr(data-title); })।

Comments

आपका जवाब है कि चश्मा क्या कह रहा है। मुझे आश्चर्य है कि यह शीर्ष मतदान क्यों नहीं है।

— अहमद महमूद

@AhmedMahmoud शायद क्योंकि शीर्ष उत्तर इस एक से 7 साल पुराना है!

— डाइसकॉग

ओह, समय उड़ जाता है। तारीख पर ध्यान नहीं दिया।

— अहमद महमूद

क्या इसका मतलब figureछवियों से भिन्न सामग्री के साथ किया जा सकता है?

— कोडगस्ट

@CodeGust बिल्कुल

— Daiscog

Answer 3

जहां तक ​​मुझे पता है, सूची के लिए कैप्शन प्रदान करने के लिए वर्तमान HTML चश्मा में कोई प्रावधान नहीं हैं, जैसा कि तालिकाओं के साथ है। मैं या तो एक वर्गीकृत पैराग्राफ का उपयोग कर रहा हूं, या एक हेडर टैग के लिए।

<h3>Fruit</h3>
<ul>
    <li>Apple</li>
    <li>Pear</li>
    <li>Orange</li>
</ul>

भविष्य में, एचटीएमएल 5 लाभ जब व्यापक गोद लेने के लिए, आप का उपयोग करने के लिए सक्षम हो जाएगा <legend>और <figure>यह थोड़ा और अधिक शब्दार्थ पूरा करने के लिए टैग।

देखें इस पोस्ट में अधिक जानकारी के लिए W3C मेलिंग सूची पर।

Answer 4

यह सुनिश्चित करने के लिए कि स्क्रीन रीडर्स लिस्ट को संबंधित हेडिंग से कनेक्ट करें, आप aria-labelledbyएक हेडिंग से जुड़े का उपयोग इस idतरह कर सकते हैं:

<h3 id="fruit-id">Fruit</h3>

<ul aria-labelledby="fruit-id">
  <li>Apple</li>
  <li>Pear</li>
  <li>Orange</li>
</ul>

जैसा कि पिछले उत्तर में बताया गया है, सुनिश्चित करें कि आपका शीर्षक स्तर आपके दस्तावेज़ में शीर्ष क्रम का पालन करता है।

Answer 5

तालिका जैसी सूची के लिए कोई कैप्शन जैसा टैग नहीं है। तो मैं बस इसे दे दूंगा <Hx>(एक्स आपके पहले इस्तेमाल किए गए हेडर के आधार पर)।

Answer 6

मुझे पता है कि यह पुराना है, लेकिन उस उत्तर को जोड़ना चाहता हूं जो मुझे भविष्य के लोगों के लिए मिला: https://www.w3.org/MarkUp/html3/listheader.html

<lh>तत्व का उपयोग करें :

<ul>
  <lh>Types of fruit:</lh>
  <li>Apple</li>
  <li>Orange</li>
  <li>Grape</li>
</ul>

Comments

नोट: इसका उल्लेख HTML 3.0 के मसौदे में किया गया था, लेकिन इसे कभी भी HTML 3.2 में शामिल नहीं किया गया, जबकि यह कुछ ब्राउज़रों में ठीक से प्रस्तुत किया जा सकता है, जो इसका समर्थन नहीं करता है।

— नाथन चैंपियन

Answer 7

चूंकि मैं पुराने ब्राउज़र समर्थन के साथ एक समाधान खोजने की कोशिश कर रहा था, इसलिए मेरे पास एक अति-सरलीकृत समाधान हो सकता है। तालिका प्रदर्शन शैलियों और आईडी / कक्षाओं का उपयोग करना:

    <ul>
        <li id="listCaption">My List</li>
        <li>first item</li>
        <li>second item</li>
        <li>third item</li>
      </ul>

फिर display: table-row;सीएसएस में तत्व के लिए शैली लागू करें :

    li#listCaption {
      display: table-row;
      font-size: larger;
      text-decoration: underline; }

यह बहुत बेहतर काम करता है यदि आप एक विवरण सूची का उपयोग कर रहे हैं, जो कि मैं वही कर रहा था जब मेरे पास एक ही प्रश्न था। उस स्थिति में, आप <div>HTML और display: table-caption;CSS में उपयोग कर सकते हैं , क्योंकि dl सूची में div तत्वों का समर्थन किया गया है:

    <dl>
        <div id="caption">Table Caption</div>
        <dt>term</dt>
        <dd>definition</dd>
    </dl>

CSS में आप कैप्शन में विभिन्न शैलियों को लागू कर सकते हैं:

    #caption {
        display: table-caption;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        background: transparent;
        caption-side: top;
        text-align: center; }

मुझे ध्यान देना चाहिए कि table-captionयह काम नहीं करता है और साथ ही ul/olइसे एक ब्लॉक तत्व के रूप में माना जाता है और पाठ को लंबवत रूप से संरेखित किया जाएगा, जिसे आप शायद नहीं चाहते हैं।

मैंने फ़ायरफ़ॉक्स और क्रोम दोनों में यह परीक्षण किया।

Answer 8

आप हमेशा <label/>लेबल को अपनी सूची तत्व में जोड़ सकते हैं :

<div>
    <label for="list-2">TEST</label>
    <ul id="list-1">
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
    <label for="list-2">TEST</label>
    <ol id="list-2">
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
</div>

Comments

यह अमान्य है। एचटीएमएल कल्पना कहा गया है कि forविशेषता चाहिए एक की आईडी होना labelable तत्व है, जो UL(लेखन के समय) नहीं है ।

— daiscog