كيفية توفير التسمية التوضيحية أو العنوان أو التسمية للحصول على قائمة في HTML

Question

ما هي الطريقة الصحيحة لتوفير متعلق بدلالات الألفاظ التسمية التوضيحية لقائمة HTML؟ على سبيل المثال، تحتوي القائمة التالية على "العنوان" / "التسمية التوضيحية".

فاكهة

• تفاحة
• كمثرى
• البرتقالي

كيف سيتم التعامل مع كلمة "الفاكهة"، بطريقة ترتبط دليليا مع القائمة نفسها؟

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>

Answer 2

الخيار 1

HTML5 لديه figure و figcaption عناصر, ، الذي أجده يعمل بشكل جيد تماما.

مثال:

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

ثم يتم بسهولة تصريح بسهولة مع CSS.

---

الخيار 2

باستخدام CSS3 :: قبل أن يكون العنصر الزائف حلا جميلا:

لغة البرمجة:

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

CSS:

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

يمكنك، بالطبع، استخدام محدد مختلف من ul[title]; ؛ على سبيل المثال، يمكنك إضافة فئة واستخدام "As-as-header" ul.title-as-header::before بدلا من ذلك، أو كل ما تحتاجه.

هذا لديه التأثير الجانبي لإعطائك تلميح تلميح للقائمة بأكملها. إذا كنت لا تريد مثل هذا الذاكرة، فيمكنك استخدام سمة بيانات بدلا من ذلك (على سبيل المثال، <ul data-title="fruit"> و ul[data-title]::before { content: attr(data-title); }).

Answer 3

بقدر ما أعرف، لا توجد أحكام في مواصفات HTML الحالية لتوفير التسمية التوضيحية للحصول على قائمة، حيث توجد مع الجداول. سأظل مع استخدام إما فقرة صاصة أو علامة رأس الآن.

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

في المستقبل، عندما تكسب HTML5 اعتماد أوسع، ستتمكن من استخدام <legend> و <figure> العلامات لإنجاز هذا أكثر دلالية.

يرى هذا المشنور في القائمة البريدية W3C للحصول على مزيد من المعلومات.

Answer 4

لا توجد علامة تشبه التسمية التوضيحية لقائمة مثل الطاولة. لذلك أنا فقط أعطيه <Hx> (X اعتمادا على رؤوسك المستخدمة سابقا).

Answer 5

يمكنك دائما استخدام <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>