¿Cómo crear y personalizar listas en HTML?

En un sitio web, casi siempre encontrará al menos una lista. Esta lista se puede utilizar para enumerar los servicios de una empresa, los ingredientes de una receta, una lista de etapas durante un proceso, etc.

Por tanto, lo que es seguro es que en algún momento durante la creación de su sitio tendrá que crear una lista. En este tutorialrial, por lo tanto, veremos las diferentes listas que existen en la web, cómo crearlas y perfeccionarlas para que se parezcan a lo que estás buscando o necesitas.

Sin más preámbulos, primero echemos un vistazo a los tipos de listas que existen en HTML.

Los diferentes tipos de lista

Actualmente son 3, los diferentes tipos de listas se usarán para enumerar diferentes categorías de información. Por tanto, encontraremos listas desordenadas, listas ordenadas y listas de descripción (o definición).

Listas ul (listas con puntos)

Las listas desordenadas se pueden utilizar para enumerar una serie de información que no requiere necesariamente una clasificación alfabética o numérica.

Para crear una lista en HTML, usamos las etiquetas HTML

y para llenar esta lista de elementos usamos las etiquetas

para definir un elemento de la lista.

Ejemplo de una lista desordenada:

<ul>
<li>Elemento</li>
<li>Elemento</li>
<li>Elemento</li>
</ul>

Listas ordenadas ol (listas numeradas)

Las listas ordenadas se utilizan para organizar la información y listarla en un orden específico que no se puede cambiar.

Una lista ordenada en HTML se crea mediante el uso de etiquetas

y, al igual que con las listas desordenadas, puede completar listas ordenadas de elementos mediante el uso de

  • </ li>

Ejemplo de lista ordenada:

<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>

Las listas de descripción de dl (o definición)

Este último tipo de lista permite dar información descriptiva y complementaria sobre un elemento específico.

Puede crear una lista de descripción (o definición) utilizando las etiquetas HTML. A diferencia de otras listas anteriores, los elementos de esta no serán definibles por el elemento HTML.

Para empezar, se pueden agregar 2 elementos diferentes a esta lista:

  • La palabra o frase para definir o describir. Usaremos las etiquetaspara crear este elemento.
  • La definición (o descripción) de la palabra agregada anteriormente. Las etiquetasse utilizarán para este elemento.

Ejemplo de lista de descripción:

<dl>
<dt>Expression</dt>
<dd>Description</dd>
</dl>

Uso concreto de listas

Para ayudarlo a elegir qué lista usar en su sitio web, aquí hay un ejemplo concreto en el que se utilizan los 3 tipos diferentes de listas HTML.

Por defecto, las listas HTML son visualmente poco atractivas. Pero es posible modificarlos gracias a algunos atributos HTML o agregando un estilo CSS a su página web.

Cambiar el estilo de las listas

La apariencia y el formato de las listas se pueden configurar mediante parámetros (atributos HTML o propiedades CSS) específicos de los elementos de la lista.

Cambiar la apariencia de los puntos en una lista ul

Si los discos negros no son de su agrado, puede cambiar la apariencia de las viñetas en una lista desordenada. Nada podría ser más simple, agregue la propiedad “list-style-type” al elemento HTML “ul” y defina el valor que representará el estilo que desea dar a las viñetas de su lista.

Hay varios estilos posibles con viñetas de una lista desordenada, aquí hay algunas posibilidades:

  • Punto negro: list-style-type: disc;
  • Círculo: list-style-type: circle;
  • Cuadrado negro: list-style-type: square;
  • Cifras (lo que equivale a crear una lista ordenada): list-style-type: decimal;
  • Imagen: list-style-type: '@';
  • Nada: list-style-type: none;

Puede utilizar cualquier carácter ASCII como viñeta para su lista, por lo que ofrece una amplia gama de posibilidades para diseñar sus listas.

Si los tipos disponibles no le convienen, también existe la posibilidad de agregar una imagen en lugar de las viñetas en una lista. Gracias a la propiedad “list-style-image”, podrás crear listas con viñetas muy personalizadas simplemente indicando la url de una imagen.

Cambiar la apariencia de la numeración de una lista ordenada ol

Así como puede cambiar la apariencia de las viñetas en una lista desordenada, también podrá cambiar el estilo de las viñetas en una lista ordenada. Vamos a reutilizar la propiedad “list-style-type” con el elemento HTML “ol” así como nuevos valores que vamos a seguir para modificar las viñetas ordenadas.

Existen varios estilos para las viñetas de una lista ordenada, estos son algunos de los valores posibles:

  • Dígitos decimales: list-style-type: decimal;
  • Dígitos decimales con cero a la izquierda: list-style-type: decimal-leading-zero;
  • Números romanos en mayúsculas: list-style-type: upper-roman;
  • Números romanos en minúscula: list-style-type: lower-roman;
  • Alfabeto en mayúsculas: list-style-type: upper-alpha;
  • Alfabeto en minúsculas: list-style-type: lower-alpha;
  • Números griegos: list-style-type: lower-greek;

Iniciar una lista ordenada en un número definido

Si no desea comenzar su lista ordenada con el valor predeterminado inicial (1 para valores decimales o “a” para el alfabeto latino, por ejemplo), puede definir el atributo “inicio” de una lista ordenada e indicar a partir de qué valor que desea comenzar con un valor numérico entero.

Invertir el orden de una lista

El atributo “invertido” de una lista ordenada le permitirá invertir el orden de una lista. Por lo tanto, una lista decimal comenzará con el valor más alto y la lista alfabética comenzará con la última letra del alfabeto utilizado.

Crea una lista anidada

Una lista anidada es simplemente una lista dentro de una lista, el concepto es simple y también lo es su uso. Ya sea una lista ordenada o una lista desordenada, basta con agregar un nuevo elemento HTML “ul” u “ol” en un elemento de lista anterior.

Por lo tanto, puede anidar una lista ordenada en una lista desordenada y viceversa. Pero también puede anidar fácilmente una o más listas en otra lista del mismo tipo.

Conclusión

Las listas son muy útiles en Internet porque le permiten enumerar información con un formato muy fácil de leer. También es gracias a las listas que podrá crear menús, como un menú de navegación, para su sitio web.