Lista ordenada en HTML

Introducción

En HTML, podemos crear una lista ordenada utilizando la etiqueta <ol>. La lista ordenada es una lista de elementos numerados en un orden particular. La etiqueta <ol> se utiliza para crear la lista ordenada y la etiqueta <li> se utiliza para definir cada elemento de la lista.

Nota: Puedes practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/lists_desc("Lists and Descriptions") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70806{{"Lista ordenada en HTML"}} html/head_elems -.-> lab-70806{{"Lista ordenada en HTML"}} html/lists_desc -.-> lab-70806{{"Lista ordenada en HTML"}} html/doc_flow -.-> lab-70806{{"Lista ordenada en HTML"}} html/inter_elems -.-> lab-70806{{"Lista ordenada en HTML"}} end

Configurar el archivo HTML

En este paso, crearemos un archivo HTML básico y configuraremos la etiqueta <ol>. Abra el archivo "index.html" y escriba el siguiente código:

<!doctype html>
<html>
  <head>
    <title>Ejemplo de lista ordenada</title>
  </head>
  <body>
    <h1>Ejemplo de lista ordenada</h1>
    <ol>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
    </ol>
  </body>
</html>

Agregar más elementos a la lista

En este paso, agregaremos más elementos a la lista ordenada. Para hacer esto, simplemente agregue más etiquetas <li> entre las etiquetas de apertura y cierre <ol>:

<!doctype html>
<html>
  <head>
    <title>Ejemplo de lista ordenada</title>
  </head>
  <body>
    <h1>Ejemplo de lista ordenada</h1>
    <ol>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
      <li>Elemento 4</li>
      <li>Elemento 5</li>
    </ol>
  </body>
</html>

Cambiar el tipo de número

En este paso, cambiaremos el tipo de numeración utilizado en la lista ordenada. Por defecto, la lista ordenada utiliza numeración decimal. Sin embargo, podemos cambiar esto a otros tipos de números, como los números romanos o las letras. Para cambiar el tipo de numeración, utilice el atributo type en la etiqueta <ol>. Por ejemplo:

<!doctype html>
<html>
  <head>
    <title>Ejemplo de lista ordenada</title>
  </head>
  <body>
    <h1>Ejemplo de lista ordenada</h1>
    <ol type="I">
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
      <li>Elemento 4</li>
      <li>Elemento 5</li>
    </ol>
  </body>
</html>

En el código anterior, hemos establecido el atributo type en I, que son los números romanos en mayúsculas.

Comenzar a numerar a partir de un número específico

En este paso, cambiaremos el número de inicio de los elementos de la lista ordenada. Por defecto, el primer elemento de la lista ordenada comienza con "1". Sin embargo, podemos cambiar esto para que comience a partir de un número específico. Para cambiar el número de inicio, utilice el atributo start en la etiqueta <ol>. Por ejemplo:

<!doctype html>
<html>
  <head>
    <title>Ejemplo de lista ordenada</title>
  </head>
  <body>
    <h1>Ejemplo de lista ordenada</h1>
    <ol start="3">
      <li>Elemento 3</li>
      <li>Elemento 4</li>
      <li>Elemento 5</li>
    </ol>
  </body>
</html>

En el código anterior, hemos establecido el atributo start en 3, lo que significa que el primer elemento de la lista ordenada se numerará como "3".

Resumen

En este laboratorio, aprendimos cómo crear una lista ordenada en HTML utilizando la etiqueta <ol>. También aprendimos cómo agregar elementos a la lista, cambiar el tipo de numeración y comenzar la numeración a partir de un número específico. Con este conocimiento, podemos crear listas con un aspecto profesional en nuestras páginas web.