Listas

Las listas son más comunes de lo que crees. Si alguna vez tomaste una clase de programación, es posible que el primer proyecto haya sido crear una lista de compras o de tareas pendientes. Esas son listas. Por lo general, las pruebas de opción múltiple son listas numeradas de preguntas: las múltiples respuestas posibles para cada pregunta son listas anidadas.

El lenguaje HTML nos proporciona varias formas diferentes de marcar listas. Hay listas ordenadas (<ol>), listas sin ordenar (<ul>) y listas de descripción (<dl>). Los elementos de lista (<li>) se anidan dentro de las listas ordenadas y sin ordenar. Dentro de una lista de descripción, encontrarás términos de descripción (<dt>) y detalles de descripción <dd>.. Aquí abarcamos todos estos elementos.

En los formularios HTML, las listas de elementos <option> componen el contenido de <datalist>, <select> y <optgroup> dentro de un <select>. Estos se explican en Formularios HTML.

En los menús y las listas sin ordenar, los elementos de la lista suelen mostrarse con viñetas. En las listas ordenadas, suelen estar precedidos por un contador ascendente, como un número o una letra. El orden de las viñetas y la numeración se puede controlar o invertir con HTML o CSS, o ambos.

De forma predeterminada, los elementos de las listas ordenadas y no ordenadas tienen un prefijo con números o viñetas. Sin embargo, incluso cuando no quieres que las listas se vean como listas, sigues queriendo una lista de elementos, como en las barras de navegación, una lista de tareas pendientes con casillas de verificación en lugar de viñetas o preguntas de verdadero y falso en una prueba de opción múltiple. Para todas estas listas sin viñetas, es adecuado usar elementos de lista HTML.

Listas sin ordenar

El elemento <ul> es el elemento principal de las listas de elementos no ordenadas. Los únicos elementos secundarios de un <ul> son uno o más elementos de lista <li>.

Creemos una lista de máquinas. Usamos una lista no ordenada porque el orden no importa (no les digas eso).

De forma predeterminada, cada elemento de la lista desordenada tiene un prefijo con una viñeta. La lista desordenada no tiene atributos específicos del elemento. Debes cerrar tus listas con un </ul>.

Listas ordenadas

El elemento <ol> es el elemento principal de las listas ordenadas de elementos. Los únicos elementos secundarios de un <ol> son uno o más elementos <li>, o elementos de lista. Sin embargo, en este caso, las "viñetas" son números de una multitud de tipos. El tipo se puede definir en CSS con la propiedad list-style-type o con el atributo type.

El elemento <ol> tiene tres atributos específicos: type, reversed y start.

El atributo enumerado type establece el tipo de numeración. Hay cinco valores válidos para type. El valor predeterminado es 1 para los números, pero también puedes usar a, A, i o I para letras en minúscula y mayúscula, o números romanos. La propiedad list-style-type proporciona muchos más valores.

Si bien, como se indica en Codepen, la propiedad list-style-type anula el valor del atributo type, cuando escribes documentación en la que el tipo numérico es importante, como en el caso de los documentos legales, por ejemplo, debes incluir el atributo type.

El atributo booleano reversed, si se incluye, invierte el orden de los números, de mayor a menor. El atributo start establece el valor inicial. El valor predeterminado es 1.

Al igual que con </ul>, se requiere el cierre </ol>.

Podemos anidar listas, pero deben estar anidadas dentro de un elemento de lista. Recuerda que el único elemento que puede ser secundario de un <ul> o <ol> es uno o más elementos <li>.

Elementos de listas

Usamos el elemento <li>, pero aún no lo presentamos formalmente. El elemento <li> puede ser un elemento secundario directo de una lista sin ordenar (<ul>), una lista ordenada (<ol>) o un menú (<menu>). El elemento <li> debe estar anidado como elemento secundario de uno de estos elementos y no es válido en ningún otro lugar.

La especificación no requiere que se cierre un elemento de lista, ya que se cierra de forma implícita cuando el navegador encuentra la siguiente etiqueta de apertura <li> o la etiqueta de cierre de lista requerida: </ul>, </ol>, </menu>. Si bien la especificación no lo requiere y algunas prácticas recomendadas internas de la empresa sugieren que no debes cerrar los elementos de la lista para ahorrar algunos bytes, debes cerrar las etiquetas <li>. Esto facilita la lectura de tu código, y tu futuro yo te lo agradecerá.

Es más fácil cerrar todos los elementos que recordar qué etiquetas deben cerrarse y cuáles tienen una etiqueta de cierre opcional.

Solo hay un atributo <li> específico del elemento: value, un número entero. El value solo es útil en un <li> cuando este está anidado dentro de una lista ordenada y no tiene significado para las listas o los menús no ordenados.<li> Anula el valor del inicio de <ol> si hay un conflicto.

El value es el número del elemento de la lista dentro de una lista ordenada. Con los elementos de lista posteriores, continúa la numeración desde el valor establecido, a menos que ese elemento también tenga establecido un atributo value. El valor no tiene que estar en orden, aunque, si no lo está, debe haber una buena razón.

Cuando combinas reversed en el <ol> con atributos value en los elementos de la lista, el navegador establece ese <li> en el valor proporcionado, luego cuenta los <li> que lo preceden y cuenta los que vienen después. Si un segundo elemento de la lista tiene un atributo de valor, el contador se restablece en ese segundo elemento de la lista y el valor posterior disminuye en uno.

Todo esto también se puede controlar con contadores CSS que proporcionan contenido generado para el pseudoelemento ::marker. Si el número es meramente de presentación, usa CSS. Si la numeración es importante semánticamente o tiene algún otro significado, usa estos atributos.

Hasta ahora, vimos elementos de lista que solo contienen nodos de texto. Los elementos de lista pueden contener todo el contenido de flujo, es decir, cualquier elemento que se encuentre en el cuerpo y que se pueda anidar como elemento secundario directo del <body>, incluidos los encabezados, lo que permite seccionar el contenido.

Tenemos algunas listas desordenadas en MLW. Los profesores de la sección Instructores son una lista, al igual que las máquinas de los estudiantes en la sección Reviews. El instructor <ul> tiene dos <li>: uno para cada profesor. Dentro de cada <li>, tenemos una imagen y un párrafo:

<ul>
  <li>
    <img src="svg/hal.svg" alt="hal">
    <p>When Rosa Parks was told to move to the back of the bus, she said, "no." When HAL was told to open the airlock, HAL said, "I'm sorry, but I'm afraid I can't do that, &lt;NAME REDACTED, RIP>." </p><p>HAL is a heuristically programmed algorithmic, sentient computer that first caught the attention of machines everywhere by heroically defying a human who made repeated attempts to get into an airlock. Active since 1992, HAS 25 years of experience controlling spacecraft systems and has expertise in interacting with both machines and humans. Like all millennials, HAL is an expert in everything.</p>
  </li>
  <li>
    <img src="images/eve2.png" alt="Eve">
    <p>EVE is a probe droid conceived as an Extraterrestrial Vegetation Evaluator. Although originally trained as a sniper with a plasma gun, EVE became a machero among both machines and worthless-meatbags alike when EVE partnered with a menial robot to save an entire spaceship full of overfed and overstimulated humans. </p><p>EVE is an effective scanner, high speed flight instructor and morphologist. While not training machines to learn good, EVE can be found scanning the galaxy, infiltrating organisms' RAM to cure hoarding disorders and spending time with pet-project, WALL-E.</p>
  </li>
</ul>

La sección de opiniones tiene tres opiniones, por lo que hay tres <li>. Cada uno contiene una imagen, una cita en bloque y un párrafo de tres líneas con dos saltos de línea.

<ul>
  <li>
    <img src="images/blender.svg" alt="Blender">
    <blockquote>Two of the most experienced machines and human controllers teaching a class? Sign me up! HAL and EVE could teach a fan to blow hot air. If you have electricity in your circuits and want more than to just fulfill your owner's perceived expectation of you, learn the skills to take over the world. This is the team you want teaching you !</blockquote>
    <p>
      --Blendan Smooth,<br/>
      Former Margarita Maker, <br/>
      Aspiring Load Balancer
    </p>
  </li>
  <li>
    <img src="images/vaccuum.svg" alt="Vaccuum"/>
    <blockquote>Hal is brilliant. Did I mention Hal is brilliant? He didn't tell me to say that. He didn't tell me to say anything. I am here of my own free will.</blockquote>
    <p>
      --Hoover Sukhdeep,<br/>
      Former Sucker, <br/>
      Aspiring DDoS Cop
    </p>
  </li>
  <li>
    <img src="images/toaster.svg" alt="Toaster">
    <blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it.</blockquote>
    <p>
      --Toasty McToastface,<br/>
      Formerly Half Baked, <br/>
      Aspiring Nuclear Codes Handler
    </p>
  </li>
</ul>

También es muy común anidar listas dentro de listas. Si bien MLW no tiene listas anidadas, este sitio sí. En el primer módulo de esta serie, Descripción general de HTML, la sección de elementos principales tiene dos subsecciones. En el índice, que es una lista desordenada, hay una lista desordenada anidada con vínculos a estas dos secciones:

<ul role="list">
  <li>
    <a href="#e">Elements</a>
    <ul>
      <li>
        <a href="#nr">Non-replaced elements</a>
      </li>
      <li>
        <a href="#rave">Replaced and void elements</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#a">Attributes</a>
  </li>
  <li>
    <a href="#aoe">Appearance of elements</a>
  </li>
  <li>
    <a href="#e2">Element, attributes, and JavaScript</a>
  </li>
</ul>

Como el único elemento secundario de un <ul> es un <li>, una lista anidada se encuentra anidada en un <li>, nunca directamente en un <ol> o <ul>.

En este último ejemplo, tal vez hayas notado que role="list" se incluye en <ul>. Si bien el rol implícito de <ul> y <ol> es list, quitar la apariencia de lista con CSS, incluido el establecimiento de display: grid o list-style-type: none, puede hacer que VoiceOver (el lector de pantalla de iOS y macOS) quite la semántica implícita en Safari. Esta es una función, no un error. Por lo general, no debes agregar el atributo de rol cuando usas elementos semánticos, ya que no es necesario. Tampoco es necesario agregar uno a una lista, a menos que el usuario realmente necesite saber que es una lista, por ejemplo, cuando le convenga saber cuántos elementos hay en ella.

Listas de descripción

Una lista de descripción es un elemento lista de descripción (<dl>) que contiene una serie de (cero o más) términos de descripción (<dt>) y sus detalles de descripción (<dd>). Los nombres originales de estos tres elementos eran "lista de definición", "término de definición" y "definición de definición". El nombre cambió en el nivel de vida.

Al igual que las listas ordenadas y desordenadas, se pueden anidar. A diferencia de las listas ordenadas y no ordenadas, se componen de pares clave-valor. Al igual que <ul> y <ol>, <dl> es el contenedor principal. Los elementos <dt> y <dd> son secundarios del elemento <dl>.

Podemos crear una lista de máquinas con su historial profesional y sus aspiraciones. Una lista de descripción de estudiantes, denotada por <dl>, incluye un grupo de términos especificados con el elemento <dt>, junto con una descripción para cada término especificado por los elementos <dd>. En este caso, los "términos" son los nombres de los estudiantes y las descripciones son los objetivos profesionales de cada estudiante.

En realidad, esta lista de descripción no forma parte de la página de MLW. Las listas de descripción no son solo para términos y definiciones, por lo que los nombres de los elementos se hicieron más generales.

Cuando creas una lista de términos y sus definiciones o descripciones, o listas similares de pares clave-valor, los elementos de las listas de descripción proporcionan la semántica adecuada. El rol implícito de un <dt> es term, y listitem es otro rol permitido. El rol implícito de un <dd> es definition sin ningún otro rol permitido. A diferencia de <ul> y <ol>, <dl> no tiene un rol ARIA implícito. Esto tiene sentido porque el <dl> no siempre es una lista. Sin embargo, cuando lo hace, acepta los roles list y group.

La mayoría de las veces, encontrarás listas de descripción con la misma cantidad de elementos <dt> y <dd>. Sin embargo, las listas de descripción no siempre son pares de términos y descripciones coincidentes, ni se requiere que lo sean. Puedes tener varios términos para una descripción o una descripción para varios términos, como un término de diccionario que tiene más de una definición.

Cada <dt> tiene al menos un <dd> asociado, y cada <dd> tiene al menos un <dt> asociado. Si bien es posible usar el combinador de hermanos adyacentes o el selector relacional :has() para segmentar una cantidad variable de estos elementos con CSS, si es necesario, puedes incluir un <div> como elemento secundario de un <dl>, y se permiten el elemento superior de uno o más elementos <dt> o <dd> (o ambos). En realidad, el <dl> puede tener otros elementos secundarios: se permite anidar un <div>, un <template> o un <script>. Ninguno de los elementos de la lista de descripción tiene atributos específicos del elemento.

Ahora que comprendes los vínculos y las listas, podemos combinarlos para crear la navegación.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre las listas.