Crear listas con etiquetas en HTML

En HTML, para estructurar listas de elementos, se emplean las etiquetas <ul> y <ol>, dependiendo de si el orden de los elementos es relevante o no. Ambas utilizan la etiqueta <li> para definir cada ítem de la lista.

🔹 Listas no ordenadas: <ul>

La etiqueta <ul> (unordered list) se utiliza cuando el orden de los elementos no es significativo, como en una lista de compras. Cada elemento de la lista se define con la etiqueta <li>.CertiDevs

Ejemplo:

htmlCopiarEditar<ul>
  <li>Manzanas</li>
  <li>Bananas</li>
  <li>Peras</li>
</ul>

Por defecto, los navegadores muestran estas listas con viñetas. El estilo de las viñetas puede personalizarse mediante CSS utilizando la propiedad list-style-type. Por ejemplo:Lenguaje HTML – HTML en español+3CertiDevs+3blog.hubspot.es+3

cssCopiarEditarul {
  list-style-type: square;
}

🔹 Listas ordenadas: <ol>

La etiqueta <ol> (ordered list) se emplea cuando el orden de los elementos es importante, como en instrucciones paso a paso. Al igual que en las listas no ordenadas, cada ítem se define con <li>.CertiDevs

Ejemplo:

htmlCopiarEditar<ol>
  <li>Precalentar el horno.</li>
  <li>Mezclar los ingredientes.</li>
  <li>Hornear durante 30 minutos.</li>
</ol>

HTML5 introduce atributos adicionales para <ol> que permiten un mayor control sobre la numeración:

  • start: Define el número inicial de la lista.
htmlCopiarEditar  <ol start="5">
    <li>Elemento uno</li>
    <li>Elemento dos</li>
  </ol>

Esto generará una lista que comienza en 5.

  • reversed: Invierte el orden de numeración de la lista. Es un atributo booleano, por lo que su mera presencia activa la funcionalidad.
htmlCopiarEditar  <ol reversed>
    <li>Elemento uno</li>
    <li>Elemento dos</li>
  </ol>

En este caso, la lista comenzará desde el número total de elementos y decrecerá.

htmlCopiarEditar  <ol type="A">
    <li>Elemento uno</li>
    <li>Elemento dos</li>
  </ol>

Esto generará una lista con letras mayúsculas como marcadores.

Además, cada elemento <li> puede tener un atributo value para asignar un número específico, útil en listas donde se requiere un control preciso sobre la numeración.CertiDevs

htmlCopiarEditar<ol>
  <li value="10">Elemento diez</li>
  <li>Elemento once</li>
</ol>

En este ejemplo, el primer ítem se numera como 10, y el siguiente como 11.

🔹 Listas de menú: <menu>

La etiqueta <menu> se utiliza para definir listas de comandos o acciones, comúnmente en barras de herramientas o menús contextuales. Aunque su uso es similar al de <ul>, semánticamente indica que los elementos son opciones de un menú.

Ejemplo:

htmlCopiarEditar<menu>
  <li><button onclick="copiar()">Copiar</button></li>
  <li><button onclick="pegar()">Pegar</button></li>
</menu>

Es importante destacar que, desde el punto de vista de la accesibilidad, <ul> y <menu> son tratados de manera similar por los lectores de pantalla. Sin embargo, <menu> proporciona un significado más específico en contextos donde se presentan opciones de acción.

✅ Recomendaciones

  • Utiliza <ul> cuando el orden de los elementos no sea relevante.
  • Emplea <ol> para listas donde el orden es significativo.
  • Considera <menu> para listas de acciones o comandos interactivos.
  • Cierra siempre las etiquetas <li> para mantener un código limpio y coherente.
  • Personaliza la apariencia de las listas mediante CSS para mejorar la presentación visual.CertiDevs

Estas prácticas aseguran una estructura HTML semántica y accesible, mejorando la experiencia del usuario y facilitando el mantenimiento del código.