En este post aprenderás todo lo que necesitas saber acerca de las listas en HTML y cómo cambiar las viñetas de las mismas: abordaremos las ordenadas y las desordenadas con EJEMPLOS CLAROS. ¡ENTRA!
INICIAMOS:
Bienvenidos a otro post.
Como sabemos, el HTML es la estructura o esqueleto de todo sitio web, es la base que sostiene todo lo que tú ves; todo el diseño y forma del sitio está estructurado gracias a HTML.
Dentro de los procesos de texto que podemos hacer con este lenguaje de maquetado son las listas, tanto desrdenadas como las ordenadas. Podemos decirle al HTML que cambie incluso las viñetas, cosa que igual te enseñaremos.
En esta lección conocerás todo lo relacionado con el uso de las listas en una página web, ya que éstas se usan para crear enumeraciones, diccionarios, menús entre otras cosas más.
Índice del artículo
Las listas en el HTML
En el orden de la información, las listas juegan un papel muy importante, ya que en los procesos de texto se requieren para el desarrollo no sólo de literal listas, sino que también pueden emplearse para crear increíbles menús usando CSS, entre otras cosas más.
Prepárate para abordar el tema de las listas ordenadas y desordenadas del HTML, ya que te mostraremos con ejemplos claros cómo crear ambos tipos de listas. ¡Vamos!
Listas desordenadas
Primero, mencionar que para definir que vamos a hacer una lista desordenada, debemos hacer uso de la etiqueta llamada «ul«: su etiqueta de apertura es <ul> y su cierre </ul>.
Dentro de esta, todos los elemento de la lista tienen que ir dentro de la etiqueta «ul», y para definir cada uno de los elementos se utilizará la etiqueta «li«. Veamos un ejemplo claro:
<p>Lista con elementos desordenados</p> <ul> <li>Uno</li> <li>Dos</li> <li>Tres</li> </ul>
Como verás, para agregar un punto dentro de esta lista se deberás utilizar la etiqueta <li> y para su cierre </li>.
Lo que caracteriza a estas listas es que no llevan un contador sino esta compuesto por puntos, este tipo de listas las podemos configurar para que proporcione diferentes tipos de símbolos como cuadrados y círculos sin fondo.
Si quieres elegir el tipo de viñetas que tendrá la lista desordenada de tu HTML o algún elemento de esta, debes colocar el atributo «type» dentro de la etiqueta. Ejemplo:
<ul> <li type="circle">Viñeta con círculo sin fondo.</li> <li type="square">Viñeta cuadrada.</li> <li type="disc">Viñeta con círculo con fondo negro.</li> </ul>
También puedes anexar una lista ya sea ordenada o desordenada dentro de tu lista actual, y ahora tendrá una tabulación con respecto a esa lista:
<p>Lista con elementos desordenados</p>
<ul>
<li>Uno</li>
<li>Dos</li>
<ul>
<li>Segundo uno</li>
<li>Segundo dos</li>
</ul>
<li>Tres</li>
</ul>
Listas ordenadas
Primero, para poder definir una listas ordenadas en HTML, debemos hacer uso de las etiquetas <ol> con su cierre </ol>; igual que las listas desordenadas, para agregar un punto dentro de esta lista su etiqueta es <li> y su terminación </li>.
En este caso los puntos que agregues serán enumerados, dándole a cada nuevo punto un orden, la ventaja de utilizar este tipo de lista es que se puede cambiar el número de un punto con el atributo «value=Número» y depende el número, la lista seguirá su curso desde el numero colocado.
Si no le colocas ese atributo dentro de tu etiqueta HTML, la lista por defecto empezará desde el número 1.
Si quieres indicarle un inicio de número en tus listas de tu HTML, te dejamos un ejemplo para que veas cómo podría estar estructurado.
<ol> <li value="5">Ordenado 1 (pero que indicamos que comience en 5</li> <li>Ordenado 2 (salta a ser 6)</li> <li>Ordenado 3 (salta a ser 7)</li> </ol>
También puedes cambiar el tipo de numeración, y puedes elegir entre numeración romana, alfabética o la que tiene por defecto: numérica.
Si deseas cambiarlo, debes de colocar el atributo «type» en la etiqueta inicio de tu lista ordenada. Puedes escoger entre 5 valores distintos:
- type=»a» (numeración alfabética minúscula).
- type=»A» (numeración alfabética mayúscula).
- type=»i» (numeración romana minúscula).
- type=»I» (numeración romana mayúscula).
- type=»1″ (numeración por números).
También en el mismo ol podemos indicarle a HTML en qué número quieres que inicie la lista ordenada usando el atributo «start».
Te dejamos un ejemplo útil de cómo podrías implementar las listas desordenadas en HTML:
<!-- Lista ordenada que tendrá numeración alfabética iniciando desde la letra "c" (start = 3). -->
<ol type="a" start="3">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<ol type="1">
<li>Sub-elemento 1</li>
<li>Sub-elemento 2</li>
</ol>
<li>Elemento 4</li>
</ol>
Espero que este post haya sido de tu agrado y que hayas aprendido.
Antes de concluir el artículo, me gustaría hacerte mención de los anteriores temas del HTML que quizá te puedan ser de mucho interés:
- Etiquetas, atributos y comentarios en HTML
- Etiquetas básicas de HTML: Estructura de una página web
- Códigos HTML útiles que desearás añadir en tu web
Si deseas más detalles interesantes sobre el lenguaje de maquetado HTML, te invito a adentrarte a nuestra página llena de temas interesantes.
¿Pudiste comprender las listas ordenadas y desordenadas del HTML? ¡Haznoslo saber en la caja de comentarios!
Nos vemos en otro post.