Listas en HTML – Cómo crear y poner viñetas

Anterior
Avanzar

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, con viñetas de varios tipos, etc. 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.

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:

Te recomendamos leer:  Formularios en HTML - Cómo crear y personalizar
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!

Alex HM.

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:

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.
Te recomendamos leer:  Etiquetas HTML tipos y ejemplos

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 lo 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:

Te recomendamos leer:  Cómo hacer tablas en HTML
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 cuajar el aprendizaje.

lecciones HTML
Anterior
Avanzar
0 0 votar
Calificación
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios

Aquí dispones del temario completo del curso para aprender HTML desde cero.

Temario HTML

1.- Introducción a HTML
2.- Qué es HTML
3.- Estructura básica de un documento HTML
4.- Etiquetas HTML tipos y ejemplos
5.- Atributos en HTML
6.- Etiquetas para texto HTML y formatos HTML
7.- Cómo poner hipervínculos o enlaces en HTML
8.- Cómo insertar una imagen en HTML
9.- Listas en HTML – Cómo crear y poner viñetas
10.- Cómo hacer tablas en HTML
11.- Formularios en HTML – Cómo crear y personalizar
12.- Etiqueta div y span en HTML
13.- Atributo id y class en HTML
14.- Elementos Inline y Block en HTML
15.- Maquetación web en HTML

Aquí dispones del temario completo del curso para aprender HTML desde cero.

Temario HTML

1.- Introducción a HTML
2.- Qué es HTML
3.- Estructura básica de un documento HTML
4.- Etiquetas HTML tipos y ejemplos
5.- Atributos en HTML
6.- Etiquetas para texto HTML y formatos HTML
7.- Cómo poner hipervínculos o enlaces en HTML
8.- Cómo insertar una imagen en HTML
9.- Listas en HTML – Cómo crear y poner viñetas
10.- Cómo hacer tablas en HTML
11.- Formularios en HTML – Cómo crear y personalizar
12.- Etiqueta div y span en HTML
13.- Atributo id y class en HTML
14.- Elementos Inline y Block en HTML
15.- Maquetación web en HTML