Come semanticamente fornire una didascalia, un titolo o un'etichetta per una lista in HTML

Question

Qual è il modo corretto di fornire un semantica didascalia per una lista in formato HTML?Per esempio, l'elenco riportato di seguito è un "titolo"/"didascalia".

Frutta

• Apple
• Pera
• Arancione

Come dovrebbe essere la parola "frutto" essere trattati, in modo tale che esso sia semanticamente associati con la lista stessa?

Answer 1

Mentre non vi è alcuna didascalia o elemento titolo strutturare il codice in modo efficace può avere lo stesso effetto.Qui sono alcuni suggerimenti:

Elenco Nidificato

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

---

Titolo Prima dell'Elenco

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

---

Definizione Elenco

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

Answer 2

Opzione 1

HTML5 è il figure e figcaption elementi, che trovo abbastanza bene.

Esempio:

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

Questi vengono poi facilmente in stile con i CSS.

---

Opzione 2

Utilizzando CSS3 s ::prima di pseudo-elemento può essere una bella soluzione:

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

È possibile, naturalmente, utilizzare un selettore di ul[title];per esempio, si potrebbe aggiungere un "titolo-come-header' di classe e di utilizzare ul.title-as-header::before invece, o qualsiasi cosa avete bisogno.

Questo ha l'effetto collaterale di dare un suggerimento per l'intera lista.Se non si desidera che un tale suggerimento, si potrebbe utilizzare un attributo di dati invece (ad esempio, <ul data-title="fruit"> e ul[data-title]::before { content: attr(data-title); }).

Answer 3

Per quanto ne so, non ci sono disposizioni in corrente specifiche HTML per fornire una didascalia per un elenco, come ci sono con le tabelle.Mi piacerebbe rimanere con l'utilizzo di un classificati paragrafo, o un tag di intestazione, per ora.

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

In futuro, quando HTML5 guadagni più ampia adozione, si sarà in grado di utilizzare il <legend> e <figure> tag per realizzare questo un po ' di più dal punto di vista semantico.

Vedere questo post il W3C mailing list per ulteriori informazioni.

Answer 4

Non c'è nessuna didascalia-come tag per una lista come una tabella.Così vorrei solo dare un <Hx> (x, a seconda del vostro usato in precedenza intestazioni).

Answer 5

Puoi sempre utilizzare <label/> per associare l'etichetta per il vostro elemento della lista:

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