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.

Curso de HTML Desde Cero

Inscríbete Ahora