Blog
Bienvenido a la sección del curso “Listas”. Aquí conocerás esta gran herramienta de HTML, y verás lo fácil que es añadir listas a tu página web, y también conocerás acerca de sus atributos y como utilizarlos. Quizás pienses que este recurso es algo aburrido, o que no lo necesitarás, pero puedes hacer una lista con distintos enlaces, añadirle estilos y ¡habrás hecho un menú de navegación en tu página web! Así que sácale el mayor provecho a esta sección del curso. Y recuerda que el límite del diseño lo pones tu.
Te invito a seguir leyendo para que aprendas mas de este importante recurso del lenguaje HTML.
¿Qué son las listas en HTML?
Los elementos de listas en HTML son un recurso para organizar párrafos, conceptos, nombres, enumerar lugares, entre otros usos que creas que puedes darle. HTML proporciona una forma de crear una lista ordenada (con elementos que van siendo contados; 1, 2, 3 …) y una lista desordenada con viñetas en lugar de números. Las listas son una buena forma de formalizar una número de elementos y dejar que el estilo HTML haga el trabajo por ti.
Listas ordenadas
Las listas ordenadas son aquellas que te enumeran (ya sea con números o letras), todos los elementos que contengas en tu lista. Estas listas se denotan con las etiquetas <0l></ol>, y cada elemento que contienen van encerrados en las etiquetas <li></li> Aquí te muestro un ejemplo de cómo crear una lista ordenada:
<!DOCTYPE html> <lang="es"> <html> <head> <title>Ejemplo de lista ordenada</title> </head> <body> <p>Aquí hay una lista con sus elementos ordenados con números: </p> <ol type="1"> <li>Primer elemento.</li> <li>Segundo elemento.</li> <li>Tercer elemento.</li> </ol> </body> </html>
Atributo type
La etiqueta <ol> utiliza un atributo llamado type; este atributo denota la forma en la que deseas que se enumere tu lista (con números, letras, o números romanos). Abajo te muestro ejemplos de cómo utilizar el atributo type para cada caso.
Para contar los elementos de tu lista usando números (1, 2, 3 …) utiliza el atributo type=”1″ , como se muestra en el siguiente código:
<!DOCTYPE html> <lang="es"> <html> <head> <title>Ejemplo de lista ordenada</title> </head> <body> <p>Aquí hay una lista con sus elementos ordenados con números: </p> <ol type="1"> <li>Primer elemento.</li> <li>Segundo elemento.</li> <li>Tercer elemento.</li> </ol> </body> </html>
Para contar los elementos de tu lista usando letras mayúsculas (A, B, C …) utiliza el atributo <type=”A”>, como se muestra en el siguiente código:
<!DOCTYPE html> <lang="es"> <html> <head> <title>Ejemplo de lista ordenada</title> </head> <body> <p>Aquí hay una lista con sus elementos ordenados con letras mayúsculas: </p> <ol type="A"> <li>Primer elemento.</li> <li>Segundo elemento.</li> <li>Tercer elemento.</li> </ol> </body> </html>
Para contar los elementos de tu lista usando números romanos en mayúsculas (I, II, III …) utiliza el atributo type=”I” , como se muestra en el siguiente código:
<!DOCTYPE html> <lang="es"> <html> <head> <title>Ejemplo de lista ordenada</title> </head> <body> <p>Aquí hay una lista con sus elementos ordenados con números romanos en mayúsculas: </p> <ol type="I"> <li>Primer elemento.</li> <li>Segundo elemento.</li> <li>Tercer elemento.</li> </ol> </body> </html>
Para contar los elementos de tu lista usando números romanos en minúsculas (i, ii, iii …) utiliza el atributo type=”i” , como se muestra en el siguiente código:
<!DOCTYPE html> <lang="es"> <html> <head> <title>Ejemplo de lista ordenada</title> </head> <body> <p>Aquí hay una lista con sus elementos ordenados con números romanos en minúsculas: </p> <ol type="i"> <li>Primer elemento.</li> <li>Segundo elemento.</li> <li>Tercer elemento.</li> </ol> </body> </html>
Listas desordenadas
Las listas desordenadas en HTML no utilizan números o letras para organizar sus elementos, sino que utilizan viñetas para cada elemento. Aquí te muestro un ejemplo de una lista desordenada en HTML:
<!DOCTYPE html> <lang="es"> <html> <head> <title>Ejemplo de lista desordenada</title> </head> <body> <ul> <li>Primer elemento.</li> <li>Segundo elemento.</li> <li>Tercer elemento.</li> </ul> </body> </html>
Atributo style=”list-style-type: “
Con este atributo de la etiqueta <ul> podemos cambiar el icono de la viñeta que estamos utilizando en nuestra lista desordenada. Abajo te muestro ejemplos de cómo cambiar el icono de la viñeta con este atributo.
Si deseas que te aparezca un disco como icono tienes que usar el atributo style=”list-style-type: disc”. Aquí hay un ejemplo del tipo de estilo de lista de discos en HTML:
<!DOCTYPE html> <lang="es"> <html> <head> <title>Ejemplo de lista desordenada</title> </head> <body> <p>Aquí hay una lista de artículos desordenados usando un icono de disco:</p> <ul style="list-style-type: disc"> <li>Primer elemento.</li> <li>Segundo elemento.</li> <li>Tercer elemento.</li> </ul> </body> </html>
Si deseas que te aparezca un círculo como icono tienes que usar el atributo style=”list-style-type: circle”. Aquí hay un ejemplo del tipo de estilo de lista de círculos en HTML:
<!DOCTYPE html> <lang="es"> <html> <head> <title>Ejemplo de lista desordenada</title> </head> <body> <p>Aquí hay una lista de artículos desordenados usando un icono de círculo:</p> <ul style="list-style-type: circle"> <li>Primer elemento.</li> <li>Segundo elemento.</li> <li>Tercer elemento.</li> </ul> </body> </html>
Si deseas que te aparezca un cuadrado como icono tienes que usar el atributo style=”list-style-type: square”. Aquí hay un ejemplo del tipo de estilo de lista de cuadrados en HTML:
<!DOCTYPE html> <lang="es"> <html> <head> <title>Ejemplo de lista desordenada</title> </head> <body> <p>Aquí hay una lista de artículos desordenados usando un icono de cuadrado:</p> <ul style="list-style-type: square"> <li>Primer elemento.</li> <li>Segundo elemento.</li> <li>Tercer elemento.</li> </ul> </body> </html>
Si deseas que no te aparezca ningún icono tienes que usar el atributo style=”list-style-type: none”. Aquí hay un ejemplo del tipo de estilo de lista sin icono en HTML:
<!DOCTYPE html> <lang="es"> <html> <head> <title>Ejemplo de lista desordenada</title> </head> <body> <p>Aquí hay una lista de artículos no ordenados sin icono:</p> <ul style="list-style-type: none"> <li>Primer elemento.</li> <li>Segundo elemento.</li> <li>Tercer elemento.</li> </ul> </body> </html>
Listas anidadas en HTML
Con HTML también puedes hacer listas anidadas.
<!DOCTYPE html> <html> <head> <title>Ejemplo</title> </head> <body> <p>Ejemplo de listas anidadas</p> <ul> <li>Primer elemento</li> <li>Segundo elemento</li> <li>Tercer elemento</li> <!-- Aquí haremos la siguiente lista --> <ul> <li>Primer elemento</li> <li>Segundo elemento</li> <li>Tercer elemento</li> </ul> </ul> </body> </html>
Listas de descripción en HTML
Este tipo de lista es utilizado para enumerar conceptos; ya que puedes mostrar una lista de elementos con su respectiva descripción. Son muy útiles si quieres describir párrafos, algún que otro producto, entre otros elementos mas que desees describir. En fin, este es otro tipo de lista que te trae HTML para que le saques el mayor provecho posible, veamos el siguiente ejemplo de listas de descripción:
<!DOCTYPE html> <lang="es"> <head> <title>Ejemplo de listas de descripción</title> </head> <html> <body> <p>Ejemplo de lista de descripción:</p> <dl> <dt>Café</dt> <dd>El café es una bebida caliente, generalmente oscura de sabor algo amargo.</dd> <dt>Leche</dt> <dd>La leche se bebe casi siempre fría, es de color blanco, y generalmente proviene de las vacas que son ordeñadas.</dd> <dt>Limonada</dt> <dd>La limonada es una bebida fría hecha a base de jugo de limón con agua, azúcar, y hielo.</dd> </dl> </body> </html>
Si has llegado hasta aquí enhorabuena. Te recomendamos realizar nuestro curso gratuito sobre HTML y CSS:
[…] Listas […]