HTML: listas (1)

Existen en HTML 4 y HTML5 tres tipos de listas:

• Las listas no ordenadas que se definen con las etiquetas <ul>...</ul>. "ul" es el acrónimo de "unordered list". Los elementos de este tipo de listas se indican con símbolos (círculos, cuadrados, rombos, etc.).
• Las listas ordenadas que se definen con las etiquetas <ol>...</ol>.  "ol" es el acrónimo de "ordered list". Los elementos de este tipo de listas se indican una secuencia (números, letras, números romanos, etc.)
• Las listas de descripción que se definen con las etiquetas <dl>...</dl>. "dl" es el acrónimo de "descriptión list". Los elementos de este tipo de listas se indican con un aumento del margen izquierdo.

Dentro de las etiquetas de cada tipo de lista se definen los elementos que la componen:

• Los elementos de las listas no ordenadas y ordenadas se definen con las etiquetas <li>...</li>. "li" es el acrónimo de "list item".
• Los elementos de las listas de descripción se definen con las etiquetas:
• <dt>...</dt> definen los términos de la lista.
• <dd>...</dd> definen descripciones de cada término. Puede haber cero o más descripciones de términos por cada término.

Lista No-Ordenada

Definición:

   <ul>

      <li>Elemento 1</li>

      <li>Elemento 2</li>

      <li>Elemento 3</li>

   </ul>

Muestra:

• Elemento 1
• Elemento 2
• Elemento 3

Lista Ordenada

En HTML 4 y HTML 5 existen varios atributos que permiten cambiar el comportamiento por defecto de las listas:

• start: Indica el inicio de la secuencia.
• type: Indica el formato de la secuencia:
• A: Letras mayúsculas
• a: Letras minúsculas
• I: Números romanos en mayúsculas
• i: Números romanos en minúsculas

En HTML 5 se especificó el atributo booeano "reversed" para indicar que la secuencia es descendente.

Definición de una lista ordenada descendente:

   <ol reversed="reversed">

      <li>Elemento 1</li>

      <li>Elemento 2</li>

      <li>Elemento 3</li>

   </ol>

Muestra:

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

Lista de Descripción

Definición:

   <dl>

      <dt>HTML</dt>

         <dd>HyperText Markup Language</dd>

      <dt>HTTP</dt>

         <dd>HyperText Transfer Protocol</dd>

      <dt>URL</dt>

         <dd>Uniform Resource Locator</dd>

   </dl>

Muestra:

   HTML

             HyperText Markup Language

   HTTP

             HyperText Transfer Protocol

   URL

             Uniform Resource Locator

Listas Anidadas

Definición:

   <ul>

      <li>Elemento 1 - Lista de Nivel 1</li>

         <ul>

            <li>Elemento 1 - Lista de Nivel 2</li>

            <ul>

               <li>Elemento 1 - Lista de Nivel 3</li>

            </ul>

            <li>Elemento 2 - Lista de Nivel 2</li>

         </ul>

      <li>Elemento 2 - Lista de Nivel 1</li>

      <li>Elemento 3 - Lista de Nivel 1</li>

         <ul>

            <li>Elemento 1 - Lista de Nivel 2</li>

            <li>Elemento 2 - Lista de Nivel 2</li>

         </ul>

   </ul>

Muestra:

• Elemento 1 - Lista de Nivel 1
• Elemento 1 - Lista de Nivel 2
• Elemento 1 - Lista de Nivel 3
• Elemento 2 - Lista de Nivel 2
• Elemento 2 - Lista de Nivel 1
• Elemento 3 - Lista de Nivel 1
• Elemento 1 - Lista de Nivel 2
• Elemento 2 - Lista de Nivel 2

Para mayor información puede consultar el siguiente vídeo: