Wie man semantisch eine Beschriftung, Titel oder Label für eine Liste in HTML zur Verfügung stellen

Question

Was ist der richtige Weg, um eine semantische Beschriftung für eine HTML-Liste zur Verfügung stellen? Zum Beispiel hat die folgende Liste einen „Titel“ / „Beschriftung“.

Obst

• Apple-
• Birne
• Orange

Wie soll das Wort „Frucht“ behandelt werden, in einer solchen Art und Weise, dass es semantisch mit der Liste selbst verbunden ist?

Answer 1

Während es keine Beschriftung oder Überschrift Element Markup Strukturierung effektiv die gleiche Wirkung haben kann. Hier sind einige Vorschläge:

Verschachtelte List

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

---

Überschrift Vor der Liste

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

---

Definitionsliste

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

Answer 2

Option 1

HTML5 hat die figure und figcaption Elemente , die ich mit der Arbeit ganz gut.

Beispiel:

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

Diese werden dann leicht gestylt mit CSS.

---

Option 2

Mit CSS3 des :: vor Pseudo-Element kann eine schöne Lösung sein:

HTML:

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

Sie können natürlich, verwenden Sie einen anderen Wähler als ul[title]; zum Beispiel könnten Sie eine ‚Titel-as-Header‘ Klasse und verwenden ul.title-as-header::before stattdessen addieren, oder was auch immer Sie brauchen.

Dies hat den Nebeneffekt haben Sie einen Tooltip für die ganze Liste zu geben. Wenn Sie nicht über einen solchen Tooltip möchten, können Sie ein Datenattribut verwenden, anstatt (z.B. <ul data-title="fruit"> und ul[data-title]::before { content: attr(data-title); }).

Answer 3

Soweit ich weiß, gibt es keine Bestimmungen in der aktuellen HTML-Spezifikationen für eine Beschriftung für eine Liste bereitstellt, wie es mit Tabellen ist. Ich würde bleiben entweder mit einem klassierten Absatz, oder einen Header-Tag für jetzt.

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

In der Zukunft, wenn HTML5 breitere Akzeptanz gewinnt, werden Sie in der Lage sein, die <legend> und <figure>-Tags zu verwenden, um dies etwas semantisch zu erreichen.

Siehe dieser Beitrag auf der W3C-Mailingliste für weitere Informationen.

Answer 4

Es gibt keine Untertitel-like-Tag für eine Liste wie eine Tabelle hat. Also ich würde es nur eine <Hx> geben (x je nach bisher verwendeten Header).

Answer 5

Sie können immer <label/> verwenden Etikett auf der Liste Element zu verknüpfen:

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