Tema 8 · Estilos y Citas

Enlaces e Hipervínculos (<a>)

Aprende a conectar la web: enlaces externos con target="_blank", navegación interna por anclas (#id), enlaces a correo (mailto:) y números telefónicos.

Inclusión de CSS y Colores Web Imágenes, Figuras y Favicon

La Esencia de la Web: El Elemento <a>

El elemento de ancla <a> (Anchor) define un hipervínculo que enlaza una página con otra, un archivo, una dirección de correo o una sección interna del mismo documento. El atributo indispensable es href (Hypertext Reference): 

<a href="https://kilopolis.com">Visitar Kilopolis</a>

El Atributo target: ¿Dónde se abre el enlace?

Valor Comportamiento
_self Valor por defecto. Abre el enlace en la misma pestaña o ventana en la que se encuentra el usuario.
_blank Abre el enlace en una nueva pestaña o ventana del navegador.
_parent / _top Utilizados cuando se trabaja dentro de un marco <iframe> para romper el contenedor y abrir en la ventana principal.
🔒 Buena práctica de seguridad: Al usar target="_blank", se recomienda siempre agregar rel="noopener noreferrer" para evitar que la nueva pestaña acceda al objeto window.opener de tu página (previniendo ataques de tipo reverse tabnabbing).

Enlaces a Secciones Internas (Marcadores / Anclas)

Puedes crear enlaces que desplacen la pantalla automáticamente hacia un punto específico de tu página vinculando el href con el id de cualquier elemento: 

<!-- Enlace superior -->
<a href="#preguntas-frecuentes">Saltar a Preguntas Frecuentes</a>

<!-- Destino en cualquier parte del documento -->
<h2 id="preguntas-frecuentes">Preguntas Frecuentes</h2>

Enlaces Especiales: Correos, Teléfonos y Descargas

  • mailto:: Abre el cliente de correo predeterminado del usuario (ej: href="mailto:[email protected]?subject=Consulta").
  • tel:: Abre la app de llamadas en dispositivos móviles o VoIP (ej: href="tel:+573001234567").
  • download: Indica al navegador que descargue el archivo vinculado en lugar de abrirlo (ej: href="manual.pdf" download).

⚡ Hipervínculos, Anclas y Acciones Especiales

Prueba hacer clic en el enlace de ancla interna para deslizarte por la página, o en los botones de llamada y correo:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Enlaces en HTML5</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; line-height: 1.6; background: #f8fafc; }
    .card { background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px; max-width: 520px; margin-bottom: 20px; }
    .btn-link {
      display: inline-block;
      background: #0284c7;
      color: white;
      text-decoration: none;
      padding: 8px 16px;
      border-radius: 6px;
      font-weight: 600;
      margin-top: 10px;
    }
    .btn-link:hover { background: #0369a1; }
    .contacto-box { background: #f0fdf4; border: 1px solid #bbf7d0; padding: 15px; border-radius: 6px; }
  </style>
</head>
<body>

  <div class="card">
    <h2>Navegación con Enlaces</h2>
    <p>
      1. Enlace a nueva pestaña con seguridad:<br>
      <a href="https://kilopolis.com" target="_blank" rel="noopener noreferrer">
        Ir a Kilopolis.com (Nueva Pestaña) &raquo;
      </a>
    </p>

    <p>
      2. Salto a sección interna:<br>
      <a href="#bloque-contacto" class="btn-link">Ir directo al formulario &darr;</a>
    </p>
  </div>

  <div style="height: 150px; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-style: italic;">
    [ Espacio de contenido intermedio ]
  </div>

  <div id="bloque-contacto" class="card contacto-box">
    <h3>Sección de Contacto (Destino del Ancla)</h3>
    <p>¡Llegaste con éxito a través del enlace de ancla <code>#bloque-contacto</code>!</p>
    
    <p>
      📞 <a href="tel:+573001234567">Llamar a Soporte (+57 300 123 4567)</a><br>
      ✉️ <a href="mailto:[email protected]?subject=Duda%20HTML5">Enviar Correo Electrónico</a>
    </p>
  </div>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de HTML5 y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno HTML/CSS/BS5 Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.