Listas HTML

Listas

---

Ejemplo de una lista HTML:

una lista sin orden

• item
• item
• item
• item

una lista con orden

1. primer item
2. segundo item
3. tercer item
4. cuarto item

---

Lista sin orden

Una lista sin orden empieza con la etiqueta <ul>. Cada ítem de la lista empieza con la etiqueta <li>.

Los ítems de la lista serán señalados con viñetas (pequeños círculos negros) por defecto:

<ul>
  <li>Chocolate</li>
  <li>Te</li>
  <li>Leche</li>
</ul>

Elegir una señal para los ítems de una lista

La propiedad CSS list-style-type se usa para definir el estilo de señal para los ítems de una lista:

Ejemplo - disco:

<ul style="list-style-type:disc">
  <li>Chocolate</li>
  <li>Te</li>
  <li>Leche</li>
</ul>

Ejemplo – circulo:

<ul style="list-style-type:circle">
  <li>Chocolate</li>
  <li>Te</li>
  <li>Leche</li>
</ul>

Ejemplo – cuadrado:

<ul style="list-style-type:square">
  <li>Chocolate</li>
  <li>Te</li>
  <li>Leche</li>
</ul>

Ejemplo – nada:

<ul style="list-style-type:none">
  <li>Chocolate</li>
  <li>Te</li>
  <li>Leche</li>
</ul>

Listas con orden

Una lista con orden empieza con la etiqueta <ol>. Cada ítem de la lista empieza con la etiqueta <li>.

Los ítems de la lista serán señalados con números por defecto:

<ol>
  <li>Chocolate</li>
  <li>Te</li>
  <li>Leche</li>
</ol>

El atributo type

El atributo type de la etiqueta <ol>, define el tipo de señal para los ítems de la lista:

Números:

<ol type="1">
  <li>Chocolate</li>
  <li>Te</li>
  <li>Leche</li>
</ol>

Letras mayúsculas:

<ol type="A">
  <li>Chocolate</li>
  <li>Te</li>
  <li>Leche</li>
</ol>

Letras minúsculas:

<ol type="a">
  <li>Chocolate</li>
  <li>Te</li>
  <li>Leche</li>
</ol>

Números romanos mayúsculos:

<ol type="I">
  <li>Chocolate</li>
  <li>Te</li>
  <li>Leche</li>
</ol>

Números romanos minúsculos:

<ol type="i">
  <li>Chocolate</li>
  <li>Te</li>
  <li>Leche</li>
</ol>

---

Listas de descripciones

HTML también soporta las listas de descripciones.

Una lista de descripciones es una lista de términos, con una descripción de cada uno de ellos.

La etiqueta <dl> define la lista de descripciones, la etiqueta <dt> define el termino (nombre) y la etiqueta <dd> lo describe:

<dl>
  <dt>Chocolate</dt>
  <dd>- bebida hecha a base de cacao</dd>
  <dt>Leche</dt>
  <dd>- liquido de origen animal para consumo humano</dd>
</dl>