Cómo proporcionar semánticamente un título, título o etiqueta para una lista en HTML

¿Cuál es la forma correcta de proporcionar un título semántico para una lista HTML? Por ejemplo, la siguiente lista tiene un "título" / "leyenda".

Fruta

• manzana
• Pera
• naranja

¿Cómo se debe manejar la palabra "fruta", de manera que se asocie semánticamente con la propia lista?

Si bien no hay ningún elemento de título o título, la estructuración de su marcado de manera efectiva puede tener el mismo efecto. Aquí hay algunas sugerencias:

Lista anidada

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

Encabezado antes de la lista

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

Lista de definiciones

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

Opción 1

HTML5 tiene los elementos figureyfigcaption , que encuentro que funcionan bastante bien.

Ejemplo:

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

A continuación, se pueden diseñar fácilmente con CSS.

opcion 2

Usar CSS3's :: before pseudo-element puede ser una buena solución:

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

Por supuesto, puede utilizar un selector diferente a ul[title]; por ejemplo, puede agregar una clase 'título como encabezado' y usar ul.title-as-header::beforeen su lugar, o lo que necesite.

Esto tiene el efecto secundario de brindarle información sobre herramientas para toda la lista. Si no desea tal información sobre herramientas, puede usar un atributo de datos en su lugar (por ejemplo, <ul data-title="fruit">y ul[data-title]::before { content: attr(data-title); }).

Hasta donde yo sé, no hay disposiciones en las especificaciones HTML actuales para proporcionar un título para una lista, como ocurre con las tablas. Me quedaría usando un párrafo clasificado o una etiqueta de encabezado por ahora.

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

En el futuro, cuando HTML5 obtenga una adopción más amplia, podrá utilizar las etiquetas <legend>y <figure>para lograr esto de forma un poco más semántica.

Consulte esta publicación en la lista de correo del W3C para obtener más información.

Para asegurarse de que los lectores de pantalla conecten la lista con un encabezado asociado, puede usar aria-labelledbyconectado a un encabezado con un me idgusta:

<h3 id="fruit-id">Fruit</h3>

<ul aria-labelledby="fruit-id">
  <li>Apple</li>
  <li>Pear</li>
  <li>Orange</li>
</ul>

Como se señaló en una respuesta anterior, asegúrese de que su nivel de encabezado siga el orden de encabezado en su documento.

No hay una etiqueta similar a un título para una lista como la que tiene una tabla. Así que solo le daría una <Hx>(x dependiendo de los encabezados utilizados anteriormente).

Sé que esto es antiguo, pero quería agregar la respuesta que encontré para las personas futuras: https://www.w3.org/MarkUp/html3/listheader.html

usa el <lh>elemento:

<ul>
  <lh>Types of fruit:</lh>
  <li>Apple</li>
  <li>Orange</li>
  <li>Grape</li>
</ul>

Como estaba tratando de encontrar una solución con soporte para navegadores más antiguos, tengo lo que podría ser una solución demasiado simplificada. Usando estilos de visualización de tabla e ID / clases:

    <ul>
        <li id="listCaption">My List</li>
        <li>first item</li>
        <li>second item</li>
        <li>third item</li>
      </ul>

Luego aplique el display: table-row;estilo al elemento en CSS:

    li#listCaption {
      display: table-row;
      font-size: larger;
      text-decoration: underline; }

Esto funciona mucho mejor si está utilizando una lista de descripción, que es lo que estaba haciendo cuando tuve la misma pregunta. En ese caso, puede usar <div>en HTML y display: table-caption;CSS, ya que los elementos div son compatibles con la lista dl:

    <dl>
        <div id="caption">Table Caption</div>
        <dt>term</dt>
        <dd>definition</dd>
    </dl>

En CSS, puede aplicar varios estilos a la leyenda:

    #caption {
        display: table-caption;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        background: transparent;
        caption-side: top;
        text-align: center; }

Debo señalar que table-captionno funciona tan bien enul/ol ya que se trata como un elemento de bloque y el texto se alineará verticalmente, lo que probablemente no desee.

Probé esto tanto en Firefox como en Chrome.

Siempre puede usar <label/>para asociar la etiqueta a su elemento de 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>