Skip to content

Listas en HTML

Las listas en HTML, que son una herramienta esencial para organizar información de manera clara y estructurada. Las listas en HTML se dividen principalmente en dos tipos: ordenadas y desordenadas.

1. Listas Ordenadas <ol>

Las listas ordenadas son aquellas en las que cada elemento de la lista está numerado. Se utilizan cuando el orden de los elementos es importante, como en pasos de una receta o en una clasificación.

  • Etiqueta <ol>: Esta etiqueta define la lista ordenada en sí.
  • Etiqueta <li>: Cada elemento de la lista se coloca dentro de una etiqueta <li> (list item). Los elementos se numerarán automáticamente.

Ejemplo de una Lista Ordenada:

<ol>
<li>Primer elemento</li>
<li>Segundo elemento</li>
<li>Tercer elemento</li>
</ol>

En este ejemplo, los elementos se mostrarán numerados como 1, 2, 3, etc.

2. Listas Desordenadas <ul>

Las listas desordenadas son útiles cuando el orden de los elementos no es relevante. En lugar de números, los elementos se marcan con viñetas.

  • Etiqueta <ul>: Define la lista desordenada.
  • Etiqueta <li>: Al igual que en las listas ordenadas, cada elemento de la lista desordenada se coloca dentro de una etiqueta <li>.

Ejemplo de una Lista Desordenada:

<ul>
<li>Elemento A</li>
<li>Elemento B</li>
<li>Elemento C</li>
</ul>

Personalización y Estilos

Tanto las listas ordenadas como las desordenadas pueden personalizarse con CSS para cambiar su apariencia. Por ejemplo, puedes cambiar el tipo de viñeta en una lista desordenada o el estilo de numeración en una lista ordenada.

Conclusión

Las listas en HTML son herramientas muy versátiles y esenciales para la presentación de información. Permiten organizar los datos de manera lógica y accesible, mejorando la legibilidad y la estructura del contenido en la web.