Como adicionar semanticamente título a uma lista

120

Isso tem me incomodado por um tempo e estou me perguntando se há algum consenso sobre como fazer isso da maneira correta. Quando estou usando uma lista HTML, como posso incluir semanticamente um cabeçalho para a lista?

Uma opção é esta:

<h3>Fruits I Like:</h3>
<ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

mas semanticamente o <h3>título não está explicitamente associado ao<ul>

Outra opção é esta:

<ul>
    <li><h3>Fruits I Like:</h3></li>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

mas isso parece um pouco sujo, pois o título não é realmente um dos itens da lista.

Esta opção não é permitida pelo W3C:

<ul>
    <h3>Fruits I Like:</h3>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

as <ul>'s só podem conter um ou mais <li>' s

O antigo "cabeçalho da lista" <lh>faz mais sentido

<ul>
    <lh>Fruits I Like:</lh>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

mas é claro que não faz parte oficial do HTML

Já ouvi a sugestão de usar <label>como um formulário:

<ul>
    <label>Fruits I Like:</label>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

mas isso é um pouco estranho e não validará de qualquer maneira.

É fácil ver os problemas semânticos ao tentar estilizar os cabeçalhos da minha lista, onde acabo precisando colocar minhas <h3>tags dentro do primeiro <li>e direcioná-las para estilização com algo como:

ul li:first-of-type {
    list-style: none;
    margin-left: -1em;
    /*some other header styles*/
}

horrores! Mas, pelo menos dessa forma, posso controlar o todo <ul>, título e tudo, estilizando a ultag.

Qual é a maneira correta de fazer isso? Alguma ideia?

Tomas Mulder
fonte
5
Algumas pessoas estão usando LH, mas podem não perceber que não estão realmente usando uma tag HTML "real", mas apenas criando um nome de tag aleatório. Os navegadores tratam essa tag como um elemento embutido. Alguns permitirão que você coloque uma classe e css nele.
Glen Little
1
Possível duplicata de stackoverflow.com/questions/2417891/…
goodeye

Respostas:

81

Como já disse Felipe Alsacreations, a primeira opção é boa.

Se você quiser garantir que nada abaixo da lista seja interpretado como pertencente ao título, é exatamente para isso que servem os elementos de conteúdo de seccionamento HTML5. Então, por exemplo, você poderia fazer

<h2>About Fruits</h2>
<section>
  <h3>Fruits I Like:</h3>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
  </ul>
</section>
<!-- anything here is part of the "About Fruits" section but does not 
     belong to the "Fruits I Like" section. -->
Alohci
fonte
6
Isso faz muitosentido; obrigado. Obviamente, se vamos usar HTML5, o título deve estar <h1>dentro de <section>, pois é o título de nível superior dentro dessas tags.
Tomas Mulder de
6
Você pode usar <h1>lá, com certeza. Mas também <h3>está bom. Contanto que você não use um título de nível superior na mesma seção.
Alohci de
4
Devemos nos ater aos cabeçalhos h1..h6 (aqui h2 e h3), desde que navegadores, leitores de tela e outras tecnologias assistivas não descrevam os cabeçalhos corretamente conforme declarado em HTML5 (consulte coding.smashingmagazine.com/2011/08/16/ … - pesquise "sobrancelhas" ...). Não tenho certeza do quanto evoluiu em alguns meses, mas provavelmente não tão rápido no que diz respeito à API de acessibilidade de navegadores: /
FelipeAls
3
@davidjb - tenha cuidado, não é exatamente isso que o conselho diz. Ele diz que h1-h6 deve ser usado para fornecer os níveis de título. ou seja, os elementos h1 devem ser usados ​​apenas para o nível mais alto de título na página. Não quer dizer que só pode haver um título nesse nível mais alto. A propósito, os fabricantes de navegadores deixaram claro que não têm intenção de implementar o algoritmo de estrutura de tópicos, portanto, há pouca esperança de que a situação melhore rapidamente.
Alohci
2
@Michele - Depende se você quer dizer visualmente no meio ou semanticamente no meio. Se for visualmente, isso é um problema para o CSS resolver e, de preferência, não mudaria sua marcação. Se semanticamente, não tenho certeza de que tipo de lista você tem. Pode ser que você tenha duas listas, não uma.
Alohci
53

Nesse caso, eu usaria uma lista de definições da seguinte forma:

<dl>
  <dt>Fruits I like:</dt>
  <dd>Apples</dd>
  <dd>Bananas</dd>
  <dd>Oranges</dd>
</dl>
Duncan Tidd
fonte
5
Para uma lista não ordenada de coisas descritas por um rótulo, como o exemplo acima, acho que esta é a melhor escolha. A semântica corresponde exatamente: aqui está um termo ou rótulo (Frutas que eu gosto) e aqui estão os itens que correspondem a esse rótulo (cada fruta).
Andrew
1
É literalmente uma lista de descrições . Esta é a melhor solução para mim.
Derek 朕 會 功夫
display: list-item ... CSS para exibir os marcadores. Boa resposta.
Mycah
9

Sua primeira opção é a boa. É o menos problemático e você já encontrou os motivos corretos pelos quais não poderia usar as outras opções.

A propósito, seu título ESTÁ explicitamente associado ao <ul>: está logo antes da lista! ;)

editar: Steve Faulkner, um dos editores do W3C HTML5 e 5.1 esboçou uma definição de um ltelemento . Esse é um rascunho não oficial que ele discutirá para HTML 5.2, nada mais ainda.

FelipeAls
fonte
1
Eu concordo, as outras soluções não fazem sentido algum
Verdade, é como usar um cabeçalho sobre um <p>. Mas eu ainda gostaria de algo um pouco mais explícito, algo como o foratributo de um <label>' or the <th> `para tabelas. Acho que a <lh>opção faria mais sentido se fosse realmente suportada pelo W3C.
Tomas Mulder de
5

um <div> é uma divisão lógica em seu conteúdo, semanticamente esta seria minha primeira escolha se eu quisesse agrupar o título com a lista:

<div class="mydiv">
    <h3>The heading</h3>
    <ul>
       <li>item</li>
       <li>item</li>
       <li>item</li>
    </ul>
</div>

então você pode usar o seguinte css para estilizar tudo junto como uma unidade

.mydiv{}
.mydiv h3{}
.mydiv ul{}
.mydiv ul li{}
etc...
Evert
fonte
Boa escolha, pelo menos para fins de estilo.
Tomas Mulder de
Semanticalmente falando, div não significa nada, não entendo por que seria sua primeira escolha (fora da questão de estilo)? : x
Rambobafet
@Rambobafet, ótima necromancia! Essa resposta foi de 2012, antes de html5 introduzir seções e outras opções semanticamente corretas. Alguns navegadores já suportavam a seção, mas outros não. "div" é a abreviação de "divisão lógica" em seu conteúdo, então, na época, essa era a melhor maneira de dividir seu conteúdo para estilização.
Evert
Você está perfeitamente certo, não viu a parte "'12" :)
Rambobafet
0

Tente definir uma nova classe, ulheader, em css. p.ulheader ~ ul seleciona tudo o que segue imediatamente Meu cabeçalho

p.ulheader ~ ul {
   margin-top:0;
{
p.ulheader {
   margin-bottom;0;
}
Jpenkethman
fonte
-2

De acordo com w3.org (observe que este link está na especificação HTML 3.0 de rascunho há muito expirada ):

Uma lista não ordenada normalmente é uma lista de itens com marcadores. O HTML 3.0 oferece a capacidade de personalizar os marcadores, dispensar marcadores e agrupar itens da lista horizontal ou verticalmente para listas com várias colunas.

A marca da lista de abertura deve ser <UL>. Ele é seguido por um cabeçalho de lista opcional ( <LH>legenda </LH>) e, em seguida, pelo primeiro item da lista ( <LI>). Por exemplo:

<UL>
  <LH>Table Fruit</LH>
  <LI>apples
  <LI>oranges
  <LI>bananas
</UL>

que pode ser processado como:

Fruta de mesa

  • maçãs
  • laranjas
  • bananas

Nota: Alguns documentos legados podem incluir cabeçalhos ou texto simples antes do primeiro elemento LI. Os implementadores de agentes de usuário HTML 3.0 são aconselhados a cuidar dessa possibilidade, a fim de lidar com documentos legados mal formados.

Jfields
fonte
8
Downvoting porque este link "de acordo com" aponta para a especificação do draft 3.0 de 1995, que nunca saiu do draft. A tag "lh" nunca se tornou uma especificação HTML que não fosse de rascunho.
Brooks Moses de
HTML 3.0Uau, esse é um documento muito antigo.
Derek 朕 會 功夫