Listas ordenadas y no ordenadas

Las listas nos permiten colocar texto en líneas separadas. Pueden ser listas ordenadas o no ordenadas. Para las primeras usamos las etiquetas:

<ol></ol>

mientras que para las segundas:

<ul></ul>

Los elementos colocados dentro de la lista, ordenadas o sin ordenar, se sitúan con la etiqueta:

<li>Elemento de la lista</li>

Esta etiqueta debe estar siempre dentro de alguna de las anteriores. Todos las etiquetas usadas para describir listas son etiquetas de bloques.

Ejemplo de uso de listas ordenadas y no ordenadas

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Listas</title>
  </head>
  <body>
    <h2>Lista ordenada. Pasos:</h2>
    <ol>
      <li>Conectarse al servidor</li>
      <li>Solicitar documento</li>
      <li>Esperar respuesta</li>
    </ol>
    <h2>Lista no ordenada. Comprar:</h2>
    <ul>
      <li>Leche</li>
      <li>Café</li>
      <li>Pan</li>
    </ul>
  </body>
</html>

Queda renderizado de la siguiente manera:

html5

Listas de definiciones

Usamos las etiquetas <dl>, <dt>, <dd>:

Ejemplo:

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Listas</title>
  </head>
  <body>
    <h2>Lista de definiciones</h2>
    <dl>
        <dt>HTML</dt><dd>Lenguaje de marcado web</dd>
        <dt>CSS</dt><dd>Hojas de estilo en cascada</dd>
        <dt>JS</dt><dd>Lenguaje de scripts: JavaScripts</dd>
    </dl>
  </body>
</html>

Queda renderizado de la siguiente manera:

html5

Ejercicio 1

Anida correctamente la lista no ordenada que se muestra en la imagen.

html5

Compruebe la solución