Ejercicio práctico 3: Implementar párrafos y enlaces
En este ejercicio práctico de HTML aprenderás a implementar correctamente párrafos y enlaces, utilizando las etiquetas <p> para estructurar el texto y etiquetas <a> para vincular contenido de forma efectiva.
Párrafos y Enlaces
Actividad
Crea un documento HTML con varios párrafos <p> y enlaces <a> que apunten a diferentes sitios web.
Solución interactiva
Solución con el código HTML completo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Párrafos y Enlaces</title>
</head>
<body>
<p>
Este es un párrafo.
<a href="https://www.google.com" target="_blank">Google</a>
</p>
<p>
Otro párrafo con un
<a href="https://www.bing.com" target="_blank">enlace a Bing</a>
</p>
</body>
</html>
Variantes del mismo ejercicio
Variante 1: Enlaces internos con anclaje (#id)
Además de enlazar a otros sitios, podés crear navegación interna dentro de la misma página usando identificadores.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Enlaces Internos</title>
</head>
<body>
<h1>Guía de HTML</h1>
<!-- Menú de navegación interno -->
<nav>
<a href="#introduccion">Ir a Introducción</a> |
<a href="#etiquetas">Ir a Etiquetas</a> |
<a href="#conclusion">Ir a Conclusión</a>
</nav>
<h2 id="introduccion">Introducción</h2>
<p>HTML es el lenguaje de marcado que da estructura a todas las páginas web.</p>
<h2 id="etiquetas">Etiquetas Básicas</h2>
<p>Las etiquetas `<p>`, `<a>` y `<h1>` son las más utilizadas en HTML.</p>
<h2 id="conclusion">Conclusión</h2>
<p>Dominar HTML es el primer paso para convertirte en desarrollador web.</p>
</body>
</html>
El id en el elemento destino y el href="#id" en el enlace crean la navegación interna. Al hacer clic, el navegador desplaza la página hasta la sección correspondiente.
Variante 2: Enlaces mailto: y tel:
HTML permite crear enlaces especiales que abren el cliente de correo o inician una llamada telefónica.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Contacto</title>
</head>
<body>
<h1>Contactanos</h1>
<p>
Enviá un correo a:
<a href="mailto:info@misitio.com">info@misitio.com</a>
</p>
<p>
Llamanos al:
<a href="tel:+541112345678">+54 11 1234-5678</a>
</p>
<p>
Enviá un correo con asunto predefinido:
<a href="mailto:info@misitio.com?subject=Consulta%20sobre%20servicios">
Consultar servicios
</a>
</p>
</body>
</html>
mailto:: abre el cliente de correo predeterminado con la dirección configurada.tel:: inicia una llamada en dispositivos móviles (en desktop pide permiso para usar una app).- Podés agregar
?subject=,?body=,?cc=y?bcc=para precompletar campos.
Variante 3: Seguridad con target="_blank"
Cuando abrís un enlace en una pestaña nueva, es importante agregar atributos de seguridad.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Enlaces Seguros</title>
</head>
<body>
<h1>Enlaces con Buenas Prácticas</h1>
<!-- ❌ INSEGURO: no uses target="_blank" solo -->
<p>
Enlace inseguro:
<a href="https://sitio-externo.com" target="_blank">Sitio Externo</a>
</p>
<!-- ✓ SEGURO: con rel="noopener noreferrer" -->
<p>
Enlace seguro:
<a href="https://sitio-externo.com" target="_blank" rel="noopener noreferrer">
Sitio Externo Seguro
</a>
</p>
</body>
</html>
¿Por qué? Sin rel="noopener", la página externa puede acceder a window.opener y redirigir tu página original (ataque de tabnabbing). Con noreferrer, además no se envía la URL de tu página al sitio destino.
Variante 4: Saltos de línea, líneas horizontales y texto preformateado
Además de los párrafos, HTML tiene otras etiquetas para formatear texto.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Formato de Texto</title>
</head>
<body>
<h1>Etiquetas de Formato Adicional</h1>
<p>
Este párrafo tiene un<br />
salto de línea en el medio.
</p>
<hr />
<p>La línea horizontal de arriba separa secciones de contenido.</p>
<pre>
function saludar() {
console.log("¡Hola Mundo!");
return true;
}
</pre>
<p>
La etiqueta `<pre>` respeta los saltos de línea y
espacios, ideal para mostrar código.
</p>
</body>
</html>
Mini-desafío: Ponelo a prueba
Creá una página HTML llamada "Contacto y Referencias" que incluya:
- Un
<h1>con el título de la página - Dos párrafos
<p>con texto descriptivo - Un enlace a un sitio externo con
target="_blank"yrel="noopener noreferrer" - Un enlace
mailto:con asunto predefinido - Una barra de navegación con 2 enlaces internos (
#seccion1y#seccion2) - Un
<hr>que separe el encabezado del contenido principal
Intentá armarlo completo sin mirar los ejemplos anteriores. Si te trabás, volvé a la variante que necesites.
Errores comunes con párrafos y enlaces
| Error | Por qué es un problema |
|---|---|
No cerrar <p> correctamente | El navegador puede agrupar mal el contenido. Aunque HTML5 es permisivo, siempre cerrá las etiquetas |
Usar target="_blank" sin rel="noopener noreferrer" | Vulnerabilidad de seguridad: la página externa puede manipular tu sitio |
Olvidar https:// en los enlaces externos | El navegador interpreta el link como una ruta relativa y no va al sitio correcto |
No usar id en los destinos de anclaje | El enlace #seccion no encuentra el destino y no hace nada al hacer clic |
| Poner párrafos vacíos para generar espacio | Usá CSS (margin, padding) o <br>; los párrafos vacíos ensucian el HTML semántico |
Preguntas frecuentes
¿target="_blank" es malo para SEO?
No es malo en sí mismo, pero tiene dos riesgos: seguridad (tabnabbing) y experiencia de usuario (demasiadas pestañas nuevas frustran al usuario). Para enlaces externos en contenido, target="_blank" + rel="noopener noreferrer" es aceptable. Para navegación principal, preferí abrir en la misma pestaña.
¿Qué diferencia hay entre mailto: y un formulario de contacto?
mailto: es más simple pero menos confiable: depende de que el usuario tenga configurado un cliente de correo. Mucha gente usa webmail (Gmail en el navegador) y mailto: no funciona. Un formulario de contacto con backend es la solución profesional, pero mailto: sirve para sitios simples o páginas de práctica.
¿Ya sabés crear párrafos y enlaces? Generá una página web con DivZone AI que tenga navegación entre secciones. Vas a ver cómo el código generado usa etiquetas <p> y <a> para estructurar el contenido. ¡Aprendé viendo código real!
🔎 Explorá todos los detalles en esta sección 👉 Elementos fundamentales en HTML.