Listas

Una lista es una sucesión de elementos precedidos por una viñeta:

• Té
• Café
• Leche

Los elementos pueden ser párrafos completos:

• Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

• Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

• Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

• Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Un elemento puede ser multipárrafo:

• Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

• Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

• Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Las listas pueden ser de dos tipos, con viñetas o numeradas:

1. Té
2. Café
3. Leche

Podemos poner una lista dentro de otra (listas anidadas)

1. Té

2. Café

   • Solo
   • Cortado
   • Con crema

3. Leche

Formato html

Las listas numeradas (ordered lists) se delimitan entre etiquetas <ol>, Cada elemento, entre etiquetas <li>:

<ol>
  <li>Té    </li>
  <li>Café  </li>
  <li>Leche </li>
</ol>

Nótese que la numeración no forma parte del texto del archivo HTML. Los navegadores web la generan automáticamente.

Las listas con viñetas (unordered lists) se delimitan entre etiquetas <ul>:

<ul>
  <li>Té    </li>
  <li>Café  </li>
  <li>Leche </li>
</ul>

Ejemplo de una lista dentro de otra:

<ol>
  <li>Té    </li>
  <li>Café  
      <ul>
          <li>Solo      </li>
          <li>Cortado   </li>
          <li>Con crema </li>
      </ul>
  </li>
  <li>Leche </li>
</ol>

Formato markdown

Las listas no ordenadas se indican usando un símbolo -, + o * como viñeta, y delimitando todo el conjunto entre líneas en blanco, como haríamos con cualquier otro bloque:

Bebidas:

- Té
- Café

  * Solo
  * Cortado
  * Con crema

- Leche

Podemos usar la misma viñeta para diferentes listas, pero no podemos mezclar viñetas dentro de una lista. No podemos escribir:

- Té
* Café
- Leche

Podemos separar los elementos con líneas en blanco:

- Té

- Café

- Leche

Las listas ordenadas se especifican mediante

1. Té
2. Café
3. Leche

La numeración usada es irrelevante, ya que, como hemos visto, no se guarda en la sintaxis HTML. Lo siguiente es válido:

1. Té
1. Café
1. Leche

Podemos anidar diferentes estilos de lista:

- Té
- Café
  1. Solo
  2. Cortado
  3. Con crema
- Leche

Se consideran que un elemento forma parte de la lista anidada si las viñetas (o números) están al mismo nivel de sangría que el resto de elementos.

Los elementos multipárrafo deben respetar el mismo sangrado para todo el elemento:

- Té

- Café
  
  No conviene abusar.
  
- Leche