Elemento ol en HTML

Elemento ol en HTML

El elemento <ol> (del inglés ordered list) se utiliza para crear listas ordenadas en HTML. Estas listas son útiles para presentar información en un formato de lista, donde el orden de los elementos es importante. Cada elemento de la lista se define con el elemento <li> (list item).

<ol>
  <li>Primer elemento</li>
  <li>Segundo elemento</li>
  <li>Tercer elemento</li>
  <li>Cuarto elemento</li>
  <li>Quinto elemento</li>
</ol>

El navegador va a mostrar lo siguiente:

1. Primer elemento
2. Segundo elemento
3. Tercer elemento
4. Cuarto elemento
5. Quinto elemento

Ejemplos de listas ordenadas

<ol>
  <li>Encender la computadora</li>
  <li>Abrir el navegador</li>
  <li>Escribir “chat.openai.com”</li>
</ol>

<ol type="A">
  <li>Primer paso</li>
  <li>Segundo paso</li>
</ol>

Anidamiento de listas

<ol>
  <li>Frutas</li>
  <ol type="A">
    <li>Manzana</li>
    <li>Banana</li>
    <li>Naranja</li>
    <li>Fresa</li>
  </ol>
</ol>

Diferencias entre <ol> y <ul>

La diferencia principal entre <ol> y <ul> es que <ol> crea listas ordenadas, donde el orden de los elementos es importante, mientras que <ul> crea listas desordenadas, donde el orden no es relevante. En otras palabras, <ol> utiliza números o letras para enumerar los elementos, mientras que <ul> utiliza viñetas.

<ol>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
  <li>Elemento 4</li>
  <li>Elemento 5</li>
</ol>

<ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
  <li>Elemento 4</li>
  <li>Elemento 5</li>
</li>
</ul>