El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En HTML, las listas son una forma fundamental de organizar y presentar información. Existen dos tipos principales de listas: ordenadas y desordenadas. En esta sección, aprenderás cómo crear y utilizar ambos tipos de listas, así como algunos atributos y estilos que puedes aplicar para personalizarlas.

Listas Desordenadas

Las listas desordenadas (<ul>) se utilizan para agrupar elementos relacionados sin un orden específico. Cada elemento de la lista se define con la etiqueta <li> (list item).

Sintaxis Básica

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

Ejemplo Práctico

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Ejemplo de Lista Desordenada</title>
</head>
<body>
  <h1>Lista de Tareas</h1>
  <ul>
    <li>Comprar leche</li>
    <li>Limpiar la casa</li>
    <li>Estudiar HTML</li>
  </ul>
</body>
</html>

Explicación

<ul>: Define una lista desordenada.
<li>: Define un elemento de la lista.

Listas Ordenadas

Las listas ordenadas (<ol>) se utilizan para agrupar elementos que tienen un orden específico. Al igual que en las listas desordenadas, cada elemento de la lista se define con la etiqueta <li>.

Sintaxis Básica

<ol>
  <li>Primer elemento</li>
  <li>Segundo elemento</li>
  <li>Tercer elemento</li>
</ol>

Ejemplo Práctico

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Ejemplo de Lista Ordenada</title>
</head>
<body>
  <h1>Pasos para Hacer una Taza de Té</h1>
  <ol>
    <li>Hervir agua</li>
    <li>Colocar la bolsita de té en la taza</li>
    <li>Verter el agua caliente en la taza</li>
    <li>Dejar reposar por 3-5 minutos</li>
    <li>Retirar la bolsita de té</li>
    <li>Disfrutar</li>
  </ol>
</body>
</html>

Explicación

<ol>: Define una lista ordenada.
<li>: Define un elemento de la lista.

Atributos y Personalización

Tipo de Marcador en Listas Desordenadas

Puedes cambiar el tipo de marcador en una lista desordenada utilizando el atributo type en la etiqueta <ul>.

<ul type="circle">
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ul>

Tipos de marcadores disponibles:

disc (por defecto)
circle
square

Tipo de Numeración en Listas Ordenadas

Puedes cambiar el tipo de numeración en una lista ordenada utilizando el atributo type en la etiqueta <ol>.

<ol type="A">
  <li>Primer elemento</li>
  <li>Segundo elemento</li>
  <li>Tercer elemento</li>
</ol>

Tipos de numeración disponibles:

1 (por defecto)
A (letras mayúsculas)
a (letras minúsculas)
I (números romanos en mayúsculas)
i (números romanos en minúsculas)

Listas Anidadas

Puedes anidar listas dentro de otras listas para crear estructuras más complejas.

<ul>
  <li>Frutas
    <ul>
      <li>Manzana</li>
      <li>Banana</li>
      <li>Naranja</li>
    </ul>
  </li>
  <li>Verduras
    <ul>
      <li>Zanahoria</li>
      <li>Brócoli</li>
      <li>Espinaca</li>
    </ul>
  </li>
</ul>

Ejercicios Prácticos

Ejercicio 1: Crear una Lista Desordenada

Crea una lista desordenada con los siguientes elementos: "HTML", "CSS", "JavaScript".

Solución

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Ejercicio 2: Crear una Lista Ordenada

Crea una lista ordenada que describa los pasos para preparar una ensalada: "Lavar las verduras", "Cortar las verduras", "Mezclar las verduras", "Añadir aderezo".

Solución

<ol>
  <li>Lavar las verduras</li>
  <li>Cortar las verduras</li>
  <li>Mezclar las verduras</li>
  <li>Añadir aderezo</li>
</ol>

Ejercicio 3: Listas Anidadas

Crea una lista desordenada con dos categorías: "Animales" y "Plantas". Bajo "Animales", añade "Perro", "Gato" y "Pájaro". Bajo "Plantas", añade "Rosa", "Tulipán" y "Girasol".

Solución

<ul>
  <li>Animales
    <ul>
      <li>Perro</li>
      <li>Gato</li>
      <li>Pájaro</li>
    </ul>
  </li>
  <li>Plantas
    <ul>
      <li>Rosa</li>
      <li>Tulipán</li>
      <li>Girasol</li>
    </ul>
  </li>
</ul>

Conclusión

En esta sección, has aprendido a crear y utilizar listas ordenadas y desordenadas en HTML. También has visto cómo personalizar el tipo de marcador y numeración, y cómo anidar listas para crear estructuras más complejas. Practica creando tus propias listas para familiarizarte con estos conceptos, ya que son fundamentales para organizar contenido en tus páginas web. En la próxima sección, exploraremos cómo trabajar con citas en bloque y texto preformateado.

Listas: Ordenadas y Desordenadas

Listas Desordenadas

Sintaxis Básica

Ejemplo Práctico

Explicación

Listas Ordenadas

Sintaxis Básica

Ejemplo Práctico

Explicación

Atributos y Personalización

Tipo de Marcador en Listas Desordenadas

Tipo de Numeración en Listas Ordenadas

Listas Anidadas

Ejercicios Prácticos

Ejercicio 1: Crear una Lista Desordenada

Solución

Ejercicio 2: Crear una Lista Ordenada

Solución

Ejercicio 3: Listas Anidadas

Solución

Conclusión

Curso de HTML

Módulo 1: Introducción a HTML

Módulo 2: Formateo de Texto en HTML

Módulo 3: Enlaces y Medios en HTML

Módulo 4: Tablas en HTML

Módulo 5: Formularios en HTML

Módulo 6: Elementos Semánticos de HTML5

Módulo 7: Técnicas Avanzadas de HTML

Módulo 8: Integración de HTML y CSS

Módulo 9: Diseño Web Responsivo

Módulo 10: Mejores Prácticas y Accesibilidad

Módulo 11: Proyecto: Construyendo un Sitio Web Completo