Listas no ordenadas

Aquí vemos juntas todas las partes en una lista de frutas:

<ul>
  <li>manzanas</li>
  <li>bananas</li>
  <li>cerezas</li>
  <li>uvas</li>
</ul>

Cuando está representado se ve así:

Nota: Los espacios en blanco de más de un solo caracter se ignoran por parte de los navegadores cuando representan el código fuente HTML (excepto en los elementos <pre></pre>), pero el formateo es importante para las personas que crean y mantienen documentos HTML. Por lo tanto, mantenga su código fuente HTML limpio mediante identaciones y espacios en blanco para hacer más fácil su lectura.

Listas ordenadas

Hay cinco tipos de listas ordenadas, que enumeran la lista mediante:

Añada el atributo type adecuado dentro de la etiqueta de apertura ol para conseguir la enumeración deseada.

Veamos de nuevo nuestra lista de frutas enumerada mediante números Romanos en mayúsculas:

<ol type="I">
  <li>manzanas</li>
  <li>bananas</li>
  <li>cerezas</li>
  <li>uvas</li>
</ol>

Cuando está representada tiene el aspecto siguiente:

Listas de descripción

Esto se usa para listas de términos y sus descripciones.

El código fuente se ve así:

<dl>
  <dt>HTML</dt><dd>Hyper-text Markup Language</dd>
  <dt>WWW</dt><dd>World Wide Web</dd>
  <dt>W3C</dt><dd>World Wide Web Consortium</dd>
  <dt>dl</dt><dd>lista de descripción</dd>
  <dt>dt</dt><dd>término a describir</dd>
  <dt>dd</dt><dd>detalles de la descripción</dd>
</dl>

Listas anidadas

Para ser sintácticamente válido, lo único que puede ir dentro de una lista es un elemento (ítem) de lista. Un ítem de lista es un elemento de bloque en el que se puede poner casi cualquier cosa, incluyendo otra lista. Las listas pueden anidarse dentro de otras listas, hasta el nivel que se desee. Aquí hay una lista no ordenada anidada con una lista ordenada, la cual está anidada dentro de otra lista ordenada:

Aquí hay el código fuente html:

<ol type="1">
  <li>Lista 1 parte 1
    <ol type="i">
      <li>Lista 2 parte 1
        <ul>
          <li>Lista 3 parte 1</li>
          <li>Lista 3 parte 2</li>
        </ul>
      </li>
      <li>Lista 2 parte 2</li>
    </ol>
  </li>
  <li>Lista 1 parte 2</li>
</ol>

Nótese como cada nueva lista se anida dentro de un ítem de lista de su lista padre.

Ejercicios:

1. Copie minimal_page.html a una página llamada no_ordenada.html. Establezca el título y una cabecera de primer nivel a Lista no ordenada. Cree una lista no ordenada con cinco o más ítems de su elección relacionados. Coloque una cabecera de segundo nivel encima de la lista con un texto describiendo los tipos de ítems que contiene la lista. El ejercicio completado tiene que verse de manera parecida a esto.
2. Copie minimal_page.html a una página llamada ordenada.html. Establezca el título y una cabecera de primer nivel a Lista ordenada. Cree una lista ordenada con cinco o más ítems de su elección relacionados. Coloque una cabecera de segundo nivel encima de la lista con un texto describiendo los tipos de ítems que contiene la lista. El ejercicio completado tiene que verse de manera parecida a esto.
3. Copie minimal_page.html a una página llamada descripciónes.html. Establezca el título y una cabecera de primer nivel a Lista de descripción. Cree una lista de descripción con los siguientes términos de HTML:
   • HTML
   • Elemento HTML
   • Etiqueta HTML
   • paréntesis angular
   • Atributo HTML
   • Comentario HTML
   • Elemento objeto HTML
   • Caracter especial HTML
   Coloque encima una cabecera de segundo nivel con la descripción de la lista con Términos HTML como texto. Su description.html completada debería verse como esto, excepto en que tendría que haber descripciones completas.
4. En este ejercicio necesitará anidar listas ordenadas con tipos de atributos para crear un esquema. Copie minimal_page.html a una página llamada aprendiendo_desarrollo_web.html. Establezca el título y una cabecera de primer nivel a Aprendiendo desarrollo web, después utilice listas ordenadas para crear una página que se vea como esto: