Cómo definir listas en páginas web HTML: los encabezados

Los títulos y los párrafos no siempre son suficientes. A veces necesita listas en sus páginas, también. Cuando decida cómo presentar sus datos, considere sus opciones. Si el texto se ajusta a viñetas cortas, preséntalo de esa manera.

Las listas con viñetas funcionan muy bien en la web donde su audiencia buscará información rápida y de fácil acceso. Usar listas numeradas también puede ayudar a sus visitantes a entender el punto rápidamente. El código para las listas - con viñetas o numeradas - es bastante simple. Puede colocar el encabezado para una lista en una etiqueta de párrafo o en una etiqueta de encabezado, la que mejor se adapte a la situación.

En HTML (y en escritura y publicación), las listas con viñetas se denominan "listas desordenadas" porque solo enumeran los elementos en ningún orden de importancia (y usan la etiqueta

). Las listas numeradas, comparativamente, son "listas ordenadas" porque el orden es importante; usan la etiqueta
1. . Sin embargo, los elementos en ambos tipos de listas se definen utilizando la etiqueta de la lista .

   Observe el siguiente ejemplo, que crea una lista simple con viñetas (sin ordenar):

   Mi lista de fruta
   
   manzanas
   plátanos
   naranjas
   
   

   En el ejemplo anterior, tenga en cuenta que la etiqueta de párrafo se cierra antes de que comiencen las etiquetas de lista. Tenga en cuenta también que la etiqueta

2. se usa para cada elemento de la lista.

   Para convertir esta lista en una lista numerada, utilice

   (para lista ordenada ) en lugar de la etiqueta
   , y no olvide cerrarla con la etiqueta
   .

   A veces una lista tiene sub-elementos anidados en ella. El código para que esto suceda se ve así:

   Mi lista de fruta
   
   manzanas
   
   rojas
   verdes
   amarillas
   
   
   plátanos
   naranjas
   
   

   En un navegador (sin definición estilos), la lista se parece a la de la siguiente figura con viñetas y sangrías para puntos de viñeta.

   

   Los subelementos en el ítem manzanas son parte de una segunda lista desordenada. Observe cómo la lista de subelementos comienza y se cierra entre

3. y
del elemento de la lista de manzanas. El navegador los muestra como elementos sangrados debajo de manzanas en la lista principal.