Listas HTML ordenadas

La etiqueta <ol> define una lista ordenada. Una lista ordenada puede ser numérica o alfabética. Una lista ordenada comienza con la etiqueta <ol>. Cada elemento de la lista comienza con la etiqueta <li>. Los elementos de la lista se marcarán con números de forma predeterminada.

Ejm

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Lista HTML ordenada: el atributo type

El atributo type de la etiqueta <ol> define el tipo del marcador del elemento de la lista.

Tipo Descripción
type=”1″ Los elementos de la lista estarán numerados con números (predeterminado)
type=”A” Los elementos de la lista estarán numerados con letras en mayúscula
type=”a” Los elementos de la lista estarán numerados con letras en minúscula
type=”I” Los elementos de la lista estarán numerados con letras romanas en mayúscula
type=”i” Los elementos de la lista estarán numerados con letras romanas en minúscula

Ejm con números

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Ejm con letras en mayúscula

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Ejm con letras en minúsculas

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Ejm con números romanos en mayúsculas

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Ejm con números romanos en minúsculas

<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Control de conteo de listas

Por defecto, una lista ordenada comenzará a contar desde 1. Si deseas comenzar a contar desde un número específico, puede usar el atributo start.

Ejm

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Listas anidadas

Las listas ordenadas pueden estar anidadas.

Ejm

<ol>
  <li>Coffee</li>
  <li>Tea
    <ol>
      <li>Black tea</li>
      <li>Green tea</li>
    </ol>
  </li>
  <li>Milk</li>
</ol>

Nota: Un elemento de la lista (<li>) puede contener una nueva lista y otros elementos HTML, como imágenes y enlaces, etc.

Resumen

  • Usamos la etiqueta <ol> para definir una lista ordenada.
  • Usamos el atributo type para definir un tipo numerico.
  • Usamos la etiqueta <li> para definir un elemento de la lista ordenada.
  • Las listas ordenadas pueden estar anidadas.
  • Las listas ordenadas pueden contener otros elementos HTML.