poner - listas en html ejemplos

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

Question

Esto me ha estado molestando por un tiempo, y me pregunto si hay algún consenso sobre cómo hacer esto 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 encabezado <h3> 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 encabezado 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>

ya que <ul> ''s solo puede contener uno o más <li> '' s

El viejo "encabezado 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 es oficialmente parte de HTML

He oído que sugerimos que usemos <label> como si fuera 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 validará de todos modos.

Es fácil ver los problemas semánticos al intentar diseñar mis encabezados de lista, donde finalmente necesito poner mis etiquetas <h3> en el primer <li> y seleccionarlas para el estilo 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 toda la <ul> , encabezado y todo, al diseñar la etiqueta ul .

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

Answer 1

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

Si desea asegurarse de que nada debajo de la lista se interprete como perteneciente al encabezado, eso es exactamente para lo que son los elementos de contenido de sección 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. -->

Answer 2

De acuerdo con w3.org (tenga en cuenta que este enlace está en el borrador expirado de la especificación HTML 3.0 ):

Una lista desordenada generalmente es una lista con viñetas de elementos. HTML 3.0 le ofrece la posibilidad de personalizar las viñetas, prescindir de viñetas y ajustar los elementos de la lista horizontal o verticalmente para listas de columnas múltiples.

La etiqueta de la lista de apertura debe ser <UL> . Le sigue un encabezado de lista opcional ( <LH> leyenda </LH> ) y luego el primer elemento de la 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 aconseja a los implementadores de agentes de usuario HTML 3.0 que atiendan esta posibilidad para manejar documentos heredados mal formados.

Answer 3

En este caso, usaría una lista de definición así:

<dl>
  <dt>Fruits I like:</dt>
  <dd>Apples</dd>
  <dd>Bananas</dd>
  <dd>Oranges</dd>
</dl>

Answer 4

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

Answer 5

Puse el encabezado dentro del ul. No hay una regla que diga que UL debe contener solo elementos LI.

Answer 6

También puede usar el elemento <figure> para vincular un encabezado a su lista de esta manera:

<figure>
    <figcaption>My favorite fruits</figcaption>    
       <ul>
          <li>Banana</li>
          <li>Orange</li>
          <li>Chocolate</li>
       </ul>
</figure>

Fuente: https://www.w3.org/TR/2017/WD-html53-20171214/single-page.html#the-li-element (Ejemplo 162)

Answer 7

Tu primera opción es la buena. Es el menos problemático y ya has encontrado las razones correctas por las que no puedes usar las otras opciones.

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

editar: Steve Faulkner, uno de los editores de W3C HTML5 y 5.1, esbozó una definición de elemento lt . Es un borrador no oficial que discutirá para HTML 5.2, nada más.

Answer 8

a <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 puedes usar el siguiente CSS para diseñar todo junto como una unidad

.mydiv{}
.mydiv h3{}
.mydiv ul{}
.mydiv ul li{}
etc...