Uso de listas en HTML

Las listas en HTML te ayudan a crear contenido enumerado. Hay dos tipos principales: listas no ordenadas y listas ordenadas. Las listas proporcionan estructura y claridad.

Lista no ordenada (ul)

La etiqueta <ul> crea una lista no ordenada, que generalmente se muestra con viñetas. Cada elemento de la lista se encierra en una etiqueta <li>.

<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Cheese</li>
</ul>

Lista ordenada (ol)

La etiqueta <ol> crea una lista ordenada, donde los elementos están numerados. Úsala cuando el orden de los elementos sea importante, como pasos o instrucciones.

<ol>
  <li>Preheat oven</li>
  <li>Mix ingredients</li>
  <li>Bake for 30 minutes</li>
</ol>

Listas anidadas

HTML te permite colocar listas dentro de otras listas. Esto es útil cuando quieres incluir subcategorías bajo elementos principales.

<ul>
  <li>Fruits
    <ul>
      <li>Apples</li>
      <li>Bananas</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

Cuándo usar listas

Usa listas siempre que necesites presentar elementos — como listas de tareas, ingredientes, pasos o categorías. Elige el tipo correcto: ordenada si importa el orden, no ordenada si no.