
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úsculasA
: para letras mayúsculasi
: Números romanos en minúsculasI
: Números romanos en mayúsculas1
: 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 propiedadlist-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; }
- Introducción al Lenguaje de Programación HTML
- Elemento HTML
- Elemento base en HTML
- Elemento head en HTML
- Elemento link en HTML
- Elemento meta en HTML
- Elemento style en HTML
- Elemento title en HTML
- Elemento body en HTML
- Elemento address en HTML
- Elemento article en HTML
- Elemento aside en HTML
- Elemento footer en HTML
- Elementos h1 al h6 en HTML
- Elemento header en HTML
- Elemento section en HTML
- Elemento blockquote en HTML
- Elemento nav en HTML
- Elemento dd en HTML
- Elemento div en HTML
- Elemento dl en HTML
- Elemento dt en HTML
- Elemento figcaption en HTML
- Elemento figure en HTML
- Elemento hr en HTML
- Elemento li en HTML
- Elemento main en HTML
- Resumen General de Listas en HTML
- Elemento ol en HTML
- Elemento p en HTML
- Descripción de las Etiquetas HTML
- Qué son los Atributos HTML
- Elemento ul en HTML
- Elemento a en HTML
- Elemento pre en HTML
- El Texto en HTML
- Elemento abbr en HTML
- Elemento b en HTML
- Elemento bdi en HTML
- Elemento bdo en HTML
- Elemento br en HTML
- Elemento cite en HTML