H48Usar ol, ul y dl para listas o grupos de enlaces

Aplicabilidad

HTML

Descripción

El objetivo de esta técnica es crear listas de elementos relacionados usando los elementos de lista adecuados a su finalidad. El elemento ol se usa cuando la lista está ordenada y el elemento ul cuando no lo está. Las listas de descripción (dl) se usan para agrupar pares nombre-valor de información, por ejemplo: términos y definiciones o preguntas y respuestas. Aunque el uso de este marcado puede hacer las listas más legibles, no todas las listas necesitan marcado. Por ejemplo, las frases que contienen enumeraciones separadas por comas pueden no necesitar marcado de lista.

Cuando se usa un marcado que da formato visual de lista a los elementos pero no indica la relación de lista, los usuarios pueden tener dificultades para navegar por la información. Un ejemplo de este tipo de formato visual es incluir asteriscos en el contenido al principio de cada elemento de la lista y usar elementos br para separar los elementos.

Algunas tecnologías de asistencia permiten a los usuarios navegar de una lista a otra o de un elemento a otro. Pueden usarse hojas de estilo para cambiar la presentación de las listas conservando su integridad.

La estructura de lista, normalmente las listas sin ordenar, también es útil para agrupar hipervínculos. Cuando se hace así, ayuda a los usuarios de lectores de pantalla a navegar desde el primer elemento de una lista hasta el final de la misma o a saltar a la siguiente lista. Esto les permite evitar grupos de enlaces si así lo desean.

Ejemplos

<ol>
  <li>Mix flour, eggs, milk, and seasoning in a bowl.</li>
  <li>Whisk until the batter is smooth.</li>
  <li>Rest the batter for at least 30 minutes before cooking.</li>
</ol>

<ul>
  <li>Milk</li>
  <li>Eggs</li>
  <li>Butter</li>
</ul>

<dl>
  <dt>blink</dt>
  <dd>turn on and off between 0.5 and 3 times per second</dd>
</dl>

<dl>
  <div>
    <dt>Name:</dt>
    <dd>Taisha Silveri</dd>
  </div>
  <div>
    <dt>Tel:</dt>
    <dd>503-123-4567</dd>
  </div>
  <div>
    <dt>Email:</dt>
    <dd>taisha-silveri@example.com</dd>
  </div>
</dl>

<h2 id="product-categories">Product Categories</h2>
<nav aria-labelledby="product-categories">
  <ul>
    <li><a href="kitchen.html">Kitchen</a></li>
    <li><a href="bedbath.html">Bed &amp; Bath</a></li>
    <li><a href="dining.html">Fine Dining</a></li>
    <li><a href="lighting.html">Lighting</a></li>
    <li><a href="storage.html">Storage</a><li>
  </ul>
</nav>

Pruebas

Técnicas relacionadas

• H40: Usar listas de descripción

Recursos

• HTML: el elemento dl.
• HTML: el elemento ol.
• HTML: el elemento ul.