Listas HTML – ¿Qué son y como crearlas correctamente?

Descubre que son las listas HTML, una herramienta para organizar información de manera clara y estructurada. Desde listas ordenadas que siguen una secuencia específica hasta listas desordenadas que ofrecen flexibilidad en la disposición de elementos, estas etiquetas y sus atributos dan forma al contenido de tu página web. Explora ejemplos prácticos y aprende cómo incorporar listas en tu código para mejorar la experiencia del usuario.

listas html

Sigue las palabras fuertes si quieres un resumen de todo el artículo.

Índice

1. ¿Qué son las listas HTML?

Las listas HTML son una herramienta para organizar y presentar información en forma de listado dentro de una página web. Hacen que el contenido sea más fácil de leer y entender al separar elementos relacionados.

Descubre todo sobre este marcado de datos en esta guía completa sobre HTML.

1.1. Ejemplo y tipos principales de listas HTML:

A continuación te dejamos un ejemplo en de una lista HTML ordenada, donde primera podrás ver la estructura en código y segundo, como se visualiza en el navegador:

<ol>
    <li>Listas ordenadas</li>
    <li>Listas desordenadas</li>
    <li>Listas de definición</li>
</ol>Lenguaje del código: HTML, XML (xml)
  1. Listas ordenadas
  2. Listas desordenadas
  3. Listas de definición

1.2. Usos comunes de listas HTML en el desarrollo web:

Algunos de los usos más comunes de las listas en el desarrollo web son:

  1. Menús de navegación: Las listas se utilizan para crear menús de navegación, ya sea en forma de lista vertical u horizontal.
  2. Listas de ítems o productos: En sitios de comercio electrónico o catálogos en línea, las listas se emplean para mostrar una serie de productos, servicios o ítems, con o sin imágenes asociadas.
  3. Pasos o instrucciones: Las listas ordenadas se utilizan para presentar pasos secuenciales o instrucciones detalladas, como tutoriales, guías de uso o formularios paso a paso.
  4. Listas de características o ventajas: Para resaltar las características principales de un producto, servicio o plataforma, se utilizan listas para presentarlas de manera concisa.
  5. Índices o listas de contenidos: En páginas web extensas, se emplean listas para crear índices que faciliten la navegación y la localización de información específica.
  6. Listas de recursos relacionados: Para proporcionar enlaces a recursos relacionados, como artículos de blog, publicaciones en redes sociales o productos relacionados.
  7. Listas de referencias o citas: En sitios académicos, bibliotecas en línea o artículos de investigación, se utilizan listas para enumerar referencias, citas o fuentes utilizadas en el contenido.
  8. Listas de comentarios o testimonios: Para mostrar comentarios de usuarios, testimonios de clientes o reseñas de productos, las listas son una forma común de presentar este tipo de información.

En general, las listas son una herramienta versátil en el desarrollo web que ayuda a organizar y presentar información de manera clara y estructurada, mejorando la experiencia del usuario y facilitando la comprensión del contenido.

2. ¿Cómo crear listas HTML correctamente?.

Como requisito previo para poder crear o poner estas listas HTML en una página web, primero te recomendamos leer los siguientes artículos sobre:

Estos artículos que recomendamos te ayudarán a comprender mejor estos siguiente pasos generales para crear listas HTML correctamente:

  1. Abre el editor de código fuente de VSCode:
    • Descarga e instala este editor de código fuente y sigue los pasos del punto 5 del artículo que te recomendamos leer anteriormente.
  2. Introduce los elementos HTML para crear una lista dentro del <body>:
    • Ahora, si seguiste los pasos del punto anterior, dentro del <body> copia y pega el siguiente código HTML para poder crear una lista para tu página web:
<ol>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ol>Lenguaje del código: HTML, XML (xml)
  1. Edita la lista:
    • Una vez que hayas introducido el código anterior, dentro de cada etiqueta de contenido de lista <li>Elemento 1</li>, ingresa el contenido que desees, puede ser texto, una imagen, un enlace, etc.
  2. Personaliza la apariencia (opcional):
    • Si deseas personalizar la apariencia de la lista, puedes aplicar estilos CSS para cambiar el tipo de marcador, el color, el tamaño de la fuente, los márgenes, etc.
  3. Prueba la accesibilidad:
    • Antes de publicar tu lista, asegúrate de probarla para verificar que sea accesible para todos los usuarios, incluidas personas con discapacidades visuales u otras discapacidades. Utiliza herramientas de validación de accesibilidad y realiza pruebas de usuario si es posible.
  4. Visualiza la lista HTML que introdujiste:
    • Ahora, siguiendo nuevamente el punto 4 del artículo donde te explicamos como usar este edito de código fuente de VSCode, visualiza tu lista HTML en tu navegador preferido.

ACLARACIÓN: En el el ejemplo anterior, dimos un código para poner una lista HTML ordenada, ten en cuenta que también puedes optar por otras clases de listas HTML (ordenadas, desordenadas y de definición) las cuales iremos explicando en los siguientes puntos con ejemplos para que te sirvan de guías practicas.

3. Listas ordenadas HTML.

Las listas ordenadas en HTML se utilizan para mostrar información en un orden específico. Se crean con la etiqueta <ol> (que significa «ordered list») y cada elemento de la lista se define con la etiqueta <li> (que significa «list item»).

Una de las características más útiles de las listas ordenadas es que la numeración se genera automáticamente. Esto significa que no necesitas preocuparte por enumerarlos manualmente, el navegador se encarga de asignar números (o letras, romanos, etc., según el tipo de lista) secuencialmente a cada elemento de la lista.

Además, el contenido de un elemento de lista <li> puede ser cualquier cosa que desees: texto, imágenes, enlaces, otros elementos HTML, etc. Esto te da flexibilidad para personalizar cada elemento de lista según tus necesidades.

3.1. Ejemplo de lista ordenada:

<ol>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
</ol>
Lenguaje del código: HTML, XML (xml)
  1. Elemento 1
  2. Elemento 2
  3. Elemento 3

En este ejemplo, primero vemos el código HTML de una lista ordenada y segundo, como se visualiza en el navegador.

Cada <li> representa un elemento de la lista, y la lista se numerará automáticamente en orden ascendente.

¿Y si deseo especificar un tipo diferente de numeración para la lista?

3.2. Atributos de la etiqueta <ol>:

Los atributo HTML (elementos que permiten incorporar características adicionales al agregarlas a las etiquetas HTML para modificar su comportamiento o apariencia) principales de la etiqueta <o> son:

  • Atributo type.
  • Atributo start.
  • Atributo reversed.

3.2.1. Atributo type: 

Define el tipo de marcador que se utilizará para cada elemento de la lista. Los valores válidos son:

  • 1 (predeterminado): Números arábigos (1, 2, 3…)
  • a: Letras minúsculas (a, b, c…)
  • A: Letras mayúsculas (A, B, C…)
  • i: Números romanos en minúscula (i, ii, iii…)
  • I: Números romanos en mayúscula (I, II, III…)

Aquí tienes un ejemplo:

<ol type="A">
    <li>Elemento A</li>
    <li>Elemento B</li>
    <li>Elemento C</li>
</ol>Lenguaje del código: HTML, XML (xml)
lista-html-atributo-type

Este código crea una lista ordenada con letras mayúsculas como marcadores en lugar de números.

3.2.2. Atributo start:

Si deseas cambiar el valor de inicio de la numeración de la lista, puedes utilizar el atributo start. Por ejemplo:

<ol start="10">
    <li>Elemento 10</li>
    <li>Elemento 11</li>
    <li>Elemento 12</li>
</ol>
Lenguaje del código: HTML, XML (xml)
lista-html-atributo-start

Este código crea una lista ordenada que comienza en el número 10 en lugar de 1.

3.2.3. Atributo reversed:

Invierte el orden de la lista. Por ejemplo:

<ol type="A" reversed start="3">
  <li>Primer elemento</li>
  <li>Segundo elemento</li>
  <li>Tercer elemento</li>
</ol>
Lenguaje del código: HTML, XML (xml)
lista html atributo reservd

Primero vemos el código HTML de una lista ordenada y segundo, como se visualiza en el navegador

3.3. Consejos y usos comunes de listas ordenadas:

Siguiendo estos consejos, podrás utilizar listas ordenadas de manera efectiva y mejorar la estructura y la usabilidad de tus páginas web.

  • Usa listas ordenadas para mostrar pasos en un proceso, instrucciones, ingredientes en una receta, etc.
  • Puedes usar CSS para personalizar el estilo de la lista, como el tipo de marcador, el tamaño de la fuente, el color, etc.
  • Asegúrate de que el orden de la lista sea lógico y fácil de entender para el usuario.
  • Asegúrate de que cada elemento de la lista esté envuelto dentro de la etiqueta <li> y que todas las etiquetas <li> estén contenidas dentro de la etiqueta <ol>
  • Si bien es posible anidar listas ordenadas dentro de otras listas, evita hacerlo en exceso, ya que puede complicar la estructura de tu HTML

4. Listas no ordenadas en HTML

Las listas no ordenadas en HTML se utilizan para mostrar información sin un orden específico y generalmente. Se crean con la etiqueta <ul> (que significa «unordered list») y cada elemento de la lista se define con la etiqueta <li> (que significa «list item»).

Los elementos de la lista no ordenadas se presentan con viñetas por defecto. Estas viñetas suelen ser puntos negros, pero pueden variar dependiendo del navegador y de las configuraciones de estilo predeterminadas del usuario.

4.1. Ejemplo de lista desordenada:

<ul>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
</ul>
Lenguaje del código: HTML, XML (xml)
  • Elemento 1
  • Elemento 2
  • Elemento 3

En este ejemplo, cada <li> representa un elemento de punto negro por defecto en la lista.

4.2. Atributos de la etiqueta <ol>:

El atributo mas importantes de estas listas no ordenadas en el atributo type:

4.2.1. Atributo type: 

Define el tipo de marcador que se utilizará para cada elemento de la lista. Los valores válidos son:

  • disc (predeterminado): Círculos pequeños
  • circle: Círculos rellenos
  • square: Cuadrados

Aquí dejo un ejemplo:

<ul type="square">
  <li>Primer elemento</li>
  <li>Segundo elemento</li>
  <li>Tercer elemento</li>
</ul>Lenguaje del código: HTML, XML (xml)
lista desordenada atributo type ejemplo

En este ejemplo, el atributo y su valor de type=»square»; dan como resultado una lista no ordenada con cuadrados.

4.3. Consejos para usar listas desordenadas:

  • Utiliza las listas desordenadas para mostrar información que no tiene un orden específico. Por ejemplo, puedes usar una lista desordenada para enumerar las características de un producto, los ingredientes de una receta o los miembros de un equipo.
  • Utiliza viñetas claras y fáciles de ver. Los círculos pequeños (disc) son el tipo de viñeta predeterminado, pero puedes usar otros tipos como cuadrados (square) o círculos rellenos (circle) para que la lista sea más atractiva.
  • Añade un título a la lista para que los usuarios sepan de qué trata. Puedes usar la etiqueta <h1> o <h2> para crear un título para la lista.
  • Utiliza CSS para personalizar el estilo de la lista. Puedes cambiar el color, el tamaño de la fuente, el tipo de viñeta y otros aspectos de la lista para que se adapte al diseño de tu página web.
  • Mantén las listas desordenadas concisas. No incluyas demasiados elementos en una sola lista, ya que esto puede dificultar la lectura y la comprensión.

4.4. Usos comunes de las listas desordenadas:

  • Enumerar características de un producto.
  • Mostrar los ingredientes de una receta.
  • Listar los miembros de un equipo.
  • Presentar una serie de pasos o instrucciones.
  • Mostrar enlaces a otras páginas web.
  • Crear un menú de navegación.
  • Resumir información importante.

5. Listas de definición en HTML

Las listas de definición en HTML se utilizan para presentar términos y sus definiciones. Son útiles para crear glosarios, diccionarios, enciclopedias o cualquier otro contenido que necesite de una estructura de términos y definiciones.

La estructura básica para crear estas lista de definición incluye las siguientes etiquetas:

  • Definition List <dl>: Define la lista de definición.
  • Definition Term <dt>: Define un término en la lista de definición.
  • Definition Description <dd>: Define la descripción o definición del término especificado por la etiqueta.

5.1. Ejemplo listas de definición.

<dl>
    <dt>Término 1</dt>
    <dd>Definición de término 1.</dd>
    <dt>Término 2</dt>
    <dd>Definición de término 2.</dd>
    <dt>Término 3</dt>
    <dd>Definición de término 3.</dd>
</dl>
Lenguaje del código: HTML, XML (xml)
Término 1
Definición de término 1.
Término 2
Definición de término 2.
Término 3
Definición de término 3.

5.2. Atributos de la etiqueta <dl>:

La etiqueta <dl> solo tiene un atributo: compact.

5.2.1. Atributo compact:

Este atributo reduce el espacio en blanco entre los términos y las definiciones. Se puede usar para crear listas de definición más compactas y que ocupen menos espacio en la página web. Ejemplo:

<dl compact>
  <dt>HTML</dt>
  <dd>Lenguaje de marcado</dd>
  <dt>CSS</dt>
  <dd>Lenguaje de estilo.</dd>
  <dt>JavaScript</dt>
  <dd>Lenguaje de programación para añadir interactividad.</dd>
</dl>
Lenguaje del código: HTML, XML (xml)
HTML
Lenguaje de marcado
CSS
Lenguaje de estilo.
JavaScript
Lenguaje de programación para añadir interactividad.

Nota: El atributo compact no es compatible con todos los navegadores web.

5.3. Consejos para usar listas de definición:

  • Utiliza las listas de definición para presentar términos y sus definiciones. No las uses para enumerar información que no tenga una relación de término-definición.
  • Mantén las listas de definición concisas. No incluyas demasiados términos en una sola lista, ya que esto puede dificultar la lectura y la comprensión.
  • Utiliza un estilo claro y conciso para las definiciones. Las definiciones deben ser fáciles de leer y entender.
  • Añade un título a la lista para que los usuarios sepan de qué trata. Puedes usar la etiqueta <h1> o <h2> para crear un título para la lista.
  • Utiliza CSS para personalizar el estilo de la lista. Puedes cambiar el color, el tamaño de la fuente, el espaciado y otros aspectos de la lista para que se adapte al diseño de tu página web.

5.4. Ejemplos de usos comunes:

  • Glosario de términos técnicos
  • Diccionario de una lengua extranjera
  • Enciclopedia de animales
  • Lista de ingredientes y sus propiedades.

6. Atributos globales para usar listas HTML.

Los siguientes atributos globales se pueden usar en todos los tipos de listas HTML, de todas maneras recomendamos consultar la documentación de cada tipo de lista para obtener más información:

  1. Atributos de accesibilidad en listas:
  2. Atributos de estilo en listas:
  3. Atributos de comportamiento en listas:
  4. Atributos de datos en listas:

6.1. Atributos de accesibilidad en listas:

Estos atributos permiten que las personas con discapacidades puedan acceder y comprender mejor el contenido de una página web proporcionando información adicional a los lectores de pantalla y otros dispositivos de asistencia sobre cómo interpretar el contenido.

  • accesskey: Define una tecla de acceso rápido para acceder al elemento.
  • aria-describedby: Asocia el elemento con una descripción textual.
  • aria-labelledby: Asocia el elemento con un título.
  • aria-hidden: Oculta el elemento a los lectores de pantalla.
  • tabindex: Define el orden de tabulación del elemento.

6.2. Atributos de estilo en listas:

Estos atributos se pueden usar para personalizar la apariencia de los elementos HTML. La elección del atributo más adecuado dependerá de tus necesidades específicas.

  • class: Asigna una o más clases CSS al elemento.
  • id: Asigna un ID único al elemento.
  • style: Define estilos CSS inline para el elemento.

6.3. Atributos de comportamiento en listas:

Estos atributos permiten modificar el comportamiento por defecto de los elementos HTML. Estos atributos se utilizan para controlar acciones como la navegación, la presentación y la interacción del usuario.

  • contenteditable: Indica si el contenido del elemento es editable por el usuario.
  • dir: Define la dirección del texto (ltr o r tl).
  • draggable: Indica si el elemento se puede arrastrar.
  • hidden: Oculta el elemento.
  • lang: Define el idioma del contenido del elemento.
  • spellcheck: Indica si el contenido del elemento debe ser revisado por el corrector ortográfico.
  • title: Muestra un texto informativo al pasar el mouse sobre el elemento.

6.4. Atributos de datos en listas:

Estos atributos permiten almacenar información adicional sobre un elemento HTML sin afectar a su visualización. Esta información puede ser utilizada por JavaScript, CSS o frameworks web para personalizar el comportamiento del elemento o para mostrar información contextual.

  • data-*: Se pueden usar atributos data-* personalizados para almacenar datos adicionales sobre el elemento.

7. Anidamiento de listas HTML.

El anidamiento de listas en HTML es una técnica que permite incluir una lista dentro de otra lista. Esto es útil para organizar contenido complejo de forma clara y fácil de entender.

7.1. Ejemplo y estructura para crear anidamiento de listas:

Para anidar listas, simplemente coloca una lista dentro de otra. Por ejemplo, puedes anidar una lista ordenada dentro de una lista no ordenada, o viceversa.

Ejemplo en código de anidamiento de listas:

<ul>
    <li>Elemento 1</li>
    <li>Elemento 2
        <ul>
            <li>Elemento 2.1</li>
            <li>Elemento 2.2</li>
            <li>Elemento 2.3
                <ol>
                    <li>Elemento 2.3.1</li>
                    <li>Elemento 2.3.2</li>
                    <li>Elemento 2.3.3</li>
                </ol>
            </li>
        </ul>
    </li>
    <li>Elemento 3</li>
</ul>
Lenguaje del código: HTML, XML (xml)

Su visualización en el navegador:

  • Elemento 1
  • Elemento 2
    • Elemento 2.1
    • Elemento 2.2
    • Elemento 2.3
      1. Elemento 2.3.1
      2. Elemento 2.3.2
      3. Elemento 2.3.3
  • Elemento 3

7.2. Consejos para anidar listas HTML:

Aquí tienes algunos consejos útiles para anidar listas en HTML de manera efectiva:

  1. Mantén la estructura clara y fácil de entender: Utiliza una indentación consistente para mostrar la jerarquía de las listas.
  2. No anides demasiado profundamente: Ya que puede hacer que el código HTML sea difícil de leer y mantener.
  3. Utiliza listas apropiadamente: Antes de anidar listas, considera si realmente necesitas hacerlo. En algunos casos, puede ser mejor utilizar otros elementos HTML para organizar la información, como párrafos, divs o tablas, dependiendo del contexto.
  4. Sigue las mejores prácticas de accesibilidad: Asegúrate de que las listas anidadas sean accesibles para todos los usuarios, incluidos aquellos que utilizan lectores de pantalla. Utiliza atributos como aria-labelledby y aria-describedby si es necesario para proporcionar descripciones adicionales a las listas anidadas.
  5. Prueba en diferentes dispositivos y navegadores: Para asegurarte de que la estructura se vea bien y sea funcional en todos ellos.
  6. Utiliza CSS para estilizar: Utiliza CSS para aplicar estilos a tus listas anidadas y hacerlas más atractivas visualmente.
  7. Comenta tu código: Si estás anidando listas de manera compleja, considera agregar comentarios en tu código HTML para explicar la estructura y la lógica detrás de las listas anidadas. Esto puede ser útil para ti mismo y para otros desarrolladores que puedan trabajar en el mismo código en el futuro.

Siguiendo estos consejos, podrás anidar listas en HTML de manera efectiva y crear una estructura de información clara y organizada en tus páginas web.

8. Listas HTML y la accesibilidad web.

La accesibilidad web es fundamental para garantizar que todas las personas, independientemente de sus habilidades o discapacidades, puedan acceder y utilizar el contenido en línea de manera efectiva. Aquí tienes una ampliación sobre la importancia de hacer que tus listas sean accesibles y algunas mejores prácticas para etiquetar y estructurar las listas adecuadamente:

  1. Etiquetado semántico: Utiliza el etiquetado semántico apropiado al crear listas en HTML. Esto significa utilizar las etiquetas <ul>, <ol>, <li>, <dt>, y <dd> de manera correcta y significativa para definir la estructura de tu lista y la relación entre los elementos. Un etiquetado semántico adecuado facilita la comprensión del contenido por parte de los usuarios y los dispositivos de asistencia.
  2. Proporciona alternativas textuales: Esto puede incluir descripciones adicionales o enlaces a páginas con más detalles sobre los elementos de la lista. Las personas con discapacidades visuales pueden utilizar lectores de pantalla que lean el contenido en voz alta, por lo que tener descripciones claras y concisas es crucial.
  3. Contraste de color y tamaño del texto: Asegúrate de que el color y el tamaño del texto sean legibles para todas las personas, incluidas aquellas con discapacidades visuales. Utiliza colores de fondo y de texto que tengan un buen contraste para mejorar la legibilidad. Además, evita utilizar tamaños de texto demasiado pequeños que puedan dificultar la lectura.
  4. Enfoque en la navegación: Si estás creando menús de navegación utilizando listas, asegúrate de que sean fáciles de navegar utilizando el teclado. Esto implica garantizar que los enlaces sean accesibles utilizando la tecla «Tab» y que haya indicadores visuales claros para resaltar el elemento enfocado.
  5. Pruebas de accesibilidad: Realiza pruebas regulares de accesibilidad en tu sitio web utilizando herramientas de evaluación de accesibilidad o realizando pruebas manuales. Esto te ayudará a identificar y corregir posibles barreras de acceso antes de que afecten a los usuarios.
  6. Cumplimiento de estándares de accesibilidad: Familiarízate con las pautas y estándares de accesibilidad web, como las Pautas de Accesibilidad al Contenido en la Web (WCAG). Cumplir con estos estándares te ayudará a garantizar que tu sitio web sea accesible para la mayor cantidad posible de usuarios.

Al seguir estas mejores prácticas y prestar atención a la accesibilidad al crear y diseñar listas en tu sitio web, puedes mejorar la experiencia de usuario para todas las personas, incluidas aquellas con discapacidades.

9. ¿Cómo crear listas HTML en WordPress? Paso a paso.

9.1. Creas listas HTML usando Gutenberg:

Para crear listas HTML en WordPress utilizando el editor Gutenberg, sigue estos pasos:

  1. Inicia sesión en tu sitio de WordPress: Accede al panel de administración de tu sitio web WordPress.
  2. Crea una nueva entrada o página: Ve a «Entradas» > «Agregar nueva» o «Páginas» > «Agregar nueva», según sea tu preferencia.
  3. Abre el editor Gutenberg: Una vez que estés en la pantalla de edición, verás el editor Gutenberg.
  4. Inserta un bloque de lista: Haz clic en el lugar donde deseas agregar la lista o simplemente coloca el cursor en el punto donde quieres que aparezca la lista. Luego, haz clic en el botón «+» en la esquina superior izquierda del editor para abrir el panel de bloques.
  5. Busca y selecciona el bloque de lista: En el panel de bloques, busca «Lista» o simplemente escribe «Lista» en la barra de búsqueda. Verás opciones para listas ordenadas (numeradas) y listas no ordenadas (con viñetas). Selecciona el tipo de lista que deseas utilizar.
  6. Añade elementos a la lista: Una vez que hayas seleccionado el tipo de lista, puedes comenzar a agregar elementos a la lista directamente dentro del bloque de Gutenberg. Presiona «Enter» después de cada elemento para agregar un nuevo elemento a la lista.
  7. Personaliza la lista si es necesario: Puedes personalizar la lista seleccionando el bloque de lista y utilizando las opciones de formato disponibles en la barra de herramientas superior del editor Gutenberg. Por ejemplo, puedes cambiar el estilo de las viñetas, el color del texto, etc.
  8. Guarda o publica la entrada o página: Una vez que hayas terminado de crear tu lista, guarda o publica la entrada o página según tus preferencias.

¡Y eso es todo! Has creado una lista HTML en WordPress utilizando el editor Gutenberg. Puedes repetir estos pasos para agregar más listas en otras partes de tu contenido si es necesario.

9.2. Creas listas HTML usando Elementor:

Elementor es un popular constructor de páginas para WordPress que facilita la creación de contenido visualmente atractivo sin necesidad de conocimientos de codificación. Aquí tienes los pasos para crear listas HTML en WordPress con Elementor:

  1. Inicia sesión en tu panel de WordPress: Accede al panel de administración de tu sitio web WordPress.
  2. Edita la página con Elementor: Ve a la página donde deseas agregar la lista y haz clic en «Editar con Elementor».
  3. Agrega un nuevo elemento de lista: En el panel de la izquierda, busca el widget «Lista» o «Listas de iconos» (dependiendo de la versión de Elementor que estés utilizando). Puedes arrastrar este widget al área de trabajo o simplemente hacer clic en él para agregarlo.
  4. Personaliza la lista: Una vez que hayas agregado el widget de lista, podrás personalizarlo según tus necesidades. Puedes agregar elementos a la lista, cambiar el estilo de la lista (por ejemplo, lista ordenada o no ordenada), ajustar la tipografía, el color y otros estilos visuales.
  5. Agregar contenido a la lista: Haz clic en el widget de lista para abrir el editor de contenido. Aquí puedes agregar tus elementos de lista utilizando el editor de texto de Elementor. Simplemente escribe cada elemento de la lista en una nueva línea.
  6. Estiliza la lista según tus preferencias: Utiliza las opciones de estilo en el panel de configuración del widget para ajustar el diseño de la lista. Puedes cambiar el tamaño del texto, el color, el tipo de viñetas (en el caso de listas no ordenadas) y otros aspectos visuales para que coincidan con el diseño de tu página.
  7. Guarda los cambios: Una vez que estés satisfecho con la lista, asegúrate de guardar tus cambios en Elementor.
  8. Visualiza y publica la página: Antes de publicar la página, es recomendable previsualizarla para asegurarte de que la lista se vea como esperabas. Una vez que estés contento con el resultado, puedes publicar la página para que los visitantes de tu sitio web puedan verla.

Siguiendo estos pasos, podrás crear fácilmente listas HTML en WordPress utilizando Elementor, sin necesidad de escribir código.

Ten en cuenta que los pasos puede sutilmente varias según la actualización que te encuentres del plugin Elementor.

PREGUNTAS FRECUENTES Y RESUMEN

Las listas HTML se utilizan para agrupar elementos relacionados. Pueden ser ordenadas (<ol>) para elementos con un orden específico, o desordenadas (<ul>) para elementos sin orden específico.

Los tipos principales de listas HTML son: listas ordenadas (<ol>), listas desordenadas (<ul>), y listas de definición (<dl>) para pares de términos y descripciones.

Para crear una lista HTML, usa las etiquetas <ul> para una lista desordenada, <ol> para una lista ordenada, y coloca elementos de lista (<li>) dentro de estas etiquetas.

Los atributos comunes incluyen type para cambiar el estilo de los números o viñetas en listas ordenadas y desordenadas, y start para establecer el número inicial en listas ordenadas.

Las listas HTML se pueden anidar colocando una lista (<ul> o <ol>) dentro de un elemento de lista (<li>) de otra lista.

Para listas HTML accesibles, usa etiquetas <ul> y <ol> correctamente, proporciona descripciones claras, y asegúrate de que las listas sean fácilmente navegables con teclados y lectores de pantalla.

Para solucionar problemas con listas HTML, verifica que las etiquetas estén correctamente anidadas, revisa el CSS que pueda estar afectando la visualización, y asegúrate de que no haya elementos bloqueados por scripts.

ARTÍCULOS RELACIONADOS

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *