Semantische Bereitstellung einer Beschriftung, eines Titels oder einer Bezeichnung für eine Liste in HTML

Was ist der richtige Weg, um eine semantische Beschriftung für eine HTML-Liste bereitzustellen ? Die folgende Liste enthält beispielsweise einen "Titel" / "Beschriftung".

Obst

• Apfel
• Birne
• Orange

Wie soll mit dem Wort "Frucht" so umgegangen werden, dass es semantisch mit der Liste selbst verknüpft ist?

Obwohl es keine Beschriftung oder Überschriften gibt, kann die effektive Strukturierung Ihres Markups den gleichen Effekt haben. Hier sind ein paar Vorschläge:

Verschachtelte Liste

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

Option 1

HTML5 hat die figureund figcaptionElemente , die ich sehr gut finde.

Beispiel:

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

Diese können dann einfach mit CSS gestaltet werden.

Option 2

Die Verwendung von CSS3 :: vor dem Pseudoelement kann eine gute 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 einen anderen Selektor verwenden als ul[title]; Sie können beispielsweise eine Klasse "Titel als Header" hinzufügen und ul.title-as-header::beforestattdessen verwenden oder was auch immer Sie benötigen.

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

Soweit ich weiß, gibt es in den aktuellen HTML-Spezifikationen keine Bestimmungen für die Bereitstellung einer Beschriftung für eine Liste, wie dies bei Tabellen der Fall ist. Ich würde vorerst entweder einen klassifizierten Absatz oder ein Header-Tag verwenden.

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

Wenn HTML5 in Zukunft eine breitere Akzeptanz findet, können Sie die Tags <legend>und verwenden <figure>, um dies etwas semantischer zu erreichen.

Weitere Informationen finden Sie in diesem Beitrag auf der W3C-Mailingliste.

Um sicherzustellen , Screenreadern die Liste mit einer zugehörigen Position anschließen, könnten Sie aria-labelledbymit einem zu einer Überschrift verbunden idwie folgt:

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

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

Stellen Sie, wie in einer vorherigen Antwort erwähnt, sicher, dass Ihre Überschriftenebene der Überschriftenreihenfolge in Ihrem Dokument entspricht.

Es gibt kein beschriftungsähnliches Tag für eine Liste wie eine Tabelle. Also würde ich es einfach mit einem <Hx>(x abhängig von Ihren zuvor verwendeten Headern) versehen.

Ich weiß, dass dies alt ist, wollte aber die Antwort hinzufügen, die ich für zukünftige Leute gefunden habe: https://www.w3.org/MarkUp/html3/listheader.html

benutze das <lh>Element:

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

Da ich versucht habe, eine Lösung mit älterer Browserunterstützung zu finden, habe ich eine möglicherweise stark vereinfachte Lösung. Verwenden von Tabellenanzeigestilen und IDs / Klassen:

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

Wenden Sie dann den display: table-row;Stil auf das Element in CSS an:

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

Dies funktioniert viel besser, wenn Sie eine Beschreibungsliste verwenden. Dies habe ich getan, als ich dieselbe Frage hatte. In diesem Fall können Sie <div>im HTML und display: table-caption;im CSS verwenden, da div-Elemente in der dl-Liste unterstützt werden:

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

In CSS können Sie verschiedene Stile auf die Beschriftung anwenden:

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

Ich sollte beachten, dass table-captiondies nicht so gut funktioniert, da ul/oles als Blockelement behandelt wird und der Text vertikal ausgerichtet wird, was Sie wahrscheinlich nicht möchten.

Ich habe dies sowohl in Firefox als auch in Chrome getestet.

Sie können <label/>Ihrem Listenelement jederzeit eine Bezeichnung zuordnen:

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