Listas en HTML5: Ordenadas y No Ordenadas
En el diseño web y las ICT, las listas son fundamentales para agrupar elementos relacionados, construir menús de navegación o describir algoritmos paso a paso. HTML nos ofrece dos formas principales para organizar esta información.
1. Listas No Ordenadas (<ul>)
Se utilizan cuando el orden de los elementos no altera el significado del contenido. Cada elemento de la lista va dentro de una etiqueta <li> (List Item) y se muestra con un marcador o viñeta por defecto.
Tipos de Identificadores (Viñetas) con CSS
Aunque antes se usaban atributos nativos, hoy en día modificamos el estilo visual de la viñeta utilizando la propiedad CSS list-style-type. Los valores principales son:
| Valor CSS | Resultado Visual | Uso Técnico Común |
|---|---|---|
disc |
Punto o disco relleno (Por defecto) | Listado general de componentes. |
circle |
Círculo vacío o contorno | Sub-elementos o categorías secundarias. |
square |
Cuadrado relleno | Menús modernos o paneles de control. |
Ejemplo Práctico de Aplicación:
<ul style="list-style-type: square;">
<li>Placa Arduino Uno R3</li>
<li>Cable de datos USB-B</li>
<li>Protoboard de 400 puntos</li>
</ul>2. Listas Ordenadas (<ol>)
Se emplean cuando la secuencia o el orden de los elementos es estrictamente necesario, por ejemplo, para escribir las instrucciones de un algoritmo de programación o una receta de ensamble.
Tipos de Identificador con el atributo type
A diferencia de las no ordenadas, las listas ordenadas nos permiten cambiar el tipo de numeración de forma nativa utilizando el atributo type directamente en la etiqueta <ol>:
| Atributo | Tipo de Indicador | Ejemplo de Secuencia |
|---|---|---|
type="1" |
Números arábigos (Por defecto) | 1, 2, 3, 4... |
type="A" |
Letras mayúsculas | A, B, C, D... |
type="a" |
Letras minúsculas | a, b, c, d... |
type="I" |
Números romanos en mayúscula | I, II, III, IV... |
type="i" |
Números romanos en minúscula | i, ii, iii, iv... |
Ejemplo Práctico (Algoritmo de Programación):
A continuación se muestra el orden lógico para programar el parpadeo de un LED en tu entorno de robótica:
<ol type="I">
<li>Definir el pin del LED como salida (OUTPUT).</li>
<li>Encender el pin enviando una señal ALTA (HIGH).</li>
<li>Esperar un tiempo de retraso (delay) de 1000ms.</li>
<li>Apagar el pin enviando una señal BAJA (LOW).</li>
</ol>