Listas HTML

Ejemplos de una lista no ordenada y una lista ordenada:

Lista no ordenada:

  • Elemento.
  • Elemento.
  • Elemento.
  • Elemento.

Lista ordenada:

  1. Primer elemento.
  2. Segundo elemento.
  3. Tercer elemento.
  4. Cuarto elemento.

Listas no ordenadas HTML

Una lista no ordenada inicia con la etiqueta <ul>. Cada elemento de la lista inicia con la etiqueta <li>. Los elementos de las listas son marcados con pequeños puntos medios antes de cada uno (balines):

Ejemplo:

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

Listas no ordenadas - El atributo style

Es posible agregarle atributos de estilos a las listas no ordenadas, para definir el estilo del marcador:

Estilo Descripción
list-style-type: disc La lista de elementos se marcarán con balines.
list-style-type: circle La lista de elementos se marcarán con círculos.
list-style-type: square La lista de elementos se marcarán con cuadros.
list-style-type: none La lista de elementos no mostrarán ningún marcador.

Discos:

<ul style="list-style-type: disc;">
  <li>Café</li>
  <li>Té</li>
  <li>Lecha</li>
</ul>

Circulos:

<ul style="list-style-type: circle:">
  <li>Café</i>
  <li>Té</li>
  <li>Leche</li>
</ul>

Cuadros:

<ul style="list-style-type: square;">
  <li>Café</li>
  <li>Té</li>
  <li>Leche</li>
</ul>

Ninguno:

<ul style="list-style-type: none;">
  <li></li>
  <li></li>
  <li></li>
</ul>

Listas ordenadas HTML

Una lista ordenada inicia con la etiqueta <ol>. Cada elemento de lista inicia con la etiqueta <li>. El elemento de lista son marcados con números, es decir, los elementos son enumerados:

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

Listas de ordenadas - El atributo Style

Es posible agregarle atributos de estilos a las listas ordenadas, para definir el estilo del marcador:

Estilo Descripción
type="1"  Los elementos de la lista son enumerados por números.
type="A"  Los elementos de la lista son enumerados por letras mayúsculas.
type="a"  Los elementos de la lista son enumerados por letras minúsculas.
type="I"  Los elementos de la lista son enumerados por números romanos en mayúsculas.
type="i"  Los elementos de la lista son enumerados por números romanos en minúsculas.

Números:

<ol type="1">
  <li>Café</li>
  <li>Té</li>
  <li>Leche</li>
</ol>

Letras Mayúsculas:

<ol type="A">
  <li>Café</li>
  <li>Té</li>
  <li>Leche</li>
</ol>

Letras Minúsculas:

<ol type="a">
  <li>Café</li>
  <li>Té</li>
  <li>Leche</li>
</ol>

Números Romanos en Mayúsculas:

<ol type="I">
  <li>Café</li>
  <li>Té</li>
  <li>Leche</li>
</ol>

Números Romanos en Minúsculas:

<ol type="i">
  <li>Café</li>
  <li>Té</li>
  <li>Leche</li>
</ol>

Listas de Descripción HTML

HTML también soporta listas de descripciones. Una lista de descripción es una lista de términos, con una descripción para cada término.

La etiqueta <dl> define una lista de descripción, la etiqueta <dt> define un término (el nombre) y la etiqueta <dd> define la descripción de un término.

Ejemplo:

<dl>
  <dt>Café</dt>
  <dd>- Bebida caliente y de color negro.</dd>
  <dt>Leche</dt>
  <dd>- Bebida fría y de color blanco</dd>
</dl>

Listas Anidadas

Las listas pueden estar anidadas, es decir, listas dentro de otras listas:

Ejemplo:

<ul>
  <li>Café</li>
  <li>Té
    <ul>
      <li>Té negro</li>
      <li>Té verde</li>
    </ul>
  </li>
  <li>Leche</li>
</ul>

Los elementos de listas pueden contener nuevas listas y otros elementos HTML como imágenes, ligas, etc.

Listas Horizontales

A las listas HTML se le pueden dar diferentes estilos con los estilos CSS. Una muy popular es darle estilos CSS a las listas HTML para que sean mostradas en forma horizontal:

<¡doctype html>
<html>
<head>
<style>
ul#menu li {
  display: inline;
}
</style>
</head>
<body>
<h2>Listas Horizontales</h2>
<ul id="menu">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>PHP</li>
</ul>
</body>
</html>

Con un poco de estilos extra, podemos darle un estilo de menú:

ul#menu {
  padding: 0;
}
ul#menu li {
  display: inline;
}
ul#menu li a {
  background: color;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
  background-color: orange;
}

Resúmen del Capítulo

  • Usamos el elemento <ul> del HTML para definir una lista no ordenada.
  • Usamos el atributo style del HTML para definir la figura del marcador (bola, circulo, cuadro o ninguno).
  • Usamos el elemento <ol> del HTML para definir una lista ordenada.
  • Usamos el atributo type del HTML para definir el tipo de numeración (números, letras, romanas, mayúsculas o minúsculas).
  • Usamos el elemento <li> del HTML para definir un elemento de lista (tanto para listas ordenadas como no ordenadas).
  • Usamos el elemento <dl> del HTML para definir una lista de descripción.
  • Usamos el elemento <dt> del HTML para definir un elemento termino para listas de descripción.
  • Usamos el elemento <dd> del HTML para definir un elemento descripción para listas de descripción.
  • Las listas pueden anidarse una dentro de otra.
  • Los elementos de lista pueden contener otros elementos HTML.
  • Usamos la propiedad CSS display: inline; para mostrar una lista de forma horizontal.