Las listas en HTML se utilizan para organizar y presentar información en forma de elementos agrupados. Hay dos tipos principales de listas: ordenadas y no ordenadas.
Listas Ordenadas (<ol>)
Las listas ordenadas se utilizan para presentar elementos en un orden secuencial, numerado o alfabético.
Sintaxis:
<ol>
<li>Primer elemento</li>
<li>Segundo elemento</li>
<li>Tercer elemento</li>
</ol>Ejemplo:
<ol>
<li>Preparar los ingredientes</li>
<li>Precalentar el horno</li>
<li>Mezclar los ingredientes</li>
<li>Hornear durante 30 minutos</li>
</ol>
Notas:
- Los elementos de una lista ordenada se definen con la etiqueta
<li>(elemento de lista). - El navegador numera automáticamente los elementos de la lista.
Listas No Ordenadas (<ul>)
Las listas no ordenadas se utilizan para presentar elementos en un grupo sin un orden específico, usando viñetas.
Sintaxis:
<ul>
<li>Elemento uno</li>
<li>Elemento dos</li>
<li>Elemento tres</li>
</ul>Ejemplo:
<ul>
<li>Manzanas</li>
<li>Bananas</li>
<li>Naranjas</li>
</ul>Notas:
- Los elementos de una lista no ordenada también se definen con la etiqueta
<li>. - Las viñetas suelen ser círculos o cuadrados, dependiendo del navegador y el estilo CSS.
Listas Anidadas
Puedes anidar listas dentro de listas para crear sublistas.
Ejemplo de lista ordenada con una sublista no ordenada:
<ol>
<li>Comprar productos
<ul>
<li>Leche</li>
<li>Pan</li>
<li>Huevos</li>
</ul>
</li>
<li>Hacer la compra</li>
<li>Pagar</li>
</ol>Ejemplo de lista no ordenada con una sublista ordenada:
<ul>
<li>Actividades de la mañana
<ol>
<li>Despertar</li>
<li>Desayunar</li>
<li>Ejercicio</li>
</ol>
</li>
<li>Actividades de la tarde</li>
<li>Actividades de la noche</li>
</ul>