Manipular una Lista Ordenada con el Atributo Type en HTML

2 minuto(s)

En esta página:

Existen poca información sobre las listas ordenadas en HTML, estas listas cuentan con un atributo poco conocido en el mundo del desarrollo, quizás ya lo conocías, pero en la mayoría de casos son pocos los desarrolladores Web que conocen esta información, si no lo conoces prepárate que este artículo es para ti, vayamos con el artículo.

Antes de continuar, vamos a explicar que es una lista ordenada en HTML y de allí explicaremos sobre el atributo type que le podemos aplicar.

Que es una Lista Ordenada

Una lista ordenada en HTML es una forma de mostrar información de manera ordenada, a diferencia de una lista desordenada HTML, una lista ordenada se caracteriza por tener numeración por defecto, la etiqueta de una lista ordenada es <ol></ol> veamos un ejemplo

Lista Desordenada

Tiene (ul) como etiqueta y por defecto coloca viñetas de puntos negros

See the Pen oPJOwP by Nube Colectiva (@collectivecperu) on CodePen.

Lista Ordenada

Tiene (ol) como etiqueta y coloca una numeración por defecto

See the Pen Lista Ordenada by Nube Colectiva (@collectivecperu) on CodePen.

Atributo Type

Vamos a describir cada tipo de atributo type que podemos aplicar a una lista ordenada a continuación

Tipo: 1

Muestra los datos de la lista con una numeración, es el formato por defecto de una lista ordenada

See the Pen Lista Ordenada Tipo 1 by Nube Colectiva (@collectivecperu) on CodePen.

Tipo: A

Muestra los datos de una lista con letras Mayúsculas del Abecedario

See the Pen Lista Ordenada Tipo A by Nube Colectiva (@collectivecperu) on CodePen.

Tipo: a

Con este tipo puedes mostrar los datos con letras Minúsculas del Abecedario

See the Pen Lista Ordenada Tipo a by Nube Colectiva (@collectivecperu) on CodePen.

Tipo: I

Mediante este tipo puedes mostrar los datos con numeración Romana

See the Pen Lista Ordenada Tipo I by Nube Colectiva (@collectivecperu) on CodePen.

Tipo: i

Con este tipo puedes mostrar los datos de una lista ordenada mediante numeración Romana en minúsculas

See the Pen Lista Ordenada Tipo i by Nube Colectiva (@collectivecperu) on CodePen.

Contar una Lista

Este es Plus para este artículo, también puedes usar el atributo start para contar una Lista Ordenada, no importa el número desde donde deseas contar, siempre contará desde el número que le indiques, por ejemplo empezaremos a contar desde el número 15

See the Pen Contar Lista Ordenada by Nube Colectiva (@collectivecperu) on CodePen.

Conclusión

Puede parecer muy sencillo el uso de estos atributos, pero que en algún pueden ayudar a organizar una Lista de Datos. También puedes integrar una Lista con Estilos CSS y darle el aspecto que desees.