HTML Lista ordenada


Ejemplo

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):

  1. ít
  2. Algún otro artículo
  3. 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.

5

Puede revertir la numeración agregando reversed en su elemento ol :

<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>

La numeración inversa es útil si está agregando continuamente a una lista, por ejemplo, con nuevos episodios de podcast o presentaciones, y desea que los elementos más recientes aparezcan primero.


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">
Tipo Descripción Ejemplos
1 Valor por defecto - números decimales 1,2,3,4
a Ordenados alfabéticamente (en minúsculas) a B C D
A Ordenados alfabéticamente (en mayúsculas) A B C D
i Números romanos (minúsculas) i, ii, iii, iv
I Números romanos (mayúsculas) I, II, III, IV

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> .