Como fornecer semanticamente uma legenda, título ou rótulo para uma lista em HTML

Question

O que é a maneira correta de fornecer um semântica legenda para uma lista de HTML? Por exemplo, a seguinte lista tem um "título" / "caption".

Fruit

• Apple
• Pear
• Orange

Como deve ser a palavra "fruto" ser tratado, de tal maneira que ele é semanticamente associadas com a própria lista?

Answer 1

Enquanto não há nenhuma legenda ou elemento título estruturação sua marcação efetivamente pode ter o mesmo efeito. Aqui estão algumas sugestões:

Lista Nested

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

---

Direcção Antes List

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

---

Lista Definição

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

Answer 2

Opção 1

HTML5 tem os elementos figure e figcaption , que eu encontrar trabalho muito bem.

Exemplo:

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

Estes são então denominado facilmente com CSS.

---

Opção 2

Usando do CSS3 :: antes de pseudo-elemento pode ser uma boa solução:

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

Você pode, é claro, usar um seletor diferente do que ul[title]; por exemplo, você pode adicionar um 'title-as-header' classe e uso ul.title-as-header::before vez, ou o que você precisa.

Este tem o efeito colateral de dar-lhe uma dica de ferramenta para toda a lista. Se você não quer que tal dica, você poderia usar um atributo de dados em vez (por exemplo, <ul data-title="fruit"> e ul[data-title]::before { content: attr(data-title); }).

Answer 3

Tanto quanto eu sei, não há disposições em especificações HTML atuais para fornecer uma legenda para uma lista, como há com mesas. Eu ficaria com usando um parágrafo classificados, ou uma tag de cabeçalho para agora.

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

No futuro, quando a adoção do HTML5 ganhos mais amplo, você será capaz de usar as tags <legend> e <figure> para alcançar este objetivo um pouco mais semanticamente.

Consulte este post na lista de discussão W3C para mais informações.

Answer 4

Não há tag de legenda, como para uma lista como uma tabela tem. Então, eu tinha acabado de dar-lhe um <Hx> (x dependendo de seus cabeçalhos usados ??anteriormente).

Answer 5

Você sempre pode usar <label/> ao rótulo associado ao seu elemento da 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>