Creación de listas ordenadas en HTML

Una de las primeras técnicas que uno aprende cuando estudia HTML y que da lugar a un resultado vistoso es la creación de listas.

Existen tres tipos básicos de listas en HTML: ordenadas, no ordenadas y de definición. En el artículo de hoy explicaremos el modo de crear las primeras.

Una lista ordenada no es más que una en la que los distintos elementos (items) aparecen numerados secuencialmente.

Observad el siguiente ejemplo de lista ordenada para comprender exactamente de qué estamos hablando.

Su creación es sencilla, como veréis a continuación.

Lista ordenada se dice, en inglés, ordered list. Si memorizáis las iniciales de estas dos palabras tendréis la etiqueta HTML responsable de su creación: <ol>.

Con la correspondiente etiqueta de cierre, toda nuestra lista queda entre los pares de etiquetas:

<ol> ... </ol>

Escribimos los distintos elementos incluyéndolos también en un par de etiquetas características. En inglés, elemento de lista se dice list item. Volved a coger las iniciales de estas dos palabras y tendréis la etiqueta que envolverá cada item de la lista: <li>.

No debéis preocuparos por la numeración de cada elemento, aparecerá de modo automático.

Ya tenemos todo lo necesario para confeccionar la lista del ejemplo:

<ol>
  <li>Listas ordenadas (esta que estáis viendo)</li>
  <li>Listas no ordenadas</li>
  <li>Listas de definición</li>
</ol>

La indentación no es necesaria, pero ayuda a ver el esquema con claridad.

Practicadlo un par de veces y esta técnica será definitivamente vuestra.

Javier Montero


Creación de listas ordenadas en HTML


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta

Deja un comentario

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies