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

83

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

Jon P
fuente
Las especificaciones HTML deben agregar atributos o etiquetas de título, leyenda y nota a los elementos. Las imágenes, tablas, listas y otros objetos que no son de texto tienen un título, una leyenda y / o una nota adjunta en las publicaciones, y un lenguaje de marcado útil debe reflejar esa convención.
9
Me sorprende que esta pregunta se haya cerrado; se trata claramente de semántica, no de estética o cualquier otro tema subjetivo. La pregunta es directamente "¿Existe un marcado semántico apropiado para esta situación?" y, en lo que respecta a HTML5, la respuesta es "sí" .
daiscog
9
Estoy cansado de ver tantas preguntas que son de mi interés cerradas como "basadas en opiniones". Es un contraproducente. Expresemos nuestras opiniones. Además, esta pregunta trata sobre las "mejores prácticas". Las personas pueden tener argumentos válidos sobre las mejores prácticas (con fuentes). Queremos esos argumentos. No se trata solo de "opiniones"
Mladen Adamovic
2
He votado para reabrir esta pregunta y la he editado para que suene con menos opiniones. Ahora claramente pide una forma semántica correcta de agregar un título.
Lazar Ljubenović

Respuestas:

73

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>
ahsteele
fuente
2
@alohci Si va a haber más definiciones en la lista, ¿qué pasa con una lista de definiciones o una lista desordenada?
ahsteele
2
@Alohci: Por favor, explique. Intrigado por su comentario, pero tal como está, no es útil en absoluto, ya que no explica por qué las otras opciones no son 'semánticamente válidas'
Stijn de Witt
4
@StijndeWitt - Eso es todo cierto. Es una semántica incorrecta en este caso solo porque eso no está en la pregunta. Ese es el problema de conseguir que el marcado HTML sea correcto, el contenido real y el contexto en el que se encuentran son importantes.
Alohci
2
@JeffereyCave Tener a <ul>(o cualquier otro elemento a nivel de bloque) como hijo de a <p>no es válido según la especificación HTML , que establece que <p>solo puede tener "contenido de fraseo" como nodos hijos.
daiscog
4
@ahsteele Interesante ... MDN lo tiene en la lista de descripción ... ¡Oh! "Antes de HTML5, se conocía como una lista de definiciones". developer.mozilla.org/en-US/docs/Web/HTML/Element/dl . Su enlace era para html4. Y en ese enlace, dan un ejemplo de un dl que representa un diálogo, con cada dt marcando al hablante y dd teniendo lo que dicen. Así que estoy bastante seguro de que, como se llamen, también se pueden usar correctamente de esta manera.
RoboticRenaissance
54

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

daiscog
fuente
Tu respuesta es lo que dicen las especificaciones. Me pregunto por qué no es el más votado.
Ahmed Mahmoud
@AhmedMahmoud ¡Probablemente porque la respuesta principal es 7 años mayor que esta!
daiscog
Oh, el tiempo vuela. No me di cuenta de la fecha.
Ahmed Mahmoud
¿Eso significa que figurese puede usar con contenido diferente a las imágenes?
CodeGust
1
@CodeGust absolutamente
daiscog
13

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.

sexto engranaje
fuente
4

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.

Corey Bruyere
fuente
1

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

I.devries
fuente
1

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>
rnewman
fuente
Nota: esto se mencionó en un borrador de HTML 3.0, pero nunca se incluyó en HTML 3.2, por lo que, aunque puede representarse correctamente en algunos navegadores, no es compatible.
Nathan Champion
0

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.

harrekki
fuente
-2

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>
HelpNeeder
fuente
4
Esto no es válido. La especificación HTML establece que el foratributo debe ser el ID de un elemento etiquetable , que UL(en el momento de escribir este artículo) no lo es .
daiscog