Original article: HTML List – How to Use Bullet Points, Ordered, and Unordered Lists
Enumerar elementos en una página web es una tarea común que deberás realizar como desarrollador web. Es posible que debas enumerar los artículos del carrito de compras, el orden de los estudiantes según sus calificaciones, los perros con los ladridos más fuertes, etc.
Por lo tanto, debes conocer las diferentes formas en que puedes enumerar elementos usando HTML. Si bien puedes pensar que es algo trivial de aprender, es importante. Y es una de las características más utilizadas de HTML en el desarrollo web.
En este artículo, aprenderás todo acerca de los elementos de listas HTML, sus propiedades, estilos y cómo usarlos para crear listas ordenadas. Espero que te sea útil.
Cómo hacer listas en HTML
En HTML, podemos enumerar elementos en forma ordenada o desordenada.
Una lista ordenada utiliza números o algún tipo de notación que indica una serie de elementos.
Por ejemplo, una lista ordenada puede comenzar con el número 1 y continuar por el 2, 3, 4, etc. Tu lista ordenada también puede comenzar con la letra A y pasar por B, C, D, etc.
Aquí hay un ejemplo de una lista ordenada con los nombres y calificaciones de los estudiantes.
Por otro lado, tenemos listas desordenadas, como una lista de tareas, por ejemplo. Soy tan apasionado por la programación que me salté el desayuno ?.
Hay un tipo más de lista llamada lista de descripción que también aprenderemos a continuación.
Ahora entremos un poco más en detalle y veamos cómo crear cada tipo de lista en HTML.
Cómo hacer una lista ordenada con HTML
En HTML, podemos crear una lista ordenada usando la etiqueta <ol>. La etiqueta ol representa una lista ordenada. Dentro de cada uno de los elementos de la lista ordenada <ol> y <ol />, tenemos que definir los elementos de la lista. Podemos definir los elementos de la lista usando la etiqueta <li>.
Aquí está la estructura HTML completa para una lista ordenada:
<ol>
<li>Eat</li>
<li>Code</li>
<li>Sleep</li>
</ol>El resultado de la lista ordenada anterior es:
Entonces, tenemos la lista de elementos ordenados con un número que comienza con 1 y se incrementa a 2 y 3. Pruebe este CodePen y vea si puede cambiar y jugar usando ol-li.
Tipos de listas ordenadas en HTML
¿Qué pasa si no quieres ordenar tu lista por número? En su lugar, deseas ordenar usando el alfabeto como A, B, C o a, b, c. Puedes hacerlo especificando el valor del atributo type de la etiqueta <ol>.
Puedes ordenar la lista usando las letras A, B, C pasando A como valor de type(tipo).
<ol type="A">
<li>Eat</li>
<li>Code</li>
<li>Sleep</li>
</ol>La salida se ve así:
De manera similar, puedes usar letras minúsculas como a para el valor del tipo y así enumerar los elementos con a, b, c, etc.
<ol type="a">
<li>Eat</li>
<li>Code</li>
<li>Sleep</li>
</ol>Aquí está la salida:
Si desea utilizar números romanos, utilice el valor I para una lista ordenada con números romanos:
<ol type="I">
<li>Eat</li>
<li>Code</li>
<li>Sleep</li>
</ol>La salida se ve así:
Consulte el CodePen a continuación para probar otros tipos:
Cómo usar el atributo start en listas HTML
El elemento <ol> tiene un atributo interesante llamado start. Puedes especificar un valor del atributo de inicio ("start") para iniciar la lista ordenada desde un número específico.
Digamos que deseas comenzar la lista con el número 30 en lugar de 1. Puedes especificar el número 30 como el valor del atributo start de esta manera:
<ol start="30">
<li>Thirty</li>
<li>Thirty One</li>
<li>Thirty Two</li>
</ol>La salida se ve así:
Siéntete libre de jugar con el atributo start usando este CodePen:
Por cierto, he compartido los mismos consejos en Twitter recientemente. También puedes encontrar una discusión interesante allí:
Cómo hacer una lista desordenada en HTML
Pasemos ahora a las listas desordenadas. Usamos la etiqueta <ul> para crear una lista desordenada. Como de costumbre, necesitamos usar las etiquetas <li> dentro de <ul> y <ul/> para crear los elementos de la lista.
Los elementos de la lista (li) dentro de la lista desordenada (ul) vienen con el estilo predeterminado de viñetas, por lo que cada uno de los elementos de la lista está precedido por un punto negro.
Vamos a crear una lista de mis recursos en línea favoritos para aprender sobre programación web:
My Favorite Web Development Learning Sites
<!-- Mis sitios favoritos de aprendizaje sobre desarrollo web -->
<div>
<ul>
<li>freeCodeCamp</li>
<li>CSS-Tricks</li>
<li>Traversy Media</li>
</ul>
</div>La salida se ve así:
Puedes ver las viñetas de cada uno de los elementos de la lista anterior y puedes personalizarlos. Eso también lo aprenderemos.
Pero antes de eso, siéntete libre de usar este CodePen para cambiar y ejecutar el código.
Cómo usar viñetas con enlaces en listas HTML
Podemos usar los enlaces (etiqueta de anclaje <a>) en los elementos de la lista (etiqueta <li>) para vincular cada uno de los elementos a cualquier página web interna o externa.
Aquí hay un ejemplo que te muestra cómo vincular cada uno de los recursos de programación web a sus respectivos sitios web:
My Favorite Web Development Learning Sites
<!-- Mis sitios favoritos de aprendizaje sobre desarrollo web -->
<div>
<ul>
<li>
<a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp</a>
</li>
<li>
<a href="https://css-tricks.com/" target="_blank">CSS-Tricks</a>
</li>
<li>
<a href="https://www.traversymedia.com/" target="_blank">Traversy Media</a>
</li>
</ul>
</div>La salida se ve así:
Puedes usar CodePen a continuación para probar lo mismo. Siéntete libre de modificarlo como desees:
Tipos de listas desordenadas en HTML
Como discutimos brevemente, podemos personalizar el estilo de viñetas de una lista desordenada, que veremos en acción ahora. Podemos hacer esto usando la propiedad de estilo CSS llamada list-style.
Hay cuatro valores principales de la propiedad list-style que nos ayudan con esta personalización:
| LIST-STYLE | EFECTO |
|---|---|
| none | No aparecerá ninguna viñeta delante del elemento de la lista |
| circle | Aparece una viñeta circular (hueca) delante del elemento de la lista |
| disc | Esta es la viñeta circular rellena predeterminada |
| square | Aparece una viñeta cuadrada rellena delante del elemento de la lista |
Puede usar el CodePen anterior para probar diferentes opciones de list-style.
¿Sabías que también hay una lista con descripciones?
Hay un tipo más de lista HTML, pero no se usa con tanta frecuencia. Se llama Description List.
Podemos definir una lista de descripciones utilizando el elemento de etiqueta <dl>. Dentro de <dl>..</dl> necesitamos definir un término de descripción usando la etiqueta <dt>. El término suele ser un pequeño texto sobre algo. Luego, podemos definir el descriptor de descripción para describir más el término usando la etiqueta <dd>.
¿Demasiado para digerir? Veamos cómo funciona con un ejemplo de código.
Supongamos que queremos describir información sobre programación, chismes y dormir en nuestra página web. Primero podemos definir una etiqueta<dl>. Ahora definimos tres pares de etiquetas <dt> y <dd> para describir la codificación, el chisme y el sueño, respectivamente.
<dl>
<dt>Coding</dt>
<!-- Programación -->
<dd>An activity to keep you happy, even in sleep.</dd>
<!-- Una actividad para mantenerte feliz, incluso mientras duermes. -->
<dt>Gossiping</dt>
<!-- Chismorreo -->
<dd>Can't live without it.</dd>
<!-- No puedo vivir sin el. -->
<dt>Sleeping</dt>
<!-- Dormir -->
<dd>My all time favorite.</dd>
<!-- Mi favorito de todos los tiempos. -->
</dl>La salida se ve así:
Prueba este CodePen para experimentar más con las listas con descripción:
Te estarás preguntando, ¿por qué no usamos mucho este tipo de lista? Bueno, puedes crear esta estructura utilizando la lista desordenada (ul), elementos de lista (li) y los estilos CSS.
Pero si consideras la semántica de HTML, debes dar un lugar a las listas de descripción en tu código cuando tengas un buen caso de uso para ello.
Cómo crear un encabezado de página con elementos de lista HTML
Estamos casi al final de este tutorial. Pero siento que está incompleto sin al menos un ejemplo de caso de uso de las listas y etiquetas HTML. Mi favorito es enumerar los elementos en el encabezado de una página web.
Vamos a crear un encabezado muy básico con un logotipo de muestra y tres enlaces:Home, Products, y About Us. Primero crearemos la estructura HTML así:
<nav>
<span class="logo">Logo</span>
<ul>
<li><a href="#/home">Home</a></li>
<li><a href="#/products">Products</a></li>
<li><a href="#/about">About Us</a></li>
</ul>
</nav>Aquí hemos tomado una lista desordenada con tres elementos de lista para definir los enlaces Inicio, Productos y Acerca de nosotros. También notarás un elemento de intervalo con el logotipo de texto que indica que es un logotipo. Podemos usar una imagen adecuada allí, según nuestras necesidades más adelante.
Hasta ahora, el encabezado debería verse así:
Bueno, esto no es lo que queremos. Entonces, a continuación, escribiremos algunas reglas y propiedades de CSS para que se vea como un encabezado de página (al menos algo más parecido).
nav{
background-color: #273032;
color: #FFF;
padding: 10px;
display: flex;
}
.logo {
background-color: blue
}
ul {
margin: 0px;
}
li {
list-style: none;
display: inline;
margin-right: 0.2rem;
}
a {
color: pink;
}Ahora mucho mejor y se parece más a un encabezado de página de verdad.
Nuevamente, puedes usar este CodePen para cambiar y probar cosas con el encabezado.
Antes de terminar...
Eso es todo por ahora. Espero que este artículo te haya resultado útil y que te ayude a comprender las listas HTML con mayor claridad. Puedes encontrar todos los ejemplos juntos en esta CodePen Collection.
Conectémonos. Me encontrarás activo en Twitter (@tapasadhikary). Siéntete libre de seguirme. También comencé a compartir conocimientos a través de mi Canal de YouTube, por lo que también puedes consultarlo.