Cómo agregar semánticamente un encabezado a una lista

120

Esto me ha estado molestando por un tiempo y me pregunto si hay algún consenso sobre cómo hacerlo correctamente. Cuando estoy usando una lista HTML, ¿cómo incluyo semánticamente un encabezado para la lista?

Una opción es esta:

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

pero semánticamente el <h3>encabezado no está explícitamente asociado con el<ul>

Otra opción es esta:

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

pero esto parece un poco sucio, ya que el título no es realmente uno de los elementos de la lista.

Esta opción no está permitida por el W3C:

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

como <ul>'s sólo pueden contener uno o más <li>' s

El antiguo "título de lista" <lh>tiene más sentido

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

pero, por supuesto, no forma parte oficialmente de HTML

Escuché que sugirió que usemos <label>como un formulario:

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

pero esto es un poco extraño y no se validará de todos modos.

Es fácil ver los problemas semánticos al intentar diseñar los encabezados de mi lista, donde termino necesitando poner mis <h3>etiquetas dentro de la primera <li>y apuntar a ellas para diseñar con algo como:

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

horrores! Pero al menos de esta manera puedo controlar todo <ul>, el encabezado y todo, diseñando la uletiqueta.

¿Cuál es la forma correcta de hacer esto? ¿Algunas ideas?

Tomas Mulder
fuente
5
Algunas personas utilizan LH, pero es posible que no se den cuenta de que en realidad no están utilizando una etiqueta HTML "real", sino que simplemente están creando un nombre de etiqueta aleatorio. Los navegadores tratan dicha etiqueta como un elemento en línea. Algunos te permitirán poner una clase y CSS en él.
Glen Little
1
Posible duplicado de stackoverflow.com/questions/2417891/…
goodeye

Respuestas:

81

Como ya ha dicho Felipe Alsacreations, la primera opción está bien.

Si desea asegurarse de que nada debajo de la lista se interprete como perteneciente al encabezado, para eso son exactamente los elementos de contenido de secciones de HTML5. Entonces, por ejemplo, podrías hacer

<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
fuente
6
Esto tiene mucho sentido; Gracias. Por supuesto, si vamos a usar HTML5, el encabezado debe estar <h1>dentro de, <section>ya que es el encabezado de nivel superior dentro de esas etiquetas.
Tomas Mulder
6
Puedes usar <h1>allí, seguro. Pero también <h3>está bien. Siempre que no use un encabezado de nivel superior dentro de la misma sección.
Alohci
4
Debemos ceñirnos a los encabezados h1..h6 (aquí h2 y h3) siempre que los navegadores, lectores de pantalla y otras tecnologías de asistencia no describan correctamente los encabezados como se indica en HTML5 (consulte coding.smashingmagazine.com/2011/08/16/ ... - buscar "cejas" ...). No estoy seguro de cuánto evolucionó en unos meses, pero probablemente no tan rápido con respecto a la API de accesibilidad de los navegadores: /
FelipeAls
3
@davidjb: ten cuidado, eso no es exactamente lo que dice ese consejo. Dice que debe usarse h1-h6 para proporcionar niveles de encabezado. es decir, que los elementos h1 solo deben usarse para el nivel más alto de encabezado en la página. No dice que solo pueda haber un título en ese nivel más alto. Por cierto, los fabricantes de navegadores han dejado claro que no tienen la intención de implementar el algoritmo de esquema, por lo que hay pocas esperanzas de que la situación mejore rápidamente.
Alohci
2
@Michele - Eso depende de si te refieres visualmente en el medio o semánticamente en el medio. Si es visual, entonces es un problema para que CSS lo resuelva, e idealmente no cambiaría su marcado. Si es semánticamente, entonces no estoy seguro de qué tipo de lista tienes. Puede ser que tenga dos listas, no una.
Alohci
53

En este caso, usaría una lista de definiciones de la siguiente manera:

<dl>
  <dt>Fruits I like:</dt>
  <dd>Apples</dd>
  <dd>Bananas</dd>
  <dd>Oranges</dd>
</dl>
Duncan Tidd
fuente
5
Para una lista desordenada de cosas descritas por una etiqueta, como el ejemplo anterior, creo que esta es la mejor opción. La semántica coincide exactamente: aquí hay un término o etiqueta (Frutas que me gustan), y aquí hay elementos que corresponden a esa etiqueta (cada fruta).
Andrew
1
Es literalmente una lista de descripciones . Esta es la mejor solución en mi opinión.
Derek 朕 會 功夫
display: list-item ... CSS para mostrar las viñetas. Buena respuesta.
Mycah
9

Tu primera opción es la buena. Es la menos problemática y ya ha encontrado las razones correctas por las que no puede usar las otras opciones.

Por cierto, su encabezado ESTÁ asociado explícitamente con <ul>: ¡está justo antes de la lista! ;)

editar: Steve Faulkner, uno de los editores de W3C HTML5 y 5.1 ha esbozado una definición de un ltelemento . Es un borrador no oficial que discutirá para HTML 5.2, nada más todavía.

FelipeAls
fuente
1
Estoy de acuerdo, las otras soluciones no tienen ningún sentido
Es cierto, es como usar un encabezado sobre un <p>. Pero aún me gustaría algo un poco más explícito, algo así como el foratributo de un <label>' or the <th> `para tablas. Creo que la <lh>opción tendría más sentido si fuera compatible con el W3C.
Tomas Mulder
5

un <div> es una división lógica en su contenido, semánticamente esta sería mi primera opción si quisiera agrupar el encabezado con la lista:

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

entonces puede usar el siguiente CSS para diseñar todo junto como una unidad

.mydiv{}
.mydiv h3{}
.mydiv ul{}
.mydiv ul li{}
etc...
Evert
fuente
Buena elección, al menos a efectos de estilismo.
Tomas Mulder
Hablando semánticamente, div no significa nada, no entiendo por qué sería su primera opción (por un problema de estilo). : x
Rambobafet
@Rambobafet, ¡gran nigromancia! Esa respuesta fue de 2012, antes de que html5 introdujera secciones y otras opciones más semánticamente correctas. Algunos navegadores ya admitían la sección, pero otros no. "div" es la abreviatura de "división lógica" en su contenido, por lo que en ese momento esa era la mejor manera de dividir su contenido para diseñar.
Evert
Tienes toda la razón, no vi la parte "'12" :)
Rambobafet
0

Intente definir una nueva clase, ulheader, en css. p.ulheader ~ ul selecciona todo lo que sigue inmediatamente a My Header

p.ulheader ~ ul {
   margin-top:0;
{
p.ulheader {
   margin-bottom;0;
}
jpenkethman
fuente
-2

Según w3.org (tenga en cuenta que este enlace está en el borrador de la especificación HTML 3.0 caducado hace mucho tiempo ):

Una lista desordenada suele ser una lista de elementos con viñetas. HTML 3.0 le brinda la capacidad de personalizar las viñetas, prescindir de las viñetas y ajustar los elementos de la lista horizontal o verticalmente para listas de varias columnas.

La etiqueta de la lista de apertura debe ser <UL>. Le sigue un encabezado de lista opcional ( <LH>título </LH>) y luego el primer elemento de lista ( <LI>). Por ejemplo:

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

que podría representarse como:

Fruta de mesa

  • manzanas
  • naranjas
  • plátanos

Nota: Algunos documentos heredados pueden incluir encabezados o texto sin formato antes del primer elemento LI. Se recomienda a los implementadores de agentes de usuario HTML 3.0 que tengan en cuenta esta posibilidad para manejar documentos heredados mal formados.

Jfields
fuente
8
Votar en contra porque este enlace "según" apunta al borrador de la especificación 3.0 de 1995, que nunca salió del borrador. La etiqueta "lh" nunca se convirtió en una especificación HTML que no fuera un borrador.
Brooks Moses
HTML 3.0Vaya, es un documento muy antiguo.
Derek 朕 會 功夫