HTML: Listas

Tipos de listas

En HTML podemos crear listas ordenadas y no ordenadas. Las listas ordenadas se utilizan para enumerar los elementos de una lista, mientras que las listas no ordenadas se utilizan para mostrar una lista de elementos sin un orden específico.

Listas ordenadas

Para crear una lista ordenada, utilizamos la etiqueta <ol>. Dentro de esta etiqueta, cada elemento de la lista se define con la etiqueta <li>.

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

Tendrá como resultado:

miarchivo.html

  1. Elemento 1
  2. Elemento 2
  3. Elemento 3

Listas no ordenadas

Para crear una lista no ordenada, utilizamos la etiqueta <ul>. Al igual que en las listas ordenadas, cada elemento de la lista se define con la etiqueta <li>. La diferencia es que en las listas no ordenadas, los elementos no se enumeran.

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

Tendrá como resultado:

miarchivo.html

  • Elemento 1
  • Elemento 2
  • Elemento 3

Listas anidadas

Podemos anidar listas dentro de otras listas. Por ejemplo:

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

Tendrá como resultado:

miarchivo.html

  • Elemento 1

  • Elemento 2

    • Elemento 2.1
    • Elemento 2.2
  • Elemento 3

También podemos anidar listas ordenadas dentro de listas no ordenadas y viceversa.

<ol>
  <li>Elemento 1</li>
  <li>
    Elemento 2
    <ul>
      <li>Elemento 2.1</li>
      <li>Elemento 2.2</li>
    </ul>
  </li>
  <li>Elemento 3</li>
</ol>

Tendrá como resultado:

miarchivo.html

  1. Elemento 1

  2. Elemento 2

    • Elemento 2.1
    • Elemento 2.2
  3. Elemento 3
⚠️

Utiliza listas siempre que tenga sentido semántico, incluso no quieres que se muestren como una lista. Dado que después podremos cambiar el estilo

En el siguiente capítulo

En el siguiente capítulo, aprenderemos a crear tablas en HTML.

AnteriorSiguiente