Aprender a estructurar contenido en HTML implica dominar etiquetas que van más allá de párrafos e imágenes. Las listas y enlaces en HTML son fundamentales para organizar información y conectar páginas, y aquí verás cómo usarlas con ejemplos claros que puedes replicar en tu propio proyecto.

Las listas te permiten agrupar elementos con o sin prioridad, mientras que los enlaces convierten texto en puertas hacia otros sitios, correos o llamadas telefónicas. Si estás iniciando con HTML, este recurso te ayuda a construir páginas más útiles y mejor estructuradas.

¿Cómo se crea una lista desordenada en HTML?

La etiqueta ul significa unordered list y se usa cuando los elementos no tienen un orden de prioridad [2:00]. Dentro de ella colocas etiquetas li (list item) por cada elemento.

Un caso típico es una lista del súper, donde no importa si compras primero la leche, el pan o las verduras:

html

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

Al renderizarla, cada ítem aparece con una viñeta (un puntito) que indica que pertenece a la lista, sin marcar prioridad.

¿Qué es una lista desordenada? Es una lista de elementos sin jerarquía, marcada con viñetas. Se usa con la etiqueta ul y cada elemento va dentro de un li.

¿Cuándo conviene usar una lista ordenada?

Usas la etiqueta ol (order list) cuando el orden sí importa, como en una receta o un instructivo [4:30]. Si los pasos se mezclan, el resultado cambia.

Un ejemplo claro es preparar café:

1. Hervir agua.
2. Agregar café.
3. Servir en taza.

Si inviertes el orden y sirves antes de hervir, no obtienes el mismo resultado. Por eso ol numera automáticamente cada li.

¿Cómo cambiar la numeración de una lista ordenada?

Puedes modificar el tipo de marcador con el atributo type. Estas son las opciones más comunes:

• type="I" para números romanos en mayúscula.
• type="i" para números romanos en minúscula.
• type="A" o type="a" para orden alfabético en mayúscula o minúscula.

El atributo start también es útil cuando partes una lista en dos. Si la primera termina en 3 y quieres que la segunda continúe en 4, escribes <ol start="4"> y la numeración respeta esa continuidad [7:50].

¿Cómo funcionan los enlaces con la etiqueta a en HTML?

La etiqueta a viene de ancla y se usa para crear enlaces. Necesita el atributo href, que indica el destino al que llevará el clic [9:30].

html <a href="https://platzi.com">Platzi</a>

El navegador renderiza el texto con un color distinto y subrayado, y al pasar el mouse aparece la manita que confirma que es un elemento interactivo.

¿Cómo abrir un enlace en una pestaña nueva?

Agregas el atributo target="_blank" a la etiqueta a. Así el enlace se abre en una página independiente y la actual permanece intacta para seguir navegando [11:00].

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

¿Para qué sirve target="_blank"? Hace que el enlace abra en una pestaña nueva del navegador, dejando la página original abierta.

¿Qué otros tipos de enlaces puedes crear con la etiqueta a?

Más allá de redirigir a otro sitio, la etiqueta a permite acciones interactivas con el correo y el teléfono del usuario.

¿Cómo crear un enlace que abra el correo electrónico?

Usas mailto: dentro del href seguido de la dirección. Puedes precargar el asunto con subject y el cuerpo con body [12:30]:

html <a href="mailto:info@ejemplo.com?subject=Consulta&body=Hola">Enviar email</a>

Al dar clic, se abre el cliente de correo del usuario con todo listo para enviar, sin necesidad de copiar y pegar la dirección.

¿Cómo crear un enlace que marque un teléfono?

Con tel: seguido del número, el enlace permite llamar directamente desde un celular o iniciar una videollamada en escritorio [14:00]:

html <a href="tel:+3412345678">Llamar +34 1234 5678</a>

Esto es especialmente útil en sitios de restaurantes, servicios o contacto, donde el usuario espera marcar con un solo toque.

¿Qué hace mailto y tel en un href? mailto: abre el cliente de correo con destinatario predefinido y tel: inicia una llamada al número indicado.

Prueba combinar listas y enlaces dentro de tu propio index.html y cuéntame en los comentarios qué estructura estás armando para tu primer proyecto.