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

Question

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

Fruta

• Manzana
• Pera
• Naranja

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

Answer 1

Si bien no hay un título o un elemento de encabezado, estructurar 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 anterior a 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>

Answer 2

Opción 1

HTML5 tiene la figure y elementos figcaption , que me parece el trabajo bastante bien.

Ejemplo:

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

Estos son entonces fácilmente de estilo con CSS.

---

Opción 2

El uso de CSS 3 :: antes de pseudo-elemento 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;
}

Puede, por supuesto, utilizar un selector diferente que ul[title]; por ejemplo, se podría añadir una clase Título-as-header 'y utilizar ul.title-as-header::before lugar, o lo que usted necesita.

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

Answer 3

Por lo que yo sé, no existen disposiciones en las especificaciones de HTML actuales para proporcionar una leyenda para una lista, ya que hay con las tablas. Me quedaría con el uso de un párrafo o bien clasificada, o una etiqueta de cabecera por ahora.

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

En el futuro, cuando HTML5 gana una adopción más amplia, usted será capaz de utilizar las etiquetas <legend> y <figure> de lograr esto un poco más semánticamente.

este post en la lista de correo del W3C para obtener más información.

Answer 4

No hay ninguna etiqueta de leyenda como para obtener una lista como una tabla tiene. Así que yo sólo le dan un <Hx> (x dependiendo de sus cabeceras utilizadas anteriormente).

Answer 5

Siempre se puede utilizar para asociar <label/> etiqueta al elemento de la 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>