Listas HTML

HTML admite listas ordenadas, desordenadas y definidas

Ejemplo

Lista desordenada
Este ejemplo muestra una lista desordenada.
Lista ordenada
Este ejemplo muestra una lista ordenada.

(Puedes encontrar más ejemplos en la parte inferior de esta página)

Lista desordenada

Una lista desordenada es una lista de elementos, donde los elementos de la lista se marcan con puntos redondos negros (puntos negros pequeños típicos).

La lista desordenada comienza con la etiqueta <ul>. Cada elemento de lista comienza con <li>.

<ul>
<li>Café</li>
<li>Leche</li>
</ul>

El navegador muestra lo siguiente:

  • Café
  • Leche

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

Lista ordenada

Del mismo modo, las listas ordenadas también son una columna de proyectos, y los elementos de la lista se marcan con números.

Las listas ordenadas comienzan con la etiqueta <ol>. Cada elemento de la lista comienza con la etiqueta <li>.

<ol>
<li>Café</li>
<li>Leche</li>
</ol>

El navegador muestra lo siguiente:

  1. Café
  2. Leche

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

Lista de definiciones

Las listas personalizadas no son solo una columna de proyectos, sino una combinación de proyectos y sus notas.

Las listas personalizadas comienzan con la etiqueta <dl>. Cada elemento de la lista personalizada comienza con <dt>. Cada definición del elemento de la lista personalizada comienza con <dd>.

<dl>
<dt>Café</dt>
<dd>Bebida caliente oscura</dd>
<dt>Leche</dt>
<dd>Bebida fría blanca</dd>
</dl>

El navegador muestra lo siguiente:

Café
Bebida caliente oscura
Leche
Bebida fría blanca

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

Más ejemplos

Diferentes tipos de listas sin orden
Este ejemplo muestra una lista sin orden.
Diferentes tipos de listas ordenadas
Este ejemplo muestra diferentes tipos de listas ordenadas.
Lista anidada
Este ejemplo muestra cómo anidar listas.
Lista anidada 2
Este ejemplo muestra una lista anidada más compleja.
Lista de definiciones
Este ejemplo muestra una lista de definiciones.

Etiquetas de lista

Etiqueta Descripción
<ol> Define la lista ordenada.
<ul> Define la lista sin orden.
<li> Define el elemento de la lista de definiciones.
<dl> Define la lista de definiciones.
<dt> Define el proyecto de la definición.
<dd> Define la descripción de la definición.
<dir> Descontinuado. Utilice <ul> en su lugar.
<menu> Descontinuado. Utilice <ul> en su lugar.