La etiqueta HTML
<ul>define una lista desordenada.
Lista desordenada
Una lista desordenada comienza con la etiqueta <ul>. Cada elemento de la lista comienza con la etiqueta <li>.
Los elementos de la lista se marcarán con viñetas (pequeños círculos negros) de forma predeterminada:
Ejemplo:
Lista desordenada - elige el marcador
La propiedad CSS list-style-type se utiliza para definir el estilo del marcador del elemento de la lista. Puede tener uno de los siguientes valores.
Ejemplo:
| Valor | Descripción |
disc | Establece el marcador en una viñeta (predeterminado) |
circle | Establece el marcador en un círculo |
square | Establece el marcador en un cuadrado |
none | Los elementos de la lista no se marcarán |
Ejemplo disco:
<ul style="list-style-type:disc;">
<li>Colombia</li>
<li>Perú</li>
<li>México</li>
</ul>
Ejemplo círculo:
<ul style="list-style-type:circle;">
<li>Colombia</li>
<li>Perú</li>
<li>México</li>
</ul>
Ejemplo cuadrado:
<ul style="list-style-type:square;">
<li>Colombia</li>
<li>Perú</li>
<li>México</li>
</ul>
Ejemplo nulo:
<ul style="list-style-type:none;">
<li>Colombia</li>
<li>Perú</li>
<li>México</li>
</ul>
Listas anidadas
Las listas se pueden anidar (lista dentro de lista):
Ejemplo:
Nota: un elemento de lista (
<li>) puede contener una nueva lista y otros elementos HTML, como imágenes y enlaces, etc.
Listas horizontales
Las listas HTML se pueden diseñar de muchas maneras diferentes con CSS.
Ejemplo:
Lista de etiquetas
| Etiqueta | Descripción |
<ul> | Define una lista desordenada |
<ol> | Define una lista ordenada |
<li> | Define un elemento en una lista |
<dl> | Define una lista de descripción |
<dt> | Define un término en una descripción de lista |
<dd> | Describe el término en una descripción de lista |
Resumen
Usa el elemento
<ul>para definir una lista desordenadaUsa las propiedad
list-style-typepara definir el marcador de la listaUsa el elemento
<li>para definir un elemento de la listaLas listas se pueden anidar
Los elementos de la lista pueden contener otros elementos HTML
Traducido con 💚 desde W3Schools.com