Wie semantisch stellen Sie eine Beschriftung, Titel oder label, um eine Liste in HTML

Was ist der richtige Weg, um eine semantische Beschriftung für eine HTML-Liste? Zum Beispiel, die folgende Liste ist ein "Titel"/"Beschriftung".

Obst

Apple
Birne
Orange

Wie sollte das Wort "Frucht" verarbeitet werden, in einer solchen Weise, dass es ist semantisch assoziiert mit der Liste selbst?

Die HTML-Spezifikationen müssen, fügen Sie Titel, Legende und Hinweis-Attribute oder tags zu den Elementen. Bilder, Tabellen, Listen und andere nicht-text-Objekte haben einen Titel, Legende und/oder der Hinweis angebracht, um Sie in Publikationen und nützliche markup language Bedürfnisse zu reflektieren, die Konvention.
Ich bin überrascht, diese Frage wurde bereits geschlossen, es ist deutlich über Semantik, nicht die ästhetik, oder andere subjektive Thema. Die Frage ist direkt mit der Frage "gibt es eine entsprechende semantisches markup für diese situation?" und, soweit HTML5 betrifft, ist die Antwort "ja".
Ich bin müde zu sehen, so viele Fragen, die mein Interesse als geschlossen und als "opinion-based". Es ist ein contraproductive. Lasst uns äußern unsere Meinungen. Auch diese Frage wird über "best practice". Menschen können über gültige Argumente in Bezug auf best practices (mit Quellen). Wir wollen diese Argumente. Es ist nicht alles über "Meinungen"
Ich habe gewählt, um re-öffnen Sie diese Frage bearbeitet und es Klang weniger Meinung-y. Jetzt ist es klar fragt für eine korrekte semantische Weg, um einen Titel hinzuzufügen.

InformationsquelleAutor Jon P | 2009-07-17

59

Zwar gibt es keine Bildunterschrift oder überschrift-element der Strukturierung Ihrer markup effektiv kann die gleiche Wirkung haben. Hier sind einige 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>
```
Definition Liste
```
<dl>
  <dt>Fruit</dt>
  <dd>Apple</dd>
  <dd>Pear</dd>
  <dd>Orange</dd>
</dl>
```
- Ich werde mit diesem als meine gewählte Antwort als nach einigen mehr Forschung ist die Definition der Liste wird wahrscheinlich füllen Sie mich braucht, hier gibt es mehrere Listen. Styling wird nun meine nächste Herausforderung.
- Nur die zweite option ist semantisch gültig.
- Wenn es mehrere Definitionen in der Liste, was ist falsch w/ a-definition, - Liste oder eine ungeordnete Liste?
- Bitte erläutern Sie. Fasziniert von Ihrem Kommentar, aber wie es steht es ist überhaupt nicht hilfreich, da Sie nicht erklären warum die anderen Optionen sind nicht 'semantisch gültige'
- Gut, das war fast 5 Jahren. Apfel, Birne und Orange sind nicht Definitionen von Obst. Dass die Regeln aus Variante 3. In option 1, die äußere Liste ist Inhalte werden nicht eine Liste.
- Lol, sorry, ich schaue nicht auf das Datum! Sehr cool von dir zu reagieren, wie auch immer 🙂 Re Option 1: Scheint mir eine Liste mit einem Element ist nicht ungültig... zumindest in meinem Kopf mit Apfel, Birne und Orange werden Unterpositionen der größeren posten Obst hat einen Sinn. Ich kann sehen, wie Sie könnten erweitern die äußere Liste mit Einträgen wie "Gemüse", "Fleisch" etc.
- Das ist alles wahr. Es ist falsche Semantik in das - Instanz nur, weil das nicht in die Frage. Das ist das problem mit dem bekommen von HTML-markup richtig ist, den tatsächlichen Inhalt und der Kontext es ist, in Fragen.
- Ich respektiere semantisch valides html so mehr, als die meisten Leute, die ich denke, aber manchmal sind die tags verfügbar, die in der html5-Bibliothek scheinen so willkürlich, viel weniger w3c Definitionen von Ihnen. Macht mich Frage mich, ob die Mühe, die ich Durchlaufen, um sicherzustellen, dass meine html5 sinnvoll ist lohnt sich das während. Egal, ich denke, so dass ein header innerhalb von <ol> oder <ul> wäre hilfreich.
- Ich Liebe diese Antwort, wollte aber noch eins hinzufügen (nicht sicher genug, um hinzuzufügen, um die Antwort) ich habe oft verwenden: <p>There are several types of fruit that are useful in this case: <ul><li>Apple</li><li>Pear</li><li>Orange</li></ul></p>
- Mit einem <ul> (oder einem anderen block-level-element) als Kind einer <p> ist ungültig nach HTML-Spezifikationen, die besagt, dass <p> nur "phrasing content" als Kind-Knoten.
- Sie sind richtig, HTML explizit erwähnt wird in diesem Fall als ungültig. Ich bin nicht einverstanden mit Ihre Unterscheidung zwischen Struktur und Logik, aber während ich warte auf meinen Sitz im Ausschuss, werde ich meine Schreibweise.
- Es ist eine "Beschreibung Liste" nicht eine "Definition List". Wenn wir reden über Semantik, das ist eine wichtige Unterscheidung. Und so weit, die Beschreibung ist die einzige Sache, die können Sie fügen Sie eine weitere, betonte Element ohne Verschachtelung.
- nach den Standards des W3C ist es eine Definitionsliste: w3.org/TR/html4/struct/lists.html#h-10.3.
- Interessant... MDN hat es aufgeführt als Beschreibung Liste... Oh! "Vor HTML5, [es] war bekannt als definition list". developer.mozilla.org/en-US/docs/Web/HTML/Element/dl. Dein link war für html4. Und auf diesen link, geben Sie ein Beispiel für eine dl repräsentiert einen dialog, mit jeder dt-Kennzeichnung die Lautsprecher und dd mit, was Sie sagen. Also ich bin mir ziemlich sicher, dass Sie, wie immer man Sie nennt, kann richtig genutzt werden, als auch so.
- das ist eine gute information. Vereinbart, ist der Ansatz geeignet scheint.
InformationsquelleAutor ahsteele
29

Option 1

HTML5 hat das figure und figcaption - Elemente, das finde ich ganz schön.

Beispiel:
```
<figure>
    <figcaption>Fruit</figcaption>
    <ul>
        <li>Apple</li>
        <li>Pear</li>
        <li>Orange</li>
    </ul>
</figure>
```
Diese sind leicht gestylt mit CSS.

Option 2

Mit CSS3 s ::before pseudo-element kann eine schöne Lösung:

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;
}
```
Können Sie, natürlich, verwenden Sie einen anderen Selektor als ul[title]; zum Beispiel könnten Sie fügen Sie eine "Titel-als-Kopf" - Klasse ul.title-as-header::before statt, oder was auch immer Sie brauchen.

Dies hat den Nebeneffekt, geben Sie eine QuickInfo für die ganze Liste. Wenn Sie nicht möchten, dass so ein tooltip wird, können Sie ein data-Attribut verwenden (z.B. <ul data-title="fruit"> und ul[data-title]::before { content: attr(data-title); }).
- Ihre Antwort ist, was die specs sagen. Ich Frage mich, warum es nicht in die Spitze gewählt.
- Wahrscheinlich, weil die top-Antwort ist 7 Jahre älter ist als dieser!
- Oh, die Zeit fliegt. Gar nicht bemerkt das Datum.
InformationsquelleAutor megaflop
12

Soweit ich weiß, gibt es keine Bestimmungen in der aktuellen HTML-Spezifikationen für die Bereitstellung einer Beschriftung für eine Liste, da es mit Tabellen. Ich würde bleiben, mit der Verwendung von entweder ein klassifiziert Absatz, oder ein header-tag für heute.
```
<h3>Fruit</h3>
<ul>
    <li>Apple</li>
    <li>Pear</li>
    <li>Orange</li>
</ul>
```
In der Zukunft, wenn HTML5 Gewinne breiteren Annahme, Sie werden in der Lage sein zu verwenden, die <legend> und <figure> tags um dies zu erreichen etwas mehr semantisch.

Sehen dieser Beitrag auf der W3C-mailing-Liste für weitere Informationen.

InformationsquelleAutor sixthgear
1

Es gibt keine caption-wie tag für eine Liste wie eine Tabelle hat. Also würde ich nur geben es ein <Hx> (x abhängig von Ihrem bisher verwendeten Header).

InformationsquelleAutor I.devries

Können Sie immer <label/> zu verknüpfen label zu Ihrer Liste element:

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

InformationsquelleAutor HelpNeeder

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.