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

82

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?

Jon P.
quelle
Die HTML-Spezifikationen müssen den Elementen Beschriftungs-, Legenden- und Notizattribute oder Tags hinzufügen. Bilder, Tabellen, Listen und andere Nicht-Text-Objekte sind mit einem Titel, einer Legende und / oder einer Notiz in Veröffentlichungen versehen, und eine nützliche Auszeichnungssprache muss diese Konvention widerspiegeln.
9
Ich bin überrascht, dass diese Frage geschlossen wurde. Es geht eindeutig um Semantik, nicht um Ästhetik oder ein anderes subjektives Thema. Die Frage lautet direkt: "Gibt es ein geeignetes semantisches Markup für diese Situation?" und in Bezug auf HTML5 lautet die Antwort "Ja" .
Daiscog
9
Ich bin es leid, so viele Fragen zu sehen, die für mich von Interesse sind, als "meinungsbasiert" geschlossen zu werden. Es ist kontraproduktiv. Lassen Sie uns unsere Meinung äußern. Bei dieser Frage geht es auch um "Best Practice". Menschen können gültige Argumente bezüglich Best Practices (mit Quellen) haben. Wir wollen diese Argumente. Es geht nicht nur um "Meinungen"
Mladen Adamovic
2
Ich habe dafür gestimmt, diese Frage erneut zu öffnen und sie so zu bearbeiten, dass sie weniger meinungsbildend klingt. Jetzt wird eindeutig nach einer korrekten semantischen Methode zum Hinzufügen eines Titels gefragt.
Lazar Ljubenović

Antworten:

72

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>
ahsteele
quelle
2
@alohci Wenn die Liste weitere Definitionen enthält, was ist mit einer Definitionsliste oder einer ungeordneten Liste falsch?
Ahsteele
2
@Alohci: Bitte näher erläutern. Fasziniert von Ihrem Kommentar, aber so wie es aussieht, ist es überhaupt nicht hilfreich, da Sie nicht erklären, warum die anderen Optionen nicht "semantisch gültig" sind
Stijn de Witt
4
@StijndeWitt - Das ist alles wahr. In diesem Fall ist die Semantik nur deshalb falsch, weil dies nicht in Frage kommt. Das ist das Problem, wenn das HTML-Markup korrekt ist, der tatsächliche Inhalt und der Kontext, auf den es ankommt.
Alohci
2
@JeffereyCave Ein <ul>(oder ein anderes Element auf Blockebene) als untergeordnetes Element von a zu haben, <p>ist gemäß der HTML-Spezifikation ungültig , die besagt, dass <p>nur "Phrasierungsinhalte" als untergeordnete Knoten vorhanden sein können.
Daiscog
4
@ahsteele Interessant ... MDN hat es als Beschreibungsliste aufgeführt ... Oh! "Vor HTML5 war [es] als Definitionsliste bekannt." developer.mozilla.org/en-US/docs/Web/HTML/Element/dl . Ihr Link war für HTML4. Und auf diesem Link geben sie ein Beispiel für ein dl, das einen Dialog darstellt, wobei jedes dt den Sprecher markiert und dd das hat, was sie sagen. Ich bin mir also ziemlich sicher, dass sie, wie auch immer sie genannt werden, auch auf diese Weise richtig verwendet werden können.
RoboticRenaissance
54

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

Daiscog
quelle
Ihre Antwort ist, was die Spezifikationen sagen. Ich frage mich, warum es nicht das am besten gewählte ist.
Ahmed Mahmoud
@AhmedMahmoud Wahrscheinlich, weil die Top-Antwort 7 Jahre älter ist als diese!
Daiscog
Oh, die Zeit vergeht wie im Fluge. Ich habe das Datum nicht bemerkt.
Ahmed Mahmoud
Bedeutet das, figuredass Inhalte verwendet werden können, die sich von Bildern unterscheiden?
CodeGust
1
@ CodeGust absolut
Daiscog
13

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.

Sechster Gang
quelle
4

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.

Corey Bruyere
quelle
1

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.

I.devries
quelle
1

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>
rnewman
quelle
Hinweis: Dies wurde in einem Entwurf von HTML 3.0 erwähnt, jedoch nie in HTML 3.2 enthalten. Obwohl es in einigen Browsern möglicherweise ordnungsgemäß gerendert wird, wird es nicht unterstützt.
Nathan Champion
0

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.

harrekki
quelle
-2

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>
HelpNeeder
quelle
4
Dies ist ungültig. Die HTML - Spezifikation besagt , dass das forAttribut muss die ID eines seiner markierbare Elements , das UL(zum Zeitpunkt des Schreibens) nicht .
Daiscog