HTML Listas

HTML admite listas ordenadas, desordenadas y de definición:

Listas HTML

Lista ordenada

  1. Primer elemento de la lista
  2. Segundo elemento de la lista
  3. Tercer elemento de la lista

Lista desordenada

  • Elemento de lista
  • Elemento de lista
  • Elemento de lista
实例

Ejemplos en línea

Lista desordenada
Este ejemplo demuestra una lista desordenada.

Lista ordenada
Este ejemplo demuestra una lista ordenada.

(Puede encontrar más ejemplos al final de esta página.)

Lista desordenada HTML

Una lista desordenada es una lista de elementos, y estos elementos se marcan con viñetas en negrita (típicamente pequeños círculos negros).

Las listas desordenadas usan la etiqueta <ul>

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

El navegador muestra lo siguiente:

  • Coffee
  • Milk

Lista ordenada HTML

De manera similar, una lista ordenada también es una lista de elementos, donde los elementos se marcan con números. La lista ordenada comienza con la etiqueta <ol>. Cada elemento de la lista comienza con la etiqueta <li>.

Los elementos de la lista se marcan con números.

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

El navegador muestra lo siguiente:

  1. Coffee
  2. Milk

Lista de definición HTML

Una lista de definición no es solo una lista de elementos, sino una combinación de elementos y sus descripciones.

La lista de definición comienza con la etiqueta <dl>. Cada elemento de la lista de definición comienza con <dt>. La definición de cada elemento de la lista comienza con <dd>.

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

El navegador muestra lo siguiente:

Coffee
- black hot drink
Milk
- white cold drink

Notas - Consejos útiles

Consejo:Dentro de los elementos de la lista se pueden usar párrafos, saltos de línea, imágenes, enlaces y otras listas, etc.

Examples

Más ejemplos

Diferentes tipos de listas ordenadas
Este ejemplo demuestra diferentes tipos de listas ordenadas.

Diferentes tipos de listas desordenadas
Este ejemplo demuestra diferentes tipos de listas desordenadas.

Listas anidadas
Este ejemplo demuestra cómo anidar listas.

Listas anidadas 2
Este ejemplo demuestra listas anidadas más complejas.

Lista de definición
Este ejemplo demuestra una lista de definición.

Etiquetas de lista HTML

Etiqueta Descripción
<ol> Define una lista ordenada
<ul> Define una lista desordenada
<li> Define un elemento de lista
<dl> Define una lista de definición
<dt> Define un término de la lista de definición
<dd> Define la descripción de un elemento de la lista de definición
Otras extensiones