Blog / Cómo hacer un listado en HTML

Hacer un listado HTML en tu página web es realmente sencillo. Tan solo necesitas conocer unas cuantas etiquetas HTML y tendrás tu lista en HTML. ¡Comenzamos!

Uno de los temas que, desde siempre, más me ha gustado enseñar a los alumnos del curso de diseño web, son las listas HTML. El motivo es que a pesar de ser, inicialmente, muy sencillo de entender y aprender, a veces se puede complicar. Hay tres tipos de listas HTML:

• Listas ordenadas
• Listas desordenadas
• Listas de definición

En algunas de estas listas, además, existen atributos que modifican el comportamiento natural de las mismas. Te las enseño una por una:

Lista ordenada HTML

Con una lista ordenada HTML mostrarás una serie de elementos ordenados por un número. Es un tipo de lista muy utilizado en diferentes ámbitos. Por ejemplo, se emplea mucho en los manuales de instrucciones para montar un mueble, indicando con los números el orden en el cual deben ir ensamblándose las piezas. Cuando se muestra un índice o tabla de contenidos en un libro, es importante el orden de cada elemento del índice. Otro ejemplo muy común y lógico, es para crear un índice de un artículo de un blog o alguna otra publicación online.

Cómo crear una lista ordenada HTML

La estructura es muy sencilla y tan solo necesitarás las etiquetas <ol> y <li>. La primera etiqueta significa «ordered list«, o lista ordenada, y el segundo elemento significa «list item«, o elemento de lista.

Para hacer una lista ordenada HTML, lo primero que debes hacer es comenzar la lista con la etiqueta <ol>. Posteriormente, cada elemento de la lista deberá estar dentro de las etiquetas <li></li>. Cuando no tengas más elementos de lista que agregar a la lista, deberás cerrarla con la etiqueta </ol>. Te dejo un ejemplo a continuación, donde a la izquierda verás el código, y a la derecha como se vería en tu página web:

<p>Orden de lanzamiento de las películas de la saga Star Wars</p>
<ol>
  <li>Episodio IV: Una nueva esperanza</li>
  <li>Episodio V: El imperio contraataca</li>
  <li>Episodio VI: El retorno del Jedi</li>
  <li>Episodio I: La amenaza fantasma</li>
  <li>Episodio II: El ataque de los clones</li>
  <li>Episodio III: La venganza de los sith</li>
  <li>Episodio VII: El despertar de la Fuerza</li>
  <li>Episodio VIII: Los últimos Jedi</li>
  <li>Episodio IX: El ascenso de Skywalker</li>
</ol>

Lista no ordenada HTML

La estructura para hacer una lista no ordenada, también llamada lista desordenada HTML, es casi idéntica a la lista ordenada. Simplemente, cambia la etiqueta de apertura y cierre de la lista. En este caso, la lista desordenada HTML se abre con la etiqueta <ul> y se cierra con la etiqueta </u>. Como en el caso anterior, los elementos de la lista irán dentro de etiquetas <li></li>. Por lo tanto, para hacer una lista no ordenada deberás hacer lo que se muestra en el siguiente ejemplo:

<p>Lista de la compra</p>
<ol>
  <li>Tomates</li>
  <li>Pan</li>
  <li>Puerros</li>
  <li>Aceite oliva virgen</li>
  <li>Pescado</li>
  <li>Lejía<li>
</ol>

Lista de definición HTML

Las listas de definiciones HTML sirven para crear listas de elementos con información, o valor añadido, por cada elemento. Es decir, con esta lista podrás enumerar de forma desordenada varios elementos, agregando información descriptiva y visible a cada uno de los elementos.

A continuación te dejo un ejemplo con una serie de elementos con su descripción:

<p>Lista de definición de acrónimos</p>
<dl>
  <dt>AMPA</dt>
  <dd>Asociación de Madres y Padres de Alumnos</dd>
  <dt>OVNI</dt>
  <dd>Objeto Volante No Identificado</dd>
  <dt>AVE</dt>
  <dd>Alta Velocidad Española</dd>
  <dt>DRAE</dt>
  <dd>Diccionario de la Real Academia Española</dd>
</dl>

Listas Anidadas

En ocasiones, puedes necesitar hacer una lista anidada, o lista de elementos anidados. En este punto, la cosa se complica un poco, pero si prestas atención, podrás hacerlo sin demasiadas complicaciones. El truco radica en crear nuevas listas, ordenadas o desordenadas, dentro del elemento <li></li> en el que quieras crear un segundo nivel de lista.

También podrás combinar diferentes tipos de lista, por ejemplo ordenadas y desordenadas. Te muestro un ejemplo con el que lo entenderás perfectamente:

<p>Resultados de las ligas 21/22</p>
<ul>
    <li>Liga española
        <ol>
            <li>Real Madrid</li>
            <li>F.C. Barcelona</li>
            <li>At. Madrid</li>
            <li>Sevilla</li>
            <li>...</li>
        </ol>
    </li>
    <li>Premier League
        <ol>
            <li>Manchester City</li>
            <li>Liverpool</li>
            <li>Chelsea</li>
            <li>Tottenham</li>
            <li>...</li>
        </ol>
    </li>
</ul>

Conclusión

Cómo has podido comprobar, crear listas en HTML es realmente sencillo, y no importa si son ordenadas, desordenadas, o de definición. La estructura siempre es muy similar, por lo que aprendida una, aprendida todas. En otra ocasión te contaré como mediante CSS podrás modificar el contador o marcador de la lista para, por ejemplo, agregar números romanos a tu lista ordenada.

Nada más, espero que te haya gustado esta entrada y que te sirva en tu aprendizaje en el mundo de la programación HTML. ¡Hasta la próxima!