Generador automático de listas HTML (ul, ol, li)

Estas etiquetas HTML (ul, ol y li) se utilizan para crear listas. La lista debe comenzar con un ul si es una lista desordenada (con viñetas), o un ol si es una lista ordenada (numerada). Dentro de cada lista, cada elemento debe comenzar con una etiqueta li y terminar con una etiqueta cercana /li. Tenga en cuenta que los elementos de la lista pueden contener otra etiqueta HTML, incluida otra lista (para crear una “lista anidada”).

Generador de listas HTML

Tipo de lista
Estructura Separadora
Crear
Copiar
Limpio

Diferencia entre elementos ul y ol en HTML

Listas numeradas y con viñetas

Aunque los nombres de elementos ul y ol originalmente eran abreviaturas de “lista desordenada” y “lista ordenada”, sus significados literales siempre han sido diferentes. Los editores las usan para crear listas numeradas y con viñetas, respectivamente, y los navegadores las implementan.

Los autores tienen diferentes motivos para elegir entre ul, ol o cualquier otro marcado. En una receta, puede usar ul para la lista de ingredientes y ol para las instrucciones de preparación.

¿Cómo crear una lista?

¿Qué es lista? Técnicamente un conjunto de artículos (series). Esto significa que cualquier cosa puede llamarse lista y marcarse como tal. Un párrafo es una serie de declaraciones, por lo que puede tratarlo como una lista. Puede decir que tiene una lista con un solo elemento, incluso si no es una matriz real. Incluso una cadena vacía es una lista con cero elementos en el sentido abstracto.

Sin embargo, no se espera que ul y ol (y dl) en HTML se usen para todas las listas. Dentro de un párrafo, una secuencia como 1, 2, 3, 4, 5 es necesariamente una lista lógica, pero no puede usar ninguno de los elementos de la lista HTML para ellos. Son elementos de bloque y, por lo tanto, no están permitidos dentro de un elemento p. Y por defecto provocan una presentación en bloque con saltos de línea y márgenes antes y después, dividiendo así el párrafo.

Cuando el autor realmente quiera crear la lista, tratará el contenido como una lista y representará los elementos por separado para que no se superpongan. Por lo tanto, es una buena razón para usar ul al solicitar una lista con viñetas común.

Crear listas con HTML y propiedades de listas

Las especificaciones de HTML son bastante silenciosas o vagas acerca de la estructura real de ul, ol y dl. Solo se utilizan los términos “lista desordenada” y “lista ordenada”. Esto se debe a que son marcas físicas disfrazadas.

El “marcado físico” es bastante abstracto en este caso. Es importante presentar una lista con algunos marcadores de lista, “viñetas” o “números” en algún sentido. Esto es bastante diferente de ciertas funciones de presentación, como la configuración, el estilo de los números o incluso los números. Por ejemplo, tiene sentido usar marcadores de lista en una presentación de discurso. En lugar de tales marcas de listas, los autores pueden insertar marcas de listas como caracteres o imágenes en el propio documento. En general, este es un buen enfoque, especialmente si necesita una enumeración de varios niveles. Sin embargo, los elementos ul y ol han sido herramientas adecuadas por varias razones:

Corresponden a conceptos que la gente conoce de los procesadores de texto y otro software. Los navegadores generan automáticamente los marcadores. Esto es especialmente bueno para las listas numeradas cuando se usan herramientas de creación simples que no pueden crear listas. Los marcadores y otros detalles de la presentación se pueden cambiar usando CSS.