Las listas son usadas para agrupar piezas de información que están relacionadas entre sí, permitiendo una mejor lectura y accesibilidad del contenido.
Estas estructuras son utilizadas con frecuencia para contener elementos de navegación además de contenido en general, puesto que todos los tipos de listas pueden contener diferentes elementos HTML como enlaces, otras listas, imágenes, etc.
HTML nos ofrece principalmente 2 formas de especificar listas de información:
- <ul> - Listas no ordenadas, con diferentes estilos de viñetas.
- <ol> - Listas ordenadas, que pueden usar múltiples esquemas de numeración.
En cualquier forma la estructura debe comenzar con la etiqueta de apertura del tipo de lista requerido y encerrar cada elemento de la lista entre la etiqueta <li>.
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>- Elemento 1
- Elemento 2
- Elemento 3
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>- Elemento 1
- Elemento 2
- Elemento 3
El atributo type
Para definir el tipo de viñeta o el esquema de numeración en las listas se emplea el atributo type con los siguientes posibles valores.
| Valor | Descripción |
|---|---|
| Disc | ● Viñeta en disco (Por defecto) |
| Circle | º Viñeta circular |
| Square | ■ Viñeta cuadrada |
| None | Sin viñeta |
Ul Type disc
- Elemento 1
- Elemento 2
- Elemento 3
Ul Type circle
- Elemento 1
- Elemento 2
- Elemento 3
Ul Type square
- Elemento 1
- Elemento 2
- Elemento 3
Ul Type none
- Elemento 1
- Elemento 2
- Elemento 3
| Valor | Descripción |
|---|---|
| 1 | Marcadores numéricos (Por defecto) |
| A | Numeración con letras mayúsculas |
| a | Numeración con letras minúsculas |
| I | Numeración romana en mayúsculas |
| i | Numeración romana en minúsculas |
Ol Type 1
- Elemento 1
- Elemento 2
- Elemento 3
Ol Type i
- Elemento 1
- Elemento 2
- Elemento 3
Ol Type I
- Elemento 1
- Elemento 2
- Elemento 3
Ol Type A
- Elemento 1
- Elemento 2
- Elemento 3
Ol Type a
- Elemento 1
- Elemento 2
- Elemento 3
Anidando listas
Además de cualquier otro elemento HTML, se pueden crear listas anidadas con diferentes tipos de lista y estilos de viñetas.
<ul type="square">
<li>Elemento 1</li>
<li>Elemento 2
<ol type="A">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>
</li>
<li>Elemento 3</li>
</ul>- Elemento 1
- Elemento 2
- Elemento 1
- Elemento 2
- Elemento 3
- Elemento 3
Ulises Rendón
