TODO de LISTAS en HTML | Cómo crear y poner viñetas

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.

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.

Te recomendamos leer:  Introducción a HTML y al desarrollo web

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 desordenadas en HTML - ejemplo
Imagen resultado de una lista desordenada en HTML

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:

Lista ordenada HTML
Ejemplo de lista ordenada en HTML

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:

Te recomendamos leer:  Etiqueta div y span en HTML
Cómo crear sublistas en HTML
Listas dentro de listas en HTML

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:

Lista de definiciones en HTML - ejemplo
Imagen resultado de una lista de definiciones

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.)
Te recomendamos leer:  ¿Qué es HTML Para qué sirve y cómo funciona?

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:

Tipos de viñeta en listados HTML
Imagen con los diferentes tipos de viñeta en listas HTML

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:

Listas con viñetas de imagen HTML
Imagen de una lista en HTML cuyas viñetas son imágenes de corazones.

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″]

4.6/5 - (8 votos)

9 comentarios en «TODO de LISTAS en HTML | Cómo crear y poner viñetas»

Deja un comentario

Web Devs