Etiqueta ol en HTML
¿Qué es la etiqueta <ol> en HTML?
La etiqueta <ol> en HTML5 se utiliza para crear listas ordenadas. Esta etiqueta se utiliza para indicar que los elementos de la lista deben aparecer en un orden específico y se mostrarán con números o letras.
Aquí hay algunos puntos importantes sobre la etiqueta <ol>:
- La etiqueta <ol> debe tener al menos un elemento secundario (<li>) para mostrar algún contenido en la lista. Los elementos de la lista se pueden anidar dentro de otros elementos de la lista para crear sublistas.
- La etiqueta <ol> es similar a la etiqueta <ul> que se utiliza para crear listas no ordenadas. La única diferencia es que la etiqueta <ul> utiliza viñetas en lugar de números.
Ejemplo de uso
Aquí hay un ejemplo de código HTML que muestra cómo utilizar la etiqueta <ol> para crear una lista ordenada:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de lista ordenada</title>
</head>
<body>
<h1>Ejemplo de lista ordenada</h1>
<ol>
<li>Primer elemento de la lista</li>
<li>Segundo elemento de la lista</li>
<li>Tercer elemento de la lista</li>
</ol>
</body>
</html>
Lenguaje del código: HTML, XML (xml)
Este ejemplo mostrará una lista ordenada con tres elementos numerados del 1 al 3.
Atributos
Los atributos más importantes de la etiqueta <ol> de HTML5 son los siguientes:
- type: Este atributo especifica el tipo de numeración que se usará para los elementos de la lista. Los valores posibles son:
- “1” para números (este es el valor predeterminado),
- “a” para letras minúsculas,
- “A” para letras mayúsculas,
- “i” para números romanos minúsculos
- “I” para números romanos mayúsculos.
- start: Este atributo especifica el número en el que comienza la numeración de los elementos de la lista. El valor predeterminado es 1.
- reversed: Este atributo define si la numeración de los elementos de la lista debe ser inversa. Si se establece en “reversed”, el último elemento de la lista se numerará como 1 y el primer elemento se numerará como el número total de elementos en la lista.
- class: Este atributo se utiliza para especificar una o varias clases CSS que se aplicarán al elemento
<ol>
. Esto se usa para aplicar estilos personalizados a la lista.
- id: Este atributo se utiliza para especificar un identificador único para el elemento
<ol>
. Esto se utiliza principalmente para vincular la lista a otros elementos en la página mediante enlaces internos.
Ejemplo
Aquí hay un ejemplo de cómo se pueden utilizar algunos de estos atributos:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de lista ordenada con atributos</title>
<style>
.list-type {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<h1>Ejemplo de lista ordenada con atributos</h1>
<ol start="5" reversed class="list-type" id="mi-lista">
<li>Primer elemento de la lista</li>
<li>Segundo elemento de la lista</li>
<li>Tercer elemento de la lista</li>
</ol>
</body>
</html>
Lenguaje del código: HTML, XML (xml)
En este ejemplo, se ha establecido el atributo start
en 5, lo que significa que la numeración comenzará en 5 en lugar de 1. El atributo reversed
también se ha establecido, lo que invertirá el orden de la numeración de la lista.
Se ha especificado una clase CSS personalizada llamada “list-type” que establece el tipo de numeración de la lista en números romanos mayúsculos.
Finalmente, se ha asignado un identificador único “mi-lista” al elemento <ol> que se puede utilizar para vincular la lista a otros elementos en la página mediante enlaces internos.
Más ejemplos
Aquí te dejo dos ejemplos completos y avanzados de cómo usar la etiqueta <ol> de HTML5:
Ejemplo 1
Este ejemplo utiliza la etiqueta <ol> para crear una lista numerada que enumera los pasos para hacer un pastel de zanahoria.
<!DOCTYPE html>
<html>
<head>
<title>Pastel de Zanahoria</title>
</head>
<body>
<h1>Cómo hacer un pastel de zanahoria</h1>
<ol>
<li>Precalentar el horno a 350 grados F (175 grados C).</li>
<li>Pelar y rallar 3 tazas de zanahorias.</li>
<li>En un tazón grande, mezclar 2 tazas de harina para todo uso, 2 cucharaditas de polvo de hornear, 1 cucharadita de bicarbonato de sodio, 2 cucharaditas de canela molida y 1/2 cucharadita de sal.</li>
<li>En otro tazón grande, batir 4 huevos, 1 1/2 tazas de azúcar granulada y 1 taza de aceite vegetal.</li>
<li>Agregar la mezcla de harina a la mezcla de huevo y mezclar bien.</li>
<li>Agregar las zanahorias ralladas y mezclar bien.</li>
<li>Verter la mezcla en un molde para pastel engrasado de 9 x 13 pulgadas y hornear durante 30-35 minutos.</li>
<li>Servir caliente o frío.</li>
</ol>
</body>
</html>
Lenguaje del código: HTML, XML (xml)
En este ejemplo, la etiqueta <ol> envuelve todos los elementos de la lista numerada, y cada elemento de la lista se marca con la etiqueta <li>.
Ejemplo 2
Este ejemplo utiliza la etiqueta <ol> para crear una lista numerada de los diez primeros países más poblados del mundo.
<!DOCTYPE html>
<html>
<head>
<title>Los 10 países más poblados del mundo</title>
</head>
<body>
<h1>Los 10 países más poblados del mundo</h1>
<ol>
<li>China - 1.4 mil millones</li>
<li>India - 1.3 mil millones</li>
<li>Estados Unidos - 330 millones</li>
<li>Indonesia - 270 millones</li>
<li>Pakistán - 220 millones</li>
<li>Brasil - 213 millones</li>
<li>Nigeria - 200 millones</li>
<li>Bangladesh - 168 millones</li>
<li>Rusia - 146 millones</li>
<li>México - 130 millones</li>
</ol>
</body>
</html>
Lenguaje del código: HTML, XML (xml)
En este ejemplo, la etiqueta <ol> envuelve todos los elementos de la lista numerada, y cada elemento de la lista se marca con la etiqueta <li>.
Cada elemento de la lista incluye tanto el nombre del país como su población actual.