HTML
Tutorial HTML: Listas (ul, ol, li)
HTML listas: creación y uso. Domina la creación y uso de listas en HTML con ejemplos prácticos y detallados.
Las listas en HTML son un recurso muy útil que permite agrupar y organizar información de manera ordenada o desordenada. Esto es muy útil para mostrar un conjunto de datos relacionados, como una lista de productos, tareas, categorías, etc.
Hay tres tipos principales de listas en HTML:
Lista desordenada (ul): Esta es una lista en la que el orden de los elementos no es importante. Cada elemento de la lista se marca con un punto, un círculo o un cuadrado, pero esto se puede cambiar con CSS.
Lista ordenada (ol): En este tipo de lista, el orden de los elementos es importante. Los elementos de la lista se marcan con números o letras, aunque esto también se puede cambiar con CSS.
Lista de definición (dl): Esta es una lista especializada utilizada para definir términos y descripciones. Pero, para esta explicación, nos centraremos en las listas desordenadas y ordenadas.
Para crear una lista en HTML, necesitarás usar etiquetas de apertura y cierre. Para una lista desordenada, utilizas las etiquetas <ul>
y </ul>
. Para una lista ordenada, utilizas las etiquetas <ol>
y </ol>
. Cada elemento de la lista se coloca entre las etiquetas <li>
y </li>
.
Por ejemplo, una lista desordenada en HTML podría verse así:
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
Y una lista ordenada en HTML podría verse así:
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>
En ambos casos, cada línea que comienza con <li>
y termina con </li>
es un elemento de la lista.
También es posible anidar listas dentro de listas. Esto significa que puedes tener listas dentro de otras listas. Para hacer esto, simplemente debes crear una nueva lista dentro de un elemento de lista (<li>
).
Por ejemplo, una lista anidada podría verse así:
<ul>
<li>Elemento 1</li>
<li>Elemento 2
<ul>
<li>Sub-elemento 2.1</li>
<li>Sub-elemento 2.2</li>
</ul>
</li>
<li>Elemento 3</li>
</ul>
En este ejemplo, la lista que comienza con "Elemento 2" tiene su propia sublista, que contiene "Sub-elemento 2.1" y "Sub-elemento 2.2".
En resumen, las listas en HTML son una manera útil y flexible de organizar la información en tu página web. Pueden ser simples o complejas, dependiendo de tus necesidades, y te proporcionan una gran cantidad de control sobre cómo se presenta tu contenido.
Ejercicios de esta lección Listas (ul, ol, li)
Evalúa tus conocimientos de esta lección Listas (ul, ol, li) con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.
Audio
Tablas
Formularios (form, input, select, textarea, button)
Tablas (table, tr, td, th)
Enlace
Video
Imágenes
Contraste y legibilidad
DOCTYPE
Atributos de elementos
Introducción a HTML
Metadatos
Imágenes vectoriales
Anidación de etiquetas
Encabezados
Compatibilidad con navegadores
Validación de HTML
Optimización de la carga de la página (Lazy loading)
Atributos de ARIA
Listas
Página web completa con Bootstrap
Párrafos
Uso de DOCTYPE
Etiquetas semánticas (article, section, header, footer, nav, aside)
Navegación por teclado
Etiquetas semánticas
Listas (ul, ol, li)
Estilos
Divisiones
Uso de atributos
Atributos
Comentarios
Incrustación de contenido (iframe)
Uso de elementos y etiquetas
Elementos y etiquetas
Formularios
Todas las lecciones de HTML
Accede a todas las lecciones de HTML y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.
Introducción A Html
Introducción Y Entorno
Doctype
Sintaxis Y Estructura
Elementos Y Etiquetas
Sintaxis Y Estructura
Atributos
Sintaxis Y Estructura
Anidación De Etiquetas
Sintaxis Y Estructura
Comentarios
Sintaxis Y Estructura
Encabezados (H1-h6)
Textos Y Enlaces
Enlace (A)
Textos Y Enlaces
Párrafo (P)
Textos Y Enlaces
Listas (Ul, Ol, Li)
Textos Y Enlaces
Imagen (Img)
Textos Y Enlaces
División (Div)
Estructura De Página
Etiquetas Semánticas (Article, Section, Header, Footer, Nav, Aside)
Estructura De Página
Tablas (Table, Tr, Td, Th)
Estructura De Página
Formularios (Form, Input, Select, Textarea, Button)
Estructura De Página
Imágenes Vectoriales (Svg)
Elementos Multimedia
Incrustación De Contenido (Iframe)
Elementos Multimedia
Audio (Audio)
Elementos Multimedia
Video (Video)
Elementos Multimedia
Estilo Incorporado (Style)
Metadatos Y Estilización Incorporada
Metadatos (Meta, Title, Link)
Metadatos Y Estilización Incorporada
Atributos De Aria
Metadatos Y Estilización Incorporada
Navegación Por Teclado
Metadatos Y Estilización Incorporada
Contraste Y Legibilidad
Características Avanzadas Y Optimización
Validación De Html
Características Avanzadas Y Optimización
Compatibilidad Con Navegadores
Características Avanzadas Y Optimización
Optimización De La Carga De La Página (Lazy Loading)
Características Avanzadas Y Optimización
Certificados de superación de HTML
Supera todos los ejercicios de programación del curso de HTML y obtén certificados de superación para mejorar tu currículum y tu empleabilidad.
En esta lección
Objetivos de aprendizaje de esta lección
- Comprender los tres tipos principales de listas en HTML: desordenadas (ul), ordenadas (ol) y de definición (dl).
- Aprender a crear listas en HTML utilizando las etiquetas ul, ol y li.
- Saber cómo anidar listas para organizar información de forma jerárquica.
- Entender la importancia de utilizar listas para una presentación ordenada y estructurada del contenido en páginas web.
- Familiarizarse con el uso de CSS para personalizar el estilo de las listas y adaptarlas al diseño deseado.