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 una lista de tareas pendientes. Esas son listas. Las pruebas de opción múltiple suelen ser listas de preguntas numeradas: las múltiples respuestas posibles para cada pregunta son listas anidadas.
El código HTML nos brinda diferentes maneras de marcar listas. Hay listas ordenadas (<ol>), listas sin ordenar (<ul>) y listas de descripciones (<dl>). Los elementos de lista (<li>) se anidan dentro de listas ordenadas y listas sin ordenar. Dentro de una lista de descripciones, encontrarás los términos descriptivos (<dt>) y los detalles de las descripciones. <dd>. Abordaremos todos estos aspectos aquí.
En los formularios HTML, las listas de elementos <option> constituyen el contenido de <datalist>, <select> y <optgroup> dentro de una <select>. Esto se explica en los formularios HTML.
En los menús y las listas sin ordenar, los elementos de lista suelen mostrarse con viñetas. En las listas ordenadas, por lo general, están precedidas 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 revertir con HTML, CSS o ambos.
De forma predeterminada, los elementos de lista ordenados y sin ordenar tienen un prefijo de números o viñetas. Pero incluso cuando no quieras que las listas se vean como listas, aun así quieres una lista de elementos, por ejemplo, en 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 apropiado usar elementos de lista HTML.
Listas sin ordenar
El elemento <ul> es el elemento superior de las listas de elementos sin ordenar. Los únicos elementos secundarios de un <ul> son uno o más elementos de elementos de lista <li>. Creemos una lista de máquinas. Usamos una lista sin ordenar porque el orden no importa (no les digas eso):
De forma predeterminada, cada elemento de la lista sin ordenar tiene un prefijo de una viñeta. La lista sin ordenar no tiene atributos específicos de elementos.
Debes cerrar tus listas con un </ul>.
Listas ordenadas
El elemento <ol> es el elemento superior para 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, las "viñetas" en este caso son números de una gran variedad de tipos. El tipo se puede definir en CSS con la propiedad list-style-type
o con el atributo type.
<ol> tiene tres atributos específicos del elemento: type, reversed y start.
El atributo type enumerado establece el tipo de numeración. Hay cinco valores válidos para type, el predeterminado es 1 para los números, pero también puedes usar a, A, i o I para letras minúsculas y mayúsculas o números romanos. La propiedad list-style-type proporciona muchos más valores.
Aunque, como se indica en el código, la propiedad list-style-type anula el valor del atributo type, cuando se escribe documentación en la que el tipo numérico es importante, como en los documentos legales, por ejemplo, debes incluir el type.
Si se incluye el atributo booleano reversed, revertirá el orden de los números, del número más alto al más bajo.
El atributo start establece el valor inicial. El valor predeterminado es 1.
Al igual que con </ul>, el cierre de </ol> es obligatorio.
Podemos anidar listas, pero deben anidarse dentro de un elemento de lista. Recuerda que el único elemento que puede ser un elemento secundario de una <ul> o <ol> es uno o más elementos <li>.
Elementos de listas
Usamos el elemento <li>, pero aún no lo implementamos de manera formal. El elemento <li> puede ser un elemento secundario directo de una lista sin ordenar (<ul>), una lista ordenada (<ol>) o un menú (<menu>). <li> debe anidarse como un 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 la lista, ya que se cerrará de manera implícita cuando el navegador encuentre la siguiente etiqueta de apertura <li> o la etiqueta de cierre de la 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, cierra las etiquetas <li>. Hace que tu código sea más fácil de leer y
tu futuro yo te lo agradecerá. Es más fácil cerrar todos los elementos que recordar qué etiquetas se deben cerrar y cuáles tienen una etiqueta de cierre opcional.
Solo hay un atributo <li> específico del elemento: value, que es un número entero. value solo es útil en un <li> cuando <li> está anidado dentro de una lista ordenada y no tiene sentido para listas o menús sin ordenar. Anula el valor del inicio de <ol> si hay un conflicto.
value es el número del elemento de lista dentro de una lista ordenada. Con los elementos de lista posteriores, continúa con la numeración del conjunto de valores, a menos que ese elemento también tenga un atributo value establecido. El valor no tiene que estar en orden; sin embargo, si no está en orden, debería haber una buena razón.
Cuando combinas reversed en <ol> con atributos value en los elementos de lista, el navegador establecerá ese <li> en el valor proporcionado, hará un recuento de los <li> que lo preceden y los de los siguientes. Si un segundo elemento de la lista tiene un atributo de valor, el contador se restablecerá en ese segundo elemento y el valor posterior disminuirá en uno.
Todo esto también se puede controlar con los contadores de CSS que proporcionan contenido generado para el pseudoelemento ::marker.
Si el número es meramente presentacional, usa CSS. Si la numeración es importante desde el punto de vista semántico o tiene algún otro significado, usa estos atributos.
Hasta ahora, analizamos los elementos de lista que contienen solo nodos de texto. Los elementos de lista pueden incluir todo el contenido del flujo, es decir, cualquier elemento que se encuentre en el cuerpo y que se pueda anidar como un elemento secundario directo de <body> (incluidos los encabezados), lo que divide el contenido.
Tenemos algunas listas sin ordenar en MLW. Los profesores en la sección de instructores son una lista, al igual que las máquinas de estudiantes en la sección de revisiones. El instructor <ul> tiene dos <li>: una 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, <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, es decir, tres <li>. Cada una contiene una imagen, una cita de 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. The Russians had nothing to do with it. This has
<span style="font-family:Arial;vertical-align:baseline;">no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳̯̮͇i</blockquote>
<p>
--Toasty McToastface,<br/>
Formerly Half Baked, <br/>
Aspiring Nuclear Codes Handler
</p>
</li>
</ul>
Anidar listas dentro de listas también es muy común. Si bien MLW no tiene ninguna lista anidada, este sitio sí. En el primer capítulo de esta serie, Overview of HTML, la sección principal de elementos tiene dos subsecciones. En el índice, que es una lista sin ordenar, 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, quizás hayas notado que role="list" está incluido en <ul>. Si bien la función implícita de <ul> y <ol> es list, quitar la apariencia de la lista con CSS, incluidos los parámetros 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. Esto no es un error.
Por lo general, no debes agregar el atributo rol cuando usas elementos semánticos, ya que no es necesario. Por lo general, tampoco necesitas agregar uno a una lista, a menos que el usuario realmente necesite saber que es una lista, como cuándo se beneficiaría de saber cuántos elementos hay en la lista.
Listas de descripciones
Una lista de descripciones es un elemento de lista de descripciones (<dl>) que contiene una serie de términos de descripción (<dt>) (cero o más) y sus detalles de descripción (<dd>). Los nombres originales de estos tres elementos eran “lista de definiciones”, “término de definición” y “definición de definición”.
En el estándar de la vida, el nombre cambió.
De manera similar a las listas ordenadas y sin ordenar, se pueden anidar. A diferencia de las listas ordenadas y no ordenadas, estas se componen de pares clave-valor.
Al igual que <ul> y <ol>, <dl> es el contenedor superior. Los elementos <dt> y <dd> son elementos secundarios de <dl>.
Podemos crear una lista de máquinas con su historia profesional y sus aspiraciones. Una lista descriptiva de estudiantes, indicada con <dl>, incluye un grupo de términos (en este caso, los "términos" son los nombres de los estudiantes) que se especifica con el elemento <dt> junto con una descripción para cada término (en este caso, los objetivos profesionales de cada estudiante) especificados por los elementos <dd>.
Esta lista de descripciones no forma parte de la página de MLW. Las listas de descripciones no son solo para términos y definiciones; es por eso que los nombres de los elementos se hicieron más generales.
Cuando se crea una lista de términos y sus definiciones o descripciones, o listas similares de pares clave-valor, los elementos de las listas de descripciones proporcionan la semántica adecuada. La función implícita de un <dt> es term, y listitem es otra función permitida. La función implícita de un <dd> es definition sin otras funciones permitidas. A diferencia de <ul> y <ol>, <dl> no tiene un rol de ARIA implícito.
Eso tiene sentido, ya que <dl> no siempre es una lista. Pero cuando es así, acepta las funciones list y group.
En la mayoría de los casos, encontrarás listas de descripciones con la misma cantidad de elementos <dt> y <dd>. Sin embargo, no siempre es necesario que las listas de descripciones concuerden con pares de término a descripción. Puedes tener varios a uno o a varios, como un término del diccionario que tenga 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 la combinación del mismo nivel adyacente o el selector relacional :has() para orientar los números variables de estos elementos con CSS, si es necesario, puedes incluir un <div> como elemento secundario de <dl> y se permite el elemento superior de uno o más elementos <dt> o <dd> (o ambos). <dl> puede tener otros elementos secundarios: se permite anidar un <div>, <template> o <script>. Ninguno de los elementos de la lista de descripciones tiene atributos específicos de cada elemento.
Ahora que comprendes los vínculos y las listas, los armemos para crear navegación.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre listas.
¿Es válido incluir un <h2> dentro de un elemento de lista?
Selecciona los tres elementos que definen los tipos de lista.
<il><ol><ul><dl>