Etiqueta HTML <ol>
La etiqueta HTML <ol> crea una lista ordenada. Aprende sus atributos (type, start, reversed) y la propiedad CSS list-style-type con ejemplos.
La etiqueta HTML <ol> se utiliza para crear una lista ordenada, que contiene elementos en una secuencia determinada.
Cada elemento de la lista ordenada comienza con la etiqueta de apertura <li> y termina con la etiqueta de cierre </li>. Además del texto, la etiqueta <li> puede incluir otros elementos HTML (listas, imágenes, encabezados, párrafos, etc.).
En general, los elementos de una lista ordenada tienen un marcador precedente, como una letra o un número.
El atributo type selecciona qué tipo de marcador se utiliza. Los valores posibles son:
type="1"— números arábigos (1, 2, 3, ...). Este es el valor predeterminado.type="A"— letras latinas en mayúscula (A, B, C, ...).type="a"— letras latinas en minúscula (a, b, c, ...).type="I"— números romanos en mayúscula (I, II, III, ...).type="i"— números romanos en minúscula (i, ii, iii, ...).
Si no se especifica el atributo type, el contenido de la etiqueta <ol> se numera con números arábigos, comenzando desde uno.
El atributo type es presentacional — controla cómo se ve la lista, no lo que significa. El enfoque moderno y recomendado es elegir el marcador en CSS con la propiedad list-style-type, manteniendo el estilo fuera del marcado. Los equivalentes en CSS son: type="1" → decimal, type="A" → upper-alpha, type="a" → lower-alpha, type="I" → upper-roman, type="i" → lower-roman.
Tanto la etiqueta <ol> como la etiqueta <ul> representan una lista de elementos. Sin embargo, la diferencia con la etiqueta <ol> es que el orden es significativo.
Normalmente, las etiquetas <ol> y <ul> pueden anidarse con la profundidad que se requiera, alternando entre ellas según se necesite.
Si las propiedades de CSS se aplican a la etiqueta <ol>, los elementos anidados en la etiqueta <li> las heredan.
Sintaxis
La etiqueta <ol> viene en pares. El contenido se escribe entre las etiquetas de apertura (<ol>) y cierre (</ol>).
Ejemplo de la etiqueta HTML <ol>:
Ejemplo de lista ordenada con la etiqueta HTML <ol>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ol>
<li>Appetizers</li>
<li>Hot</li>
<li>Salads</li>
</ol>
<ol start="50">
<li>Cold drinks</li>
<li>Hot drinks</li>
<li>Ice-Cream</li>
</ol>
<ol type="A">
<li>Coca-Cola</li>
<li>Ice Tea</li>
<li>Fanta</li>
</ol>
</body>
</html>En el ejemplo anterior, usamos el atributo start con el valor "50".
En lugar de definir el marcador en el marcado con el atributo type, defínalo en CSS con la propiedad list-style-type. Esto mantiene la presentación en la hoja de estilos y le permite reutilizar la regla en muchas listas. En el siguiente ejemplo, el marcador se define en un bloque <style> en lugar de un atributo style= en línea:
Ejemplo de la etiqueta HTML <ol> usada con la propiedad CSS list-style-type:
Ejemplo de la etiqueta HTML <ol> con la propiedad list-style-type
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.roman {
list-style-type: upper-roman;
}
.letters {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<h2>Examples of ordered lists</h2>
<ol class="roman">
<li>Cold drinks</li>
<li>Hot drinks</li>
<li>Ice-Cream</li>
</ol>
<ol class="letters">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ol>
<ol>
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ol>
</body>
</html>El atributo reversed
Añadir el atributo boolean reversed numera la lista en orden descendente. Es útil para cuentas regresivas de "top 5" o cualquier lista donde el último elemento deba llevar el número más bajo. Se puede combinar con start para controlar el número más alto.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Top three drinks</h2>
<ol reversed>
<li>Coca-Cola</li>
<li>Ice Tea</li>
<li>Fanta</li>
</ol>
</body>
</html>Los marcadores anteriores cuentan de forma descendente: 3, 2, 1.
Anidamiento de listas ordenadas
Un elemento de lista puede contener otra etiqueta <ol>, lo que permite construir esquemas y sub-pasos. Cada lista anidada reinicia su propia numeración. Coloque la etiqueta <ol> anidada dentro del <li> padre (no entre elementos de lista) para que la estructura sea válida.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ol>
<li>Drinks
<ol type="a">
<li>Cold drinks</li>
<li>Hot drinks</li>
</ol>
</li>
<li>Desserts
<ol type="a">
<li>Ice-Cream</li>
<li>Cake</li>
</ol>
</li>
</ol>
</body>
</html>Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| compact | compact | Indicaba que la lista debía renderizarse de forma más compacta, con menos espacio entre elementos. Está obsoleto y no es compatible con HTML5. Para reducir el espaciado, use las propiedades CSS margin y padding sobre los elementos <li> (o <ol>). |
| reversed | reversed | Indica que los elementos de la lista deben estar en orden descendente (en lugar del orden ascendente habitual). |
| start | number | Establece el número desde el cual comienza la lista ordenada. El valor debe ser un entero; se pueden usar valores negativos. Cuando se usa con letras (type="A" y type="a"), el número indica la posición ordinal de la letra en el alfabeto. Por ejemplo, start="5" corresponde a la letra "E", por lo que la lista comienza con ella. Si se especifica start="27", la lista pasa a ser de dos dígitos (27 = "AA", 28 = "AB", 29 = "AC", ...). |
| type | 1, A, a, I, i | Define el tipo de marcador de la lista (números decimales, letras mayúsculas, letras minúsculas, números romanos en mayúscula, números romanos en minúscula). |
La etiqueta <ol> admite los Atributos Globales y los Atributos de Eventos.
Etiquetas y propiedades relacionadas
<ul>— una lista desordenada (con viñetas), cuando el orden no es significativo.<li>— el elemento de lista usado dentro de<ol>y<ul>.list-style-type— la propiedad CSS para elegir el estilo del marcador.
Cómo aplicar estilos a la etiqueta HTML <ol>
{
"tag_name": "ol"
}