- Published on
Lists (<ul>, <ol>, <li>) in HTML
- Authors
- Name
- Diego Whiskey
Todo acerca de las listas en HTML, que se crean utilizando los elementos <ul>
, <ol>
, y <li>
.
Listas no ordenadas (
<ul>
):Las listas no ordenadas se utilizan para mostrar elementos en una lista sin ningún orden específico. Los elementos se muestran con viñetas. Aquí tienes un ejemplo:
<ul> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> </ul>
En este caso, los elementos "Elemento 1", "Elemento 2" y "Elemento 3" se mostrarán con viñetas, como viñetas de puntos por defecto.
Listas ordenadas (
<ol>
):Las listas ordenadas se utilizan cuando los elementos deben mostrarse en un orden específico, como con números o letras. Los elementos se enumeran automáticamente. Aquí tienes un ejemplo:
<ol> <li>Primer elemento</li> <li>Segundo elemento</li> <li>Tercer elemento</li> </ol>
En este caso, los elementos se enumerarán automáticamente como "1. Primer elemento," "2. Segundo elemento," "3. Tercer elemento."
Elementos de lista (
<li>
):Los elementos de lista
<li>
se utilizan para definir los elementos individuales dentro de una lista, ya sea una lista ordenada o no ordenada. Cada<li>
contiene un elemento de la lista. Puedes anidar listas dentro de otras listas si es necesario. Aquí tienes un ejemplo:<ul> <li>Elemento 1</li> <li>Elemento 2 <ul> <li>Subelemento 1</li> <li>Subelemento 2</li> </ul> </li> <li>Elemento 3</li> </ul>
En este ejemplo, "Elemento 2" tiene su propia lista no ordenada anidada con dos subelementos.
Atributos de tipo de lista (
type
):Puedes especificar el tipo de numeración o viñetas en las listas ordenadas mediante el atributo
type
. Por ejemplo:type="1"
(por defecto): Números arábigos (1, 2, 3, ...).type="A"
: Letras mayúsculas (A, B, C, ...).type="a"
: Letras minúsculas (a, b, c, ...).type="I"
: Números romanos mayúsculos (I, II, III, ...).type="i"
: Números romanos minúsculos (i, ii, iii, ...).
Por ejemplo:
<ol type="A"> <li>Elemento A</li> <li>Elemento B</li> <li>Elemento C</li> </ol>
Esto mostrará una lista ordenada con letras mayúsculas en lugar de números.
Puedes personalizar su apariencia utilizando CSS para adaptarlas a tus necesidades de diseño.