Listas HTML

¿Cómo funciona una Lista Ordenada <ol>?

La etiqueta <ol> genera una lista ordenada que el navegador numera automáticamente (por defecto: 1, 2, 3...), aunque se puede personalizar el formato.

Cada elemento de una lista ordenada se define con la etiqueta <li>, que representa un "elemento de lista" (list item).

Estructura básica de una Lista Ordenada <ol>

Así es como se ve el código HTML para una lista ordenada <ol>:

Atributos más comunes de una Lista Ordenada <ol>

• type: Permite cambiar el tipo de marcador que se utiliza para numerar la lista.
  • 1: para números decimales (por defecto), 1, 2, 3.
  • a: para letras minúsculas, a, b, c
  • A: para letras mayúsculas, A, B, C.
  • i: para números romanos en minúscula, i, ii, iii.
  • I: para números romanos en mayúscula, I, II, III.
• start: La etiqueta <ol> permite establecer el valor inicial de la lista con el atributo start, usando siempre un valor numérico, incluso si el atributo type define letras o números romanos.
• reversed: Invierte el orden de numeración.

¿Cuándo usar una Lista Ordenada <ol>?

Usar una lista ordenada siempre que la secuencia o la prioridad de los elementos sea importante. Por ejemplo:

• Instrucciones paso a paso.
• Clasificaciones (Top 10...).
• Un esquema con puntos numerados.
• Un índice de contenidos.

¿Cómo funciona una Lista Desordenada <ul>?

La etiqueta <ul> crea una lista desordenada en la que el navegador añade automáticamente un símbolo (como una viñeta) a cada elemento, sin usar números ni letras. Cada elemento de la lista se define con la etiqueta <li>, que representa un "elemento de lista" (list item).

Estructura básica de una Lista Desordenada <ul>

Así es como se ve el código HTML para una lista desordenada <ul>:

Atributos más comunes de una Lista Desordenada <ul>

• type: Históricamente se usaba para definir el tipo de viñeta de la lista. (obsoleto).
  • circle: Círculo (por defecto).
• Personalización con CSS:
  • list-style-type, Controla el tipo de viñeta con CSS:
    • disc: • (predeterminado)
    • circle: ○
    • square: ■
    • none: sin viñeta.
  • list-style-image, Usa imagen personalizada como viñeta (CSS):
    
  • list-style-position, Controla la alineación de la viñeta (CSS):
    
    • inside: la viñeta se alinea con el texto.
    • outside: la viñeta queda en el margen izquierdo (valor por defecto).

Ejemplo de de una lista desordenada:

¿Cuándo usar una Lista Desordenada <ul>?

Usa una lista desordenada siempre que la secuencia o la prioridad de los elementos NO sea importante. Algunos ejemplos comunes son:

• Una lista de características de un producto.
• Un menú de navegación en un sitio web (Inicio, Acerca de, Contacto).
• Una lista de "preguntas frecuentes".
• Una lista de hobbies o intereses.
• Cualquier enumeración donde el orden de los ítems no afecte el significado general.

¿Cómo funciona una Listas de Descripción <dl>?

En esta lista, cada término está etiquetado con <dt> (término de definición) y su correspondiente descripción o definición con <dd> (descripción de definición). Esta estructura organiza la información en pares término-definición, permitiendo incluir uno o más términos de definición, lo que facilita una presentación clara, semántica y ordenada de datos relacionados.

Estructura básica de una Listas de Descripción <dl>

Atributos más comunes de una Listas de Descripción <dl>

Es importante mencionar que <dl> no tiene atributos específicos únicos, pero sus elementos hijos (<dt> y <dd>) también pueden usar todos los atributos globales de HTML.

¿Cuándo usar una Listas de Descripción <dl>?

Se recomienda utilizar una lista de descripción <dl> en los siguientes casos:

• Glosarios y definiciones: Términos técnicos y sus explicaciones.
• Metadatos: Información estructurada como especificaciones técnicas.
• Preguntas frecuentes (FAQ): Preguntas y sus respuestas correspondientes.
• Datos de contacto: Etiquetas como "Teléfono", "Email" con sus valores.
• Descripciones de productos: Características y especificaciones.
• Información biográfica: Fechas, lugares, eventos y sus descripciones.

¿Cómo funciona una Lista Mezclada?

El navegador procesa la estructura anidada y la representa con distintos estilos de viñetas o numeración para cada nivel, mejorando la organización visual y semántica del contenido. Por ejemplo, una lista desordenada puede incluir una lista ordenada dentro de uno de sus elementos para detallar pasos o subcategorías, y viceversa, ofreciendo flexibilidad en la presentación.

Este sistema permite representar relaciones jerárquicas entre elementos, facilitando la creación de menús multinivel, instrucciones detalladas o cualquier contenido que necesite orden y claridad. La estructura se forma al incorporar una lista completa dentro de un elemento <li> de otra lista, y el navegador ajusta automáticamente la indentación y los marcadores para visualizar claramente los distintos niveles.

Estructura básica de una Lista Mezclada

Se dbe pensar como una estructura de "contenido principal" y "sub-contenido relacionado" para una mejor comprensión de las listas mezcladas.

Mecánica del Funcionamiento:

• Lista Principal o Contenedor: Se tiene una lista principal (ya sea <ul> o <ol>), cada punto de esta lista principal es un <li>.

                            
                              <ul>
                                  <li>Elemento Principal 1</li>
                                  <li>Elemento Principal 2</li>
                                  <li>Elemento Principal 3</li>
                              </ul>
                            
                          

• Anidación: Cada elemento de la lista puede contener una sublista, es decir, entre las etiquetas <li> y </li> se inserta una nueva lista (<ul> o <ol>), creando una estructura anidada, p. ej. sub-lista 2, en el Elemento Principal 2:

                            
                              <ul>
                                  <li>Elemento Principal 1</li>
                                  <li>Elemento Principal 2
                                    <ul> 
                                      <!-- sub-lista 2 --> 
                                    </ul>
                                  </li>
                                  <li>Elemento Principal 3</li>
                              </ul>
                            
                          

• Los Sub-elementos: Dentro de esta nueva lista anidada, se coloca los propios elementos de ítem de lista (<li>) para los sub-puntos:

                            
                              <ul>
                                  <li>Elemento Principal 1</li>
                                  <li>Elemento Principal 2
                                    <ul> 
                                      <li>Sub-elemento 2.1</li>
                                      <li>Sub-elemento 2.2</li>
                                    </ul>
                                  </li>
                                  <li>Elemento Principal 3</li>
                              </ul>
                            
                          

• Cierre Correcto: Es fundamental que las etiquetas de la sub-lista (</ul> o </ol>) y la etiqueta de cierre del elemento principal (</li>) se coloquen en el orden correcto para garantizar una estructura HTML válida. La sub-lista debe cerrarse antes de cerrar el elemento <li> que la contiene.

Atributos más comunes de una una Lista Mezclada

• Atributos de una Ordenada:
  • type: Tipo de marcador: 1, a, A, i ó I
  • start: valor inicial.
  • reversed: orden invertido.
• Atributos de una Desordenada: Personalización con CSS:
  • list-style-type,: Tipo de viñeta: Disc, circle, square o none
  • list-style-image: Viñeta personalizada des un archivo de icono.
  • list-style-position,: posición de la viñeta: inside o ouside

¿Cuándo usar una Lista Mezclada?

• Representar jerarquías de información: Mostrar una estructura de temas principales y subtemas o pasos que dependen unos de otros, las listas mezcladas ayudan a visualizar la relación entre los diferentes niveles.
• Mostrar pasos con detalles adicionales: Explicar un procedimiento general con instrucciones específicas para cada paso, se puede usar una lista mezclada para mostrar la secuencia principal y, dentro de cada paso, detallar las acciones
• Crear índices temáticos: Para organizar temas y subtemas de un documento o manual, una lista mezclada ayuda a estructurar la información de forma ordenada.
• Describir clasificaciones o taxonomías: En áreas como biología, informática o documentación técnica, se pueden usar listas mezcladas para mostrar clasificaciones jerárquicas.

Cuándo NO usar una Lista Mezclada:

• Cuando la información no tiene relación jerárquica: Si los ítems no dependen el uno del otro ni forman una subcategoría, es mejor usar listas separadas o simplemente texto.
• Para fines puramente visuales: No usar listas anidadas solo para aplicar indentación o un estilo visual. Si solo se quiere un efecto visual, es mejor usar CSS para el espaciado o los estilos. El HTML debe reflejar la estructura lógica del contenido.
• Cuando el nivel de anidación es excesivo: Aunque HTML permite anidar listas a muchos niveles, más de 3 o 4 niveles pueden hacer que el contenido sea muy difícil de leer y entender, tanto para los usuarios como para los lectores de pantalla. En esos casos, considera dividir el contenido en secciones más pequeñas o usar otros elementos HTML como encabezados y párrafos.