Las listas en html son elementos muy importantes de alto significado semántico, en esta ocasión aprenderemos todo sobre ellas, además aprenderemos a hacer listas ordenadas y sin ordenar, cómo ponerle viñetas de varios tipos y mucho más. Sin más, empecemos con la lección.
Ver índice del contenido
Cómo hacer listas ol y ul HTML
Para empezar, existen dos tipos de listas html en general: listas ordenadas y listas sin ordenar, a continuación veamos como se implementa cada uno y sus diferencias.
Listas no ordenadas <ul> en HTML
Una lista no ordenada en HTML es aquella en la que los elementos no están enumerados ni marcados por algún caracter que designe orden. Los elementos están simplemente listadas con alguna viñeta predeterminada como puede ser un punto u otro tipo como veremos más adelante.
Etiqueta <ul>
Una etiqueta <ul>
contiene a todas los elementos de la lista y dentro de ella irán los atributos que afectan a toda la lista en bloque.
Etiqueta <li>
Los elementos de la lista propiamente dichos, se especifican en una etiqueta <li>
, de tal manera que cada elemento es independiente de otro elemento.
Ejemplo de lista desordenada en HTML
Como ejemplo demostrativo veamos una lista sin ordenar de las estaciones del año:
<ul> <li> primavera</li> <li> verano </li> <li> otoño </li> <li> invierno </li> </ul>
Resultado:

Listas ordenadas en HTML <ol>
Una lista ordenada en HTML es aquella en la que los elementos estan enumerados o marcado con algún signo alfanumérico que indique el orden de los elementos.
Etiqueta <ol>
Se utiliza la etiqueta html <ol>
para crear listas ordenadas, entre la etiqueta de apertura y cierre irán los elementos de la lista dentro de una etiqueta <li>
respectivamente.
Etiqueta <li>.- En cualquier caso la etiqueta <li>
sirve para indicar los elementos de la lista, independientemente de si son ordenadas o desordenadas.
Ejemplos de listas ordenadas en HTML:
A continuación veamos un ejemplo concreto de la lista ordenada en html de los días de la semana:
<ol> <li> lunes</li> <li> martes </li> <li> miércoles </li> <li> jueves </li> <li> viernes </ li> <li> sábado </li> <li> domingo</li> </ol>
Resultado:

Crear una lista en HTML es ¡Fantástico y muy sencillo!
A continuación aprenderemos a crear sublistas en HTML, ¡Vamos!
Listas dentro de listas o sublistas
Ingresando etiquetas <ul>
o <ol>
justo después de una etiqueta <li>
podemos conseguir sublistas o listas dentro de listas.
Ejemplo de sublistas en HTML
En el siguiente ejemplos crearemos un lista con sublistas dentro de ella, para ello tomaremos la lista de algunos continentes y dentro sublistas de países o regiones dentro de ellas, solo a modo de ejemplo:
<ul> <li>América</li> <ol> <li>América central</li> <li>América sur</li> <li>América norte</li> </ol> <li>África</li> <ol> <li>África Septentrional</li> <li>África Occidental</li> <li>África Central</li> <li>África Oriental</li> <li>África Meridional</li> </ol> <li>Antártida</li> <ul> <li>Antártida oriental</li> <li>Antártida occidental</li> </ul> <li>Asia</li> <li>Europa</li> <li>Oceania</li> </ul>
Resultado:

Lista de terminologías o lista de definiciones en HTML
Aprenderemos a como hacer una lista de terminologías o definiciones en html con sus respectivas etiquetas. Esto nos servirá para dar un significado semántico a los términos y sus definiciones.
- ETIQUETA <dl>.- Esta etiqueta se utiliza para crear una lista de definiciones si lo deseamos.
- ETIQUETA <dt>.- Esta etiqueta contiene el término que queremos definir.
- ETIQUETA <dd>.- Esta etiqueta contiene la definición del término que le precede.
Todos estos se usan con su respectiva etiqueta de cierre, veamos un ejemplo:
<dl><dt>Mamifero</dt><dd> Especie de animales que maman</dd></dl> <dl><dt>Vertebrado</dt><dd> Especie de animales que poseen huesos</dd></dl> <dl><dt>Reptil</dt><dd> Especie de animales que se arrastran por el suelo</dd></dl>
Resultado:

Cómo poner viñetas en listas de HTML
Poner viñetas en una lista html es tan fácil como veremos a continuación, se trata de poner estilo a nuestro elemento de lista y para ello emplearemos el atributo STYLE
con unos valores pensados para este fin, veamos:
Atributo style
Para crear listas con viñetas en HTML utilizamos el atributo style
, esto indicará que la lista tendrá un estilo especial, emplea una propiedad y en este caso será la propiedad de list-style-type
y básicamente hace referencia al tipo de viñeta, finalmente el valor de dicha propiedad determina el tipo de viñeta que se mostrará, en nuestro caso queremos poner viñetas diferentes a los predeterminados ¿verdad? Pues bien, conozcamos los posibles valores que puede tomar y su respectiva descripción.
Valores para tipos de viñeta HTML:
disc
: este es el valor predeterminado.circle
: muestra marcador es un círculo hueco.square
: muestra marcador es un cuadrado.decimal
: marcador es un número decimal, que comienza con 1.lower-roman
: marcador es un número romano en minúscula (i, ii, iii, iv, v, etc.)upper-roman
: el marcador es un número romano en mayúscula (I, II, III, IV, V, etc.)
Además de estos existen más y los puedes probar, te van a encantar: lower-greek, lower-latin, upper-latin, lower-alpha, upper-alpha, none.
Ejemplos para poner viñetas en listas HTML
En el siguiente ejemplo veremos como emplear el atributo style y la propiedad list-style-type
con sus respectivos valores, ademas de como se ve el resultado final:
<ul style= "list-style-type: circle;"> <li>Primer lista </li> <li>Primer lista </li> <li>Primer lista </li> </ul> <ul style= "list-style-type: square;"> <li>SEGUNDA LISTA </li> <li>SEGUNDA LISTA </li> <li>SEGUNDA LISTA </li> </ul> <ul style= "list-style-type: upper-roman;"> <li>Tercera lista </li> <li>Tercera lista </li> <li>Tercera lista </li> </ul> <ul style= "list-style-type: lower-greek;"> <li>Cuarta LISTA </li> <li>Cuarta LISTA </li> <li>Cuarta LISTA </li> </ul>
Resultado:

Cómo poner imagenes como viñetas en listas de HTML
Poner imágenes como viñetas de listas HTML es tan sencillo como emplear la propiedad list-style-image
y especificar cual es la imagen en el campo de los valores, ya sea indicando la dirección URL de la imagen o indicando su nombre en caso se encuentre almacenada en la misma carpeta del documento HTML.
Ejemplo de imagen en viñeta de lista HTML
En el siguiente ejemplo veremos como se emplea la propiedad list-style-image
para poner una imagen cualquiera (Que esta almacenada en la misma carpeta que nuestro documento html) como viñeta de nuestras listas, este le dará un aspecto espectacular a nuestra lista.
<ul style="list-style-image:url(corazon.png);"> <li> Primer elemento</li> <li> Segundo elemento</li> <li> Tercer elemento</li> <li> Cuarto elemento</li> <li> Quinto elemento</li> <li> Sexto elemento</li> </ul>
Resultado:

Si la imagen deseada se encuentra ubicada en una dirección URL, entonces colocamos dicha URL en vez del nombre del archivo, de la siguiente manera:
<ul style="list-style-image:url(https://cdn.pixabay.com/photo/2012/04/10/22/57/heart-26790__340.png);">
Ahora que ya sabes a crear listas en HTML es momento de que empieces a practicar, aunque no es nada difícil, practica para consolidar tu aprendizaje.
[popup_anything id=»4350″]
Gracias sos el mejor, una gran ayuda
Hola JUXN, Encantado de servir, gracias!
Gracias por la info, ha sido de mucha ayuda, saludos
Excelente articulo, me ayudo con las viñetas. Gracias!
Se te ha olvidado cerrarlo con el «;» sino no funciona:
<ul style= «list-style-type: square;«>
Una pregunta, cómo puedo poner numeración o viñetas dentro de una tabla, cuando intento poner una sale afuera de la tabla.
Colocando la lista con viñetas dentro de las etiquetas de tabla (celda) correspondientes, debería funcionar.
Buen tutorial de HTML, para poner viñetas, gracias.
Intenté hacerlo con formato estilos CSS:
pero no sale, probando incluso algunas combinaciones: