Autor: Oier Bravo Diaz de Sarralde

Los atributos son muy útiles para dar estilo o cambiar parámetros de tus listas ordenadas en HTML. Con estos elementos, podrás hacer que los números se conviertan en romanos, que la lista se haga con letras o que empiece en el número que desees. También que las líneas de los elementos de tu lista HTML tengan menos espacio entre ellas o añadirle algunos parámetros como títulos.

¿Quieres saber cómo hacerlo? ¡Despega con nosotros y aprende todo sobre los atributos para listas ordenadas en HTML!

Atributos específicos para listas ordenadas en HTML

El atributo principal para las listas ordenadas en HTML es ‘type‘. Este atributo nos permite cambiar el contador con el que se ordenan las listas, pero también cambiar el estilo de la lista. Todo ello añadiéndolo a la etiqueta <ol>.

En todo caso, al igual que otras etiquetas, <ol> y <li> también permiten todos los atributos genéricos que nos permiten dar estilo, poner un titulo y cualquier otra acción sobre ellas.

See the Pen Atributos para listas ordenadas en HTML by HTML Masters (@htmlmasters) on CodePen.

Repasamos en esta lista todos los atributos específicos para las listas ordenadas en HTML:

Listas numeradas en HTML

El modo predeterminado en el que se crean las listas ordenadas son con números a partir del 1. En todo caso, si quieres asegurarte de que será así, puedes añadirle el atributo type=»1″ a la etiqueta <ol> de tu lista.

Puedes observar aquí un ejemplo de cómo debería hacerse:

<ol type="1">
    <li>Madrid</li>
    <li>Barcelona</li>
    <li>Valencia</li>
    <li>Sevilla</li>
</ol>

Listas ordenadas con letras en HTML

Si, por el contrario, quieres que tu lista se ordene con letras de la A. a la Z., puedes hacerlo con el atributo ‘type’, con dos alternativas diferentes.

• type=»a»: listas ordenadas con letras minúsculas.
• type=»A»: listas ordenadas con letras mayúsculas.

Puedes ver y copiar desde aquí dos ejemplos con cada una de estas listas:

<ol type="a">
    <li>Madrid</li>
    <li>Barcelona</li>
    <li>Valencia</li>
    <li>Sevilla</li>
</ol>

Listas HTML con números romanos

Por último, el atributo type también te permite crear tus listas con números romanos. Al igual que pasa en el caso de las letras, puedes hacerlo tanto en números en mayúscula como en minúscula de la siguiente manera:

• type=»i»: listas ordenadas con números romanos en minúscula.
• type=»I»: listas ordenadas con números romanos en mayúscula.

Aquí tienes unos ejemplos:

<ol type="i">
    <li>Madrid</li>
    <li>Barcelona</li>
    <li>Valencia</li>
    <li>Sevilla</li>
</ol>

Listas ordenadas con saltos

Sin embargo, no siempre las listas pueden empezar con el 1. Por ello, HTML5 nos permite crear listas ordenadas que comiencen en otro punto. Si necesitas que tu lista comience en un número diferente, debes añadir el atributo start=»[inserta el número que desees]» a la etiqueta <ol> de tu lista.

Puedes ver aquí un ejemplo de cómo hacer una lista que comience con el número 5:

<ol start="5">
    <li>Madrid</li>
    <li>Barcelona</li>
    <li>Valencia</li>
    <li>Sevilla</li>
</ol>

Listas en orden inverso

HTML5 también nos da la posibilidad de crear listas en orden inverso fácilmente. el atributo ‘reversed’ se usa para invertir el orden de los números o las letras de cada elemento. Se utiliza colocándolo en el interior de la etiqueta <ol>, como se puede ver en este ejemplo:

<ol reversed">
    <li>Madrid</li>
    <li>Barcelona</li>
    <li>Valencia</li>
    <li>Sevilla</li>
</ol>

Listas con estilo compacto

Sin embargo, el estilo del dígito o letra que convierte la lista en ordenada no es lo único que puede modificarse a través de los atributos para listas ordenadas en HTML. También el estilo de la propia lista. En este caso, el atributo ‘compact’ nos permite reducir el espacio entre elementos colocándolo en el interior de la etiqueta <ol> de la siguiente manera.

<ol compact">
    <li>Madrid</li>
    <li>Barcelona</li>
    <li>Valencia</li>
    <li>Sevilla</li>
</ol>

Otros atributos genéricos para listas ordenadas HTML

Además, las listas ordenadas en HTML nos permiten usar otros atributos genéricos para identificar nuestra lista ordenada. Estos son algunos de los atributos que podemos utilizar:

• title: señala el título del elemento.
• style: ofrece información sobre el estilo en línea.
• class e id: identificador del elemento.
• dir: dirección del texto.
• lang: información sobre el idioma de uso.

Como puedes ver, las listas ordenadas ofrecen muchas posibilidades de personalización. Si tienes dudas con cualquiera de ellas, puedes preguntarnos en comentarios.

¡Hasta la próxima!

En muchas ocasiones, cuando quieres hacer una lista en HTML, necesitas ordenar los conceptos y subconceptos que quieres explicar. Es decir, quieres hacer listas dentro de listas. A este concepto se le llama en lenguaje HTML listas anidadas. Si quieres conocer cómo hacer este tipo de listas, estás en el lugar correcto.

¡Embarca en la nave de HTML Masters que despegamos!

¿Qué son las listas anidadas en HTML?

Como comentaba, las listas anidadas son listas dentro de listas. Una como, por ejemplo, la del índice de contenidos de esta misma entrada. En esa lista puedes observar como existen conceptos y subconceptos que quedan completamente ordenados gracias a esta lista anidada.

Pero esta no es la única manera de realizar listas anidadas en HTML. ¡Conoce con nosotros todas las posibilidades de este tipo de listas para que las explotes cuando escribas tus contenidos lo máximo posible!

Tipos de listas

Las listas anidadas en HTML pueden tener dos estilos:

See the Pen Untitled by HTML Masters (@htmlmasters) on CodePen.

Listas numeradas anidadas

La manera más habitual de hacer las listas anidadas es de manera ordenada con números. Para ello, debemos aplicar las etiquetas <ol> y <li>, tal y como haríamos en cualquier lista ordenada. Sin embargo, para poder crear una lista anidada, deberemos añadir un inicio de lista (con la etiqueta <ol> tras cualquier item de la lista «madre».

Puedes ver un ejemplo de lista ordenada anidada en el siguiente código:

<ol> 
   <li>Deportes de equipo</li>
      <ol>
         <li>Fútbol</li>
         <li>Baloncesto</li>
         <li>Balonmano</li>
      </ol>
   <li>Deportes individuales</li>
      <ol>
         <li>Tenis</li>
         <li>Boxeo</li>
      </ol>
</ol>

Recuerda que cada lista tiene su numeración propia, aunque los dígitos también se pueden modificar a letras o números romanos, gracias al atributo ‘type’.

Listas desordenadas anidadas

Esta misma manera de realizar listas anidadas se puede replicar también con listas desordenadas. Para ello, deberás utilizar la etiqueta de estas listas, <ul>, en vez de la utilizada anteriormente. De esta manera, esta lista anidada quedará organizada con puntos, y no con números.

<ul> 
   <li>Deportes de equipo</li>
      <ul>
         <li>Fútbol</li>
         <li>Baloncesto</li>
         <li>Balonmano</li>
      </ul>
   <li>Deportes individuales</li>
      <ul>
         <li>Tenis</li>
         <li>Boxeo</li>
      </ul>
</ul>

Con ambos tipos de listas, ordenadas y desordenadas, podrás realizar las listas anidadas que tanto necesitas para ordenar de manera adecuada tus elementos.

Si pese a estas explicaciones que te he dado durante todo el artículo aún tienes alguna consulta, no dudes en escribirme en comentarios. ¡Seguro que otra persona también comparte esa misma duda y puede resolverla gracias a ti.

¡Hasta el próximo artículo!

Las listas desordenadas en HTML son el tipo más básico de listados que se pueden hacer. Su dinámica es muy sencilla, y no te llevará mucho tiempo aprender a hacerlas. Además, suponen la base para poder aprender, posteriormente, a hacer otros tipos de listas. Por tanto, vamos ya a conocer cómo hacer listas desordenadas en HTML.

¡Despegamos!

Listas desordenadas: Definición

Las listas desordenadas o listas no numeradas en HTML sirven para crear listas sin ningún orden. Los conceptos que escribas en la lista aparecerán en el orden en el que los establezcas. Es decir, no será aleatorio.

Sin embargo, a la hora de visualizarse se hará mediante puntos, cuadrados o viñetas, pero en ningún caso con números, letras o números romanos, como sí sucede en las listas ordenadas, o con pequeñas sangrías como en las listas de descripción.

Listas no ordenadas: etiqueta para hacerlas

Para redactar una lista desordenada en HTML, es necesario utilizar la etiqueta <ul> (Unordered List, Lista Desordenada en inglés). Esta etiqueta deberá ir al comienzo de la lista (<ul>) y al final (</ul>), para abrir y cerrar nuestra lista correctamente.

Entre estas dos etiquetas, para cada uno de los conceptos, tendremos que utilizar la etiqueta <li> para cada concepto. En este caso, también debemos cerrar cada uno de ellos con la etiqueta </li>.

Ejemplos de listas desordenadas

Una vez conocemos tan solo estas dos etiquetas, ya estamos preparados para ver algunos ejemplos prácticos. El código que permite construir listas desordenadas en HTML es el siguiente:

<ul>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
</ul>

Esta lista se puede ampliar a todos los conceptos que queramos, ya que no hay ningún límite. Así, podremos hacer listas desde un solo concepto, hasta infinitos.

Atributos para listas desordenadas

Los atributos en HTML son muy útiles para personalizar los elementos. En el caso de las listas desordenadas, son personalizables a través del atributo ‘type’.

Es decir, tan solo utilizando HTML podremos conseguir que el símbolo que señala cada elemento de la lista sea diferente. Este atributo deberemos escribirlo dentro de la etiqueta <ul>, seguido de un ‘=’ y el concepto que queramos añadir entre comillas.

<ul type="descripción del atributo">
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
</ul>

Tipos de listas desordenadas en HTML

Según el concepto que añadamos dentro del atributo ‘type’, es decir, entre comillas, conseguiremos diferentes tipos de listas desordenadas:

• Disco (disc).
• Círculo (circle).
• Cuadrado (square).
• Sin marcador (none).

Lista desordenada HTML tipo disco

Es la básica, la que viene predeterminada, cuando realizamos una lista y no le añadimos ningún tipo de atributo. En todo caso, si queremos asegurarnos de que aparezca con un punto negro, será el atributo type=»disc» el que tengamos que utilizar, tal y como aparece en el ejemplo.

<ul type="disc">
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
</ul>

¿Cómo hacer una lista con círculo en HTML?

Para crear una lista con un círculo que no esté relleno, tendremos que añadir el atributo type=»circle» a la etiqueta <ul> de la lista en la que estemos trabajando.

<ul type="circle">
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
</ul>

Lista no ordenada con cuadrados

Si, por el contrario, lo que quieres es que tu marcador sea un cuadrado, el atributo type deberá incluir la palabra ‘square‘, tal y como aparece en el ejemplo.

<ul type="square">
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
</ul>

Lista HTML sin puntos ni marcadores

Por último, si lo que quieres es que tu lista no tenga ningún tipo de marcador, también podrás hacerlo, exclusivamente, con HTML. Para ello, tendremos que añadir el atributo type=»none» a la etiqueta <ul> de la lista.

<ul type="none">
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
</ul>

Recuerda que todos los códigos puedes utilizarlos a tu gusto. Copia, pega en tu código, modifica los conceptos y consigue todas las listas que necesites para tu documento HTML.

En este artículo te voy a contar todo lo que tienes que saber sobre las listas de definición HTML. Es el tipo de lista más especial. Y también el que menos se utiliza. Sin embargo, resulta muy útil a la hora de explicar el significado de conceptos y palabras en tu web en lenguaje HTML.

¡Arrancamos la nave!

Listas de definición HTML: concepto

En realidad, las listas de definición son un tipo de listas desordenadas. Sin embargo, están destinadas directamente a hablar sobre el significado de una palabra en concreto.

Las listas de definición se dividen en dos partes:

• Elemento. Se señala con la etiqueta <dt> (Definition Term).
• Definición. Se señala con la etiqueta <dd> (Definition Definition).

Con este tipo de listas, será muy fácil interpretar los ítems de la lista. Además, cuando la utilicemos, aplicaremos una buena semántica a nuestro texto HTML, ya que asociaremos el concepto con su definición. Es la única manera de hacerlo.

Crear listas de definición en HTML

Crear una lista de definición HTML es muy fácil. Primero, es necesario utilizar la etiqueta <dl> (Definition List). Tras esta etiqueta, deberemos enumerar los elementos (<dt>) y las definiciones (<dd>), siempre cerrando las etiquetas después de cada texto.

Finalmente, hay que cerrar la lista de definición con </dl>, al igual que los otros tipos de listas.

Ejemplos de listas con código

Para que la explicación anterior quede más clara, aquí te dejo un ejemplo de lista de definición HTML con su código:

<dl> 
   	<dt>Nave espacial</dt>
   	    <dd>Vehículo o máquina diseñada para volar en el espacio exterior</dt>
   	<dt>Extraterrestre</dt>
   	    <dd>Todo ser vivo originario de cualquier sitio ajeno a la Tierra.</dt>
</dl>

Para realizar listas de definición HTML diferentes, puedes utilizar las listas anidadas también para definir conceptos, como te enseño en este ejemplo:

<ol>
    <li>Planetas
        <dl>
            <dt>Tierra</dt>
                <dd>La Tierra es un planeta que gira alrededor del Sol— en la 
                    tercera órbita más interna.</dd>
            <dt>Saturno</dt>
                <dd>El sexto planeta más próximo al Sol, caracterizado por sus  
                    anillos visibles.</dd>
        </dl>
    </li>
    <li>Satélites
        <dl>
            <dt>Luna</dt>
                <dd>Es el único satélite natural de la Tierra</dd>
            <dt>Cordelia</dt>
                <dd>Es el más cercano satélite natural de Urano.</dd>
        </dl>
    </li>
</ol>

Puedes copiar cualquiera de estos códigos y modificarlos con las definiciones que desees aplicar en tu web.

Este artículo habla solo de las listas de definición HTML. Pero si quieres saber más sobre otros tipos de listas HTML, como las listas ordenadas, no dudes en seguir viajando por nuestra web.

¡Hasta el próximo viaje!