HTML
Liza

Introducción

Sintaxis

• <ol> ordered list items </ol>
• <ul> unordered list items </ul>
• <li> list item (ordered and not) </li>
• <dl> description list items </dl>
• <dt> description list title </dt>
• <dd> description list description </dd>

Observaciones

Lista desordenada

Se puede crear una lista desordenada con la etiqueta <ul> y cada elemento de la lista se puede crear con la etiqueta <li> como se muestra en el siguiente ejemplo:

<ul>
  <li>Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ul>

Esto producirá una lista con viñetas (que es el estilo predeterminado):

• ít
• Otro articulo
• Otro articulo mas

Debe usar ul para mostrar una lista de elementos, donde el orden de los elementos no es importante. Si cambiar el orden de los elementos hace que la lista sea incorrecta, debe usar <ol> .

Lista ordenada

Se puede crear una lista ordenada con la etiqueta <ol> y cada elemento de la lista se puede crear con la etiqueta <li> como en el siguiente ejemplo:

<ol>
  <li>Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

Esto producirá una lista numerada (que es el estilo predeterminado):

1. ít
2. Otro articulo
3. Otro articulo mas

Cambiando manualmente los números.

Hay varias formas de jugar con los números que aparecen en los elementos de la lista en una lista ordenada. La primera forma es establecer un número de inicio, usando el atributo de start . La lista comenzará en este número definido y continuará incrementándose en uno como de costumbre.

<ol start="3">
  <li>Item</li>
  <li>Some Other Item</li>
  <li>Yet Another Item</li>
</ol>

Esto producirá una lista numerada (que es el estilo predeterminado):

3. ít
4. Algún otro artículo
5. Otro articulo mas

También puede establecer explícitamente un determinado elemento de lista en un número específico. Más elementos de la lista después de uno con un valor específico continuarán incrementándose en uno desde el valor de ese elemento de la lista, ignorando donde estaba la lista principal.

<li value="7"></li>

También vale la pena señalar que, al utilizar el atributo de value directamente en un elemento de la lista, puede anular el sistema de numeración existente de una lista ordenada al reiniciar la numeración a un valor inferior. Por lo tanto, si la lista principal ya tenía el valor 7 y se encontró con un elemento de la lista con el valor 4, ese elemento de la lista aún se mostrará como 4 y continuará contando desde ese punto nuevamente.

<ol start="5">
  <li>Item</li>
  <li>Some Other Item</li>
  <li value="4">A Reset Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

Por lo tanto, el ejemplo anterior producirá una lista que sigue el patrón de numeración de 5, 6, 4, 5, 6, comenzando nuevamente en un número inferior al anterior y duplicando el número 6 en la lista.

Nota: Los atributos de start y value solo aceptan un número, incluso si la lista ordenada está configurada para mostrarse como números romanos o letras.

<ol reversed>
  <li>Item</li>
  <li>Some Other Item</li>
  <li value="4">A Reset Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

Cambiando el tipo de numeral

Puede cambiar fácilmente el tipo de número que se muestra en el marcador del elemento de lista utilizando el atributo type

<ol type="1|a|A|i|I">

Debe usar ol para mostrar una lista de artículos, donde los artículos han sido ordenados intencionalmente y el orden debe ser enfatizado. Si cambiar el orden de los elementos NO hace que la lista sea incorrecta, debe usar <ul> .

Descripción de la lista

Con el elemento dl se puede crear una lista de descripción (o lista de definiciones , como se llamó antes de HTML5). Consiste en grupos de nombre-valor, donde el nombre se da en el elemento dt , y el valor se da en el elemento dd .

<dl>
  <dt>name 1</dt>
  <dd>value for 1</dd>
  <dt>name 2</dt>
  <dd>value for 2</dd>
</dl>

Demo en vivo

Un grupo nombre-valor puede tener más de un nombre y / o más de un valor (que representan alternativas):

<dl>

  <dt>name 1</dt>
  <dt>name 2</dt>
  <dd>value for 1 and 2</dd>

  <dt>name 3</dt>
  <dd>value for 3</dd>
  <dd>value for 3</dd>

</dl>

Demo en vivo

Listas anidadas

Puede anidar listas para representar subelementos de un elemento de lista.

<ul>
  <li>item 1</li>
  <li>item 2
    <ul>
      <li>sub-item 2.1</li>
      <li>sub-item 2.2</li>
    </ul>
  </li>
  <li>item 3</li>
</ul>

• Objeto 1
• item 2
  • subelemento 2.1
  • subelemento 2.2
• item 3

La lista anidada debe ser un elemento secundario del elemento li .

También puede anidar diferentes tipos de lista:

<ol>
    <li>Hello, list!</li>
    <li>
        <ul>
            <li>Hello, nested list!</li>
        </ul>
    </li>
</ol>