¿Cómo creo listas ordenadas y no ordenadas en HTML?

En HTML, puedes crear dos tipos principales de listas para organizar contenido: listas no ordenadas (generalmente mostradas con viñetas) y listas ordenadas (generalmente mostradas con números o letras). En ambos casos, cada elemento individual de la lista se define con la etiqueta <li> (elemento de lista).

1. Listas No Ordenadas (<ul>)

Se utilizan cuando el orden de los elementos no es importante. La etiqueta <ul> (de «unordered list» o lista no ordenada) envuelve todos los elementos.

Por defecto, los navegadores suelen mostrar estas listas con viñetas (puntos).

Ejemplo de lista no ordenada:

<p>Lista de la compra:</p>
<ul>
  <li>Leche</li>
  <li>Pan</li>
  <li>Huevos</li>
  <li>Manzanas</li>
</ul>
Lenguaje del código: PHP (php)

2. Listas Ordenadas (<ol>)

Se emplean cuando la secuencia o el orden de los elementos sí es relevante, como en instrucciones paso a paso, un ranking, o un esquema numerado. La etiqueta <ol> (de «ordered list» o lista ordenada) es la que los agrupa.

Por defecto, los navegadores numeran estos elementos (1, 2, 3...).

Ejemplo de lista ordenada:

<p>Instrucciones para preparar té:</p>
<ol>
  <li>Hervir agua.</li>
  <li>Poner la bolsita de té en la taza.</li>
  <li>Verter el agua caliente sobre la bolsita.</li>
  <li>Dejar reposar de 3 a 5 minutos.</li>
  <li>Retirar la bolsita y disfrutar.</li>
</ol>
Lenguaje del código: PHP (php)

La etiqueta <ol> tiene atributos útiles como type (para cambiar el tipo de marcador, por ejemplo: type="a" para letras minúsculas, type="I" para números romanos mayúsculos) y start (para iniciar la numeración en un número específico, por ejemplo: start="5").

Recuerda que las etiquetas <li> siempre deben ser hijas directas de una etiqueta <ul> u <ol>.