Listas

Las listas son más comunes de lo que crees. Si alguna vez has tomado una clase de programación, es posible que el primer proyecto haya sido crear una de compras o de tareas pendientes. Esos 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.

HTML nos brinda algunas formas diferentes de marcar listas. Hay listas ordenadas (<ol>), listas sin ordenar (<ul>) y listas de descripciones (<dl>). Los elementos de lista (<li>) están anidados en listas ordenadas y listas sin ordenar. En la lista de descripciones, encontrarás los términos descriptivos (<dt>) y la descripción Detalles <dd>. Abarcaremos todos estos aspectos aquí.

En los formularios HTML, las listas de elementos <option> conforman el contenido de <datalist>, <select> y <optgroup> dentro de una <select>. que se analizan en formularios HTML.

En los menús y las listas sin ordenar, los elementos de lista generalmente se muestran con viñetas. En las listas ordenadas, suelen estar precedidas por un contador ascendente, como un número o una letra. Las viñetas y el orden de la numeración se pueden controlar o invertir con HTML o CSS. o ambas.

De forma predeterminada, los elementos de lista ordenados y desordenados llevan el prefijo de números o viñetas. Pero incluso cuando no quieres que las listas parezcan listas, De todas formas, quieres 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 apropiado usar elementos de lista HTML.

Listas sin ordenar

<ul> es el elemento superior de las listas de elementos sin ordenar. Los únicos elementos secundarios de una <ul> son una o más listas de <li>. elementos de un elemento. Creemos una lista de máquinas. Utilizamos una lista sin ordenar porque el orden no importa (no le digas eso):

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

Listas ordenadas

<ol> es el elemento superior de las listas ordenadas de elementos. Los únicos elementos secundarios de una <ol> son uno o más elementos <li>, o elementos de lista. Las "viñetas" en este caso, sin embargo, son números de muchos tipos. El tipo se puede definir en CSS con la propiedad list-style-type o mediante 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 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.

Mientras que, como se indica en el códec, la propiedad list-style-type anula el valor del atributo type cuando escribe documentación en la que el tipo numérico sea importante, como en el caso de los documentos legales, debes incluir type.

El atributo booleano reversed, si se incluye, invertirá el orden de los números, del número más grande al más bajo. El atributo start establece el valor inicial. El valor predeterminado es 1.

Al igual que </ul>, el </ol> de cierre es obligatorio.

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

Elementos de listas

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

La especificación no requiere cerrar un elemento de la lista, ya que se cerrará implícitamente cuando el navegador encuentre el siguiente <li> etiqueta de apertura o la etiqueta de cierre de lista requerida: </ul>, </ol>, </menu>. Si bien la especificación no lo requiere, Las prácticas recomendadas sugieren que no cierres los elementos de la lista para ahorrar bytes. Te recomendamos cerrar 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. El elemento value solo es útil en un objeto <li> cuando el elemento <li> se anida en una lista ordenada y no tiene sentido para listas o menús desordenados. 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 la numeración desde el configurado, a menos que ese elemento también tenga establecido un atributo value. No es necesario que el valor esté en orden. aunque si no está en orden, debería haber una buena razón.

Cuando combinas reversed en <ol> con los atributos value en los elementos de lista, el navegador establecerá ese <li> en el valor proporcionado, realiza una cuenta regresiva para las <li> que lo preceden y cuenta regresiva para las que vienen después. Si un segundo elemento de la lista tiene un atributo de valor el contador se restablecerá en el segundo elemento de la lista y el valor posterior disminuirá en uno.

Todo esto también se puede controlar con los contadores CSS. Proporcionar contenido generado para el seudoelemento ::marker. Si la cantidad 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, hemos visto elementos de lista que solo contienen nodos de texto. Los elementos de lista pueden incluir todo el contenido del flujo, es decir, cualquier elemento que se encuentra en el cuerpo y que se puede anidar como un elemento secundario directo de <body>, incluidos los encabezados, y, por lo tanto, secciona el contenido.

Tenemos algunas listas desordenadas en MLW. Los profesores en la sección de instructores son una lista, al igual que las máquinas de los estudiantes en las revisiones. sección. 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, es decir, tres <li>. Cada uno contiene una imagen, una comilla 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̢̣ͅ&nbsp;̗̰͓̲̞̀t͙̀o̟̖͖̹̕&nbsp;͓̼͎̝͖̭dó̪̠͕̜&nbsp;͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢&nbsp;̰̳̯̮͇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, Descripción general de HTML. La sección de elementos principales tiene dos subsecciones. En el índice, que es una lista sin ordenar, hay una tabla anidada lista sin ordenar 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>, se encuentra una lista anidada anidada en un <li>, nunca directamente en un <ol> o un <ul>.

En este último ejemplo, quizás hayas notado que role="list" se incluye en <ul>. Si bien el rol implícito de los dos <ul> y <ol> son list, lo que quita la apariencia de la lista con CSS, incluida la configuración 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. Por lo general, no es necesario para agregar una a una lista, a menos que el usuario realmente necesite saber que es una lista, como cuando 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 (cero o más) términos de descripción (<dt>) y los detalles de la descripción (<dd>). Los nombres originales de estos tres elementos eran "lista de definiciones", "término de definición", y "definición de la definición". El nombre cambió en el estándar de la vida.

Al igual que las listas ordenadas y sin ordenar, se pueden anidar. A diferencia de las listas ordenadas y sin ordenar, las listas 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 los estudiantes, indicada con <dl>, un grupo de términos, en este caso, los "términos" son los nombres de los estudiantes, que se especifican 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>.

En realidad, esta lista de descripción no forma parte de la página MLW. Las listas de descripciones no son solo para términos y definiciones, por qué 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, la descripción enumera los elementos proporcionan la semántica adecuada. La función implícita de un <dt> es term, y listitem es otra función permitida. El rol implícito de <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 porque <dl> no siempre es una lista. Sin embargo, cuando lo es, 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>. Pero las listas de descripciones no siempre son no es necesario que coincidan con pares de término a descripción; puedes tener varios a uno o uno a varios, como un término del diccionario. que tienen 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 combinadora de elementos del mismo nivel adyacente o la clase relacional :has() selector para segmentar números variables de estos elementos con CSS. Si es necesario, puedes incluir Se permite un elemento <div> como elemento secundario de un objeto <dl> y el elemento superior de uno o más elementos <dt> o <dd> (o de ambos). De hecho, <dl> tienes algunos 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 bien los vínculos y las listas, reunimos los dos para crear navegación.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre listas.