Elemento ol en HTML

Un elemento html ol es una lista ordenada de elementos, que se muestra como una lista numerada.

Un ejemplo de una lista ordenada <ol> con tres elementos <li>:

< ol > 
  < li > primer elemento </ li > 
  < li > segundo elemento </ li > 
  < li > tercer elemento </ li > 
</ ol >

Etiqueta html ol

Clasificaciones de contenido	Contenido organizacional.
Contenido permitido	Elemento de `<li>` uno o más, y este elemento también puede contener listas `<ol>` o `<ul>` complejos dentro de él .
Acrónimo	Las etiquetas de inicio o finalización no se pueden omitir.
Elementos del padre	Cualquier elemento que acepte contenido normativo.
Interfaz DOMO	`HTMLOListElement`

Soporte de navegadores

Chrome	Firefox	Edge	Safari	Ópera
Soportado	Soportado	Soportado	Soportado	Soportado

Características

En este elemento se pueden utilizar propiedades globales.

`compact`

Esta propiedad booleana determina si una lista debe mostrarse una sobre otra, pero la interpretación de esta propiedad booleana varía según el navegador y no funciona de manera uniforme en todos los navegadores.

Vale la pena señalar que esta propiedad ha quedado obsoleta en HTML y no debe usarse, pero el elemento puede formatearse <ol> mediante estilos CSS, y podemos aplicar el mismo efecto que esta propiedad si establecemos un valor line-height en 80%.

`reversed`

Esta propiedad booleana especifica si queremos mostrar los elementos en orden inverso.

Esta función es nueva en HTML5 y no existía antes.

< ol  invertido > 
  < li > primer elemento </ li > 
  < li > segundo elemento </ li > 
  < li > tercer elemento </ li > 
</ ol >

`start`

Esta propiedad, que acepta valores enteros, especifica el valor numérico para iniciar la numeración de los elementos de la lista. Incluso si los elementos están numerados con números romanos como XXXI o letras, el valor de esta propiedad debe ser un entero positivo. Si queremos empezar a enumerar elementos a partir de la letra, usaremos <ol start="3"‎>.

Esta función quedó obsoleta en HTML 4, pero se ha reutilizado en HTML5.

Un ejemplo de una lista ordenada <ol> de tres elementos con la propiedad utilizada start para especificar el número desde el cual comenzar la numeración:

< ol  start = "7" > 
  < li > primer elemento </ li > 
  < li > segundo elemento </ li > 
  < li > tercer elemento </ li > 
</ ol >

`type`

Esta propiedad se utiliza para especificar el tipo de numeración que aparece antes de los elementos de la lista, a saber:

a: para minúsculas
A: para letras mayúsculas
i: Números romanos en minúsculas
I: Números romanos en mayúsculas
1: Para números y este es el valor predeterminado

El valor de esta propiedad se utilizará para todos los elementos de la lista, a menos que el atributo de tipo se utilice en un elemento <li> específico.

Tenga en cuenta que esta propiedad quedó obsoleta en HTML 4 pero se ha reutilizado en HTML5, pero a menos que la numeración de los elementos de la lista sea muy importante (como en documentos legales o técnicos donde los elementos se indican por su número), se recomienda utilizar una propiedad list-style-type en CSS en su lugar.

Un ejemplo de <ol>una lista ordenada de tres elementos usando números romanos:

< ol  type = "i" > 
  < li > primer elemento </ li > 
  < li > segundo elemento </ li > 
  < li > tercer elemento </ li > 
</ ol >

Descripción de uso

El elemento se usa <ul> generalmente para mostrar los elementos cuya disposición numérica es importante, y esa disposición se puede mostrar en cualquier formato, como números, letras, números romanos, etc. Es preferible que el estilo de numeración no esté definido en código HTML, pero en estilos CSS, usando la propiedad list-style-type.
No hay un límite superior para el anidamiento de listas (listas ordenadas <ol> o desordenadas <ul>).
Componente <ol> y <ul> representan una lista de elementos, y se diferencian entre sí en el orden de los elementos es <ol> importante. Entonces, si está confundido y desea saber cuál de los dos elementos elegir, intente cambiar el orden de los elementos. Si el significado cambia, el elemento debe usarse, y <ol> si sigue siendo el mismo, use <ul>.

Ejemplos de uso del html ol

Un ejemplo de una lista ordenada bifurcada. Tenga en cuenta la ubicación de la etiqueta de cierre del elemento <li>:

< ol > 
  < li > primer elemento </ li > 
  < li > segundo elemento   <! - </li> sin etiqueta de cierre -> 
    < ol > 
      < li > primer elemento secundario </ li > 
      < li > segundo elemento secundario </ li > 
      < li > tercer elemento hijo </ li > 
    </ ol > 
  < li >             <! - </li> aquí está la etiqueta de cierre ->
  < li >El tercer elemento </ li > 
</ ol >

Ejemplo de una lista ordenada con una lista desordenada <ul>:

< ol > 
  < li > primer elemento </ li > 
  < li > segundo elemento   <! - </li> sin etiqueta de cierre -> 
    < ul > 
      < li > primer elemento secundario </ li > 
      < li > segundo elemento secundario </ li > 
      < li > tercer elemento hijo </ li > 
    </ ul > 
  < li >             <! - </li > aquí está la etiqueta de cierre ->
  < li >El tercer elemento </ li > 
</ ol >

Formato predeterminado

La mayoría de los navegadores muestran el elemento <ol> con el valor de la propiedad conjunto display en block, la forma de la referencia de la lista list-style-type a decimal, con márgenes ( margin-top, margin-bottom a 1em, margin-left y margin-right a 0), y la nota izquierda padding-left(o derecha padding-right si el texto es de derecha a izquierda) al conjunto 40px:

ol {
  display: block;
  list-style-type: decimal;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}