Creación de listas desordenadas, ordenadas y enlaces en HTML

Aprende a estructurar contenido con listas HTML y a conectar páginas y acciones con enlaces. Verás cómo usar UL, OL y LI para organizar información, y cómo trabajar con A, href, target, mailto y tel para crear experiencias útiles y claras. Todo con ejemplos prácticos y listos para el navegador.

¿Qué son las listas en HTML y cuándo usarlas?

Las listas permiten organizar elementos relacionados. Con listas desordenadas presentas ítems sin prioridad. Con listas ordenadas defines un orden de pasos que sí importa. Así, eliges la estructura correcta según el objetivo: compras sin orden o instrucciones con secuencia.

¿Cómo crear una lista desordenada con ul y li?

• Usa UL para una lista sin prioridad.
• Añade cada elemento con LI.
• El navegador muestra viñetas automáticamente.

<ul>
  <li>Leche</li>
  <li>Pan</li>
  <li>Verduras</li>
</ul>

Claves: UL (unordered list) y LI (list item). Son ideales cuando el orden no afecta el resultado.

¿Cómo crear una lista ordenada con ol y li?

• Usa OL cuando el orden sí influye.
• Cada LI se numera automáticamente.

<ol>
  <li>Hervir agua</li>
  <li>Agregar café</li>
  <li>Servir en taza</li>
</ol>

La prioridad la marca el número. Cambiar el orden cambia el resultado.

¿Por qué importar el orden según el caso?

• Compras: el orden no importa, usa UL.
• Recetas o pasos: el orden importa, usa OL.
• La elección correcta mejora claridad y experiencia.

¿Cómo personalizar listas con type y start?

HTML permite ajustar la apariencia y la continuidad de listas ordenadas. Así comunicas mejor la prioridad y mantienes coherencia cuando hay contenido intermedio.

¿Cómo usar números romanos o letras con type?

• En OL, el atributo type cambia el estilo de numeración.
• Opciones: números romanos en mayúscula o minúscula, letras alfabéticas y números.

<ol type="I">
  <li>Paso uno</li>
  <li>Paso dos</li>
</ol>

<ol type="a">
  <li>Opción A</li>
  <li>Opción B</li>
</ol>

Resultado: I, II, III… o a, b, c… según el caso.

¿Cómo continuar numeración con start?

• Cada OL comienza en 1 por defecto.
• Para continuar después de una lista previa separada por contenido, usa start.

<ol>
  <li>Texto</li>
  <li>Imágenes</li>
  <li>Multimedia</li>
</ol>

<p>Contenido intermedio…</p>

<ol start="4">
  <li>Accesibilidad</li>
  <li>SEO</li>
  <li>Despliegue</li>
</ol>

Beneficio: mantienes la secuencia 1–6 aunque haya bloques intermedios.

¿Cómo crear enlaces en HTML con a, href y target?

Un enlace se define con A y el destino con href. El texto entre apertura y cierre es el que verá la persona. El navegador lo muestra con subrayado, color y cursor de mano para indicar que es interactivo.

¿Cómo abrir en nueva pestaña con target?

• target controla dónde se abre el enlace.
• Usa target="_blank" para abrir en otra pestaña y conservar la actual.

<a href="https://platzi.com" target="_blank">platzi</a>

Útil cuando no quieres perder el contexto de navegación.

¿Cómo enviar emails con mailto?

• Con mailto: abres el cliente de correo con datos prellenados.
• Puedes definir subject y body.

<a href="mailto:info@ejemplo.com?subject=consulta&body=hola">enviar email</a>

Ventaja: facilita contactar sin copiar y pegar direcciones.

¿Cómo llamar con tel?

• Con tel: inicias una llamada desde móviles o apps compatibles.

<a href="tel:3412345678">Llamar +34 12345678</a>

En móvil, abre el marcador y completa el número automáticamente.

¿Tienes dudas o ejemplos que quieras probar con UL, OL, LI o A? Comenta qué estructura necesitas y lo afinamos juntos.