Etiqueta HTML <ol>
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.
Los siguientes valores pueden utilizarse como elementos de numeración: números arábigos (1, 2, 3, ...); letras latinas mayúsculas (A, B, C, ...); letras latinas minúsculas (a, b, c, ...); números romanos mayúsculos (I, II, III, ...); números romanos minúsculos (i, ii, iii, ...). El atributo type se utiliza para indicar el tipo de lista numerada.
Si no se especifica ningún atributo adicional, el contenido de la etiqueta <ol> se numera por defecto con números arábigos, comenzando desde uno.
Tanto la etiqueta <ol> como <ul> representan una lista de elementos. Sin embargo, existe una diferencia con <ol> donde el orden es significativo.
Por lo general, las etiquetas <ol> y <ul> pueden anidarse tantas veces como sea necesario, alternando entre ellas según se desee.
TIP
Si se aplican propiedades de CSS a la etiqueta <ol>, los elementos anidados en la etiqueta <li> las heredan.
Sintaxis
La etiqueta <ol> se utiliza en pares. El contenido se escribe entre las etiquetas de apertura (<ol>) y de 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, utilizamos el atributo start con el valor "50".
Para determinar el tipo de elementos de numeración en lugar del atributo type, utilice la propiedad de CSS list-style-type.
Ejemplo de la etiqueta HTML <ol> utilizada con la propiedad CSS list-style-type:
Ejemplo de la etiqueta HTML <ol> con una propiedad list-style-type
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Examples of ordered lists</h2>
<ol style="list-style-type: upper-roman">
<li>Cold drinks</li>
<li>Hot drinks</li>
<li>Ice-Cream</li>
</ol>
<ol style="list-style-type: hebrew">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ol>
<ol style="list-style-type: decimal">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ol>
</body>
</html>Resultado
Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| compact | compact | Reduce los sangrados y el espaciado entre líneas. No es compatible con HTML5. En su lugar, recomendamos utilizar la propiedad de CSS line-height. |
| 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 número entero, pueden utilizarse valores negativos. Cuando se usa con letras (type = "A" y type = "a"), el número indicado en el valor del atributo corresponde al número ordinal de la letra en el alfabeto. Por ejemplo, start = "5" corresponderá a la letra "E" y la lista comenzará con ella. Si se especifica start = "27", la lista se convierte en de dos dígitos ("27" = "AA", "28" = "AB", "29" = "AC" ...). |
| type | 1 A a I i | Define el tipo de marcador de la lista. |
La etiqueta <ol> admite los Atributos Globales y los Atributos de Eventos.
Cómo dar estilo a una etiqueta HTML <ol>
{
"tag_name": "ol"
}Práctica
¿Cuáles son las características y usos de la etiqueta HTML <ol>?