MEJOR SITIO PARA DESARROLLADORES WEB
HTML CSS JAVASCRIPT SQL PYTHON PHP JAVA KOTLIN GO C C++ C# Django CÓMO W3.CSS AI Más 🔍 ◑ Libros REFERENCIAS EJERCICIOS
HTML5 Lecciones para principiantes

Ua En De

HTML Listas desordenadas

❮ Prev Next ❯

La etiqueta HTML <ul> define una lista desordenada (con viñetas).

Listo HTML desordenado

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

Los elementos de la lista estarán marcados con viñetas (pequeños círculos negros) de forma predeterminada:

Ejemplo

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Inténtalo tú mismo »

Listo HTML desordenado: elija el marcador de elemento de lista

La propiedad CSS list-style-type se utiliza para definir el estilo del marcador de elementos de la lista. Puede tener uno de los siguientes valores:

Valor Descripción
disc Establecer el marcador de elementos de la lista en una viñeta (predeterminado)
circle Establecer el marcador de elementos de la lista en un círculo
square Establecer el marcador de elementos de la lista en un cuadrado
none Los elementos de la lista no se marcarán

Ejemplo - Disc

<ul style="list-style-type:disc;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Inténtalo tú mismo »

Ejemplo - Circle

<ul style="list-style-type:circle;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Inténtalo tú mismo »

Ejemplo — Square

<ul style="list-style-type:square;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Inténtalo tú mismo »

Ejemplo — None

<ul style="list-style-type:none;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Inténtalo tú mismo »

Listas HTML anidadas

Las listas se pueden anidar (lista dentro de la lista):

Ejemplo

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
Inténtalo tú mismo »

Nota: Un elemento de lista (<li>) puede contener una nueva lista y otros elementos HTML, como imágenes y enlaces, etc.

Lista horizontal con CSS

Las listas HTML se pueden diseñar de muchas maneras diferentes con CSS.

Una forma popular es diseñar una lista horizontalmente para crear un menú de navegación:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>
Inténtalo tú mismo »

Consejo: Puedes aprender mucho más sobre CSS en nuestro Tutorial de CSS.

Resumen del capítulo

  • Utilice el elemento HTML <ul> para definir una lista desordenada
  • Utilice la propiedad CSS list-style-type para definir el marcador del elemento de la lista
  • Utilice el elemento HTML <li> para definir un elemento de lista
  • Las listas se pueden anidar
  • Los elementos de la lista pueden contener otros elementos HTML
  • Utilice la propiedad CSS float:left para mostrar una lista horizontalmente

Etiquetas de lista HTML

Etiqueta Descripción
<ul> Define una lista desordenada
<ol> Definir una lista ordenada
<li> Define un elemento de lista
<dl> Define una lista de descripciones
<dt> Define un término en una lista de descripciones
<dd> Describe el término en una lista de descripciones

Para obtener una lista completa de todas las etiquetas HTML disponibles, visite nuestra Referencia de etiquetas HTML.

❮ Prev Next ❯

✍ Comentarios