web-dev-qa-db-de.com

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 "title"/"caption".

Frucht

  • Apple
  • Birne
  • Orange

Wie soll das Wort "Frucht" so behandelt werden, dass es semantisch mit der Liste selbst verbunden ist?

60
Jon P

Auch wenn es kein Beschriftungs- oder Überschriftenelement gibt, das Ihr Markup effektiv strukturiert, kann es 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 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>
59
ahsteele

Option 1

HTML5 hat die figure und figcaption -Elemente , 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

CSS3's :: before Pseudo-Element 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 als ul[title] Verwenden. Sie könnten zum Beispiel eine 'title-as-header'-Klasse hinzufügen und stattdessen ul.title-as-header::before verwenden, oder was auch immer Sie benötigen.

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

32
megaflop

Soweit mir bekannt ist, gibt es in den aktuellen HTML-Spezifikationen keine Vorkehrungen, um eine Beschriftung für eine Liste bereitzustellen, wie dies bei Tabellen der Fall ist. Ich bleibe dabei, entweder einen klassifizierten Absatz oder ein Header-Tag zu verwenden.

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

In Zukunft, wenn HTML5 eine breitere Akzeptanz findet, können Sie das <legend> und <figure>-Tags, um dies etwas semantischer zu erreichen.

Weitere Informationen finden Sie unter this post auf der W3C-Mailingliste.

12
sixthgear

Es gibt kein beschriftungsähnliches Tag für eine Liste wie in einer Tabelle. Also gebe ich einfach einen <Hx> (X abhängig von den zuvor verwendeten Headern).

1
I.devries

Sie können immer <label/>, um Ihrem Listenelement eine Bezeichnung zuzuordnen:

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