La etiqueta A

Define un hipervinculo, el cual es usado para desplazarse de una página a otra. El atributo href es fundamental para indicar el enlace destino.

La etiqueta <a> (anchor) es fundamental para crear hipervínculos en HTML, permitiendo la navegación entre páginas web y recursos.

Sintaxis básica

<a href="URL">Texto del enlace</a>

href: Atributo obligatorio que especifica la dirección de destino, al omitirlo, solo es un marcador de posición para un hipervínculo.

Tipos de enlaces

Enlace externo

<a href="https://www.ejemplo.com">Visitar Ejemplo.com</a>

Enlace interno

 <a href="contacto.html">Página de contacto</a>

Enlace a una sección en la misma página

<!-- Destino -->
<h2 id="seccion1">Sección 1</h2>

<!-- Enlace -->
<a href="#seccion1">Ir a Sección 1</a>

Enlace a un correo electrónico

<a href="mailto:correo@ejemplo.com">Enviar correo</a>

Enlace a número telefónico

<a href="tel:+123456789">Llamar ahora</a>

Atributos

La etiqueta <a> soporta todos los atributos globales.

Atributo Valor Descripción
download filename Especifica que el valor del destino se descargará cuando un usuario haga clic en el hipervínculo.
href URL Especifica la URL de la página a la que va el enlace.
hreflang language_code Especifica el idioma del documento vinculado.
media media_query Especifica para qué medio/dispositivo está optimizado el documento vinculado
ping list_of_URLs Especifica una lista separada por espacios de direcciones URL a las que, cuando se sigue el enlace, el navegador enviará solicitudes de publicación con el cuerpo ping (en segundo plano). Se utiliza normalmente para realizar un seguimiento.
referrerpolicy no-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
same-origin
strict-origin-when-cross-origin
unsafe-url		 Especifica qué información de referencia se debe enviar con el enlace.
rel alternate
author
bookmark
external
help
license
next
nofollow
noreferrer
noopener
prev
search
tag		 Especifica la relación entre el documento actual y el documento vinculado.
target _blank
_parent
_self
_top		 Especifica dónde abrir el documento vinculado.
type media_type Especifica el tipo de medio del documento vinculado.

Atributos importantes

target

Controla dónde se abre el enlace:

<a href="https://ejemplo.com" target="_blank">Abrir en nueva pestaña</a>

Valores comunes:

  • _blank (nueva pestaña).
  • _self (misma pestaña).

rel

Define la relación entre documentos:

<a href="https://sitio-externo.com" rel="nofollow noopener">Enlace externo</a>

  • noopener: Previene ataques de tipo window.opener.

  • nofollow: Indica a los motores de búsqueda que no sigan el enlace.

download

Forza la descarga de un archivo:

<a href="manual.pdf" download>Descargar PDF</a>

Navegadores Web

Por defecto, los navegadores web muestran los enlaces de la siguiente manera:

  • Todos los enlaces: el texto es subrayado.
  • Enlace sin visitar: con una sublinea y en color azul.
  • Enlace ya visitado: en color morado.
  • Enlace activo: en color rojo.

Estilización con CSS

/* Estilos básicos */
a {
  color: blue;
  text-decoration: none;
}

/* Estados del enlace */
a:visited { color: purple; }
a:hover { text-decoration: underline; }
a:active { color: red; }

Accesibilidad

Texto descriptivo: Evita "clic aquí".

<!-- Incorrecto -->
<a href="documento.pdf">Clic aquí</a>

<!-- Correcto -->
<a href="documento.pdf">Descargar manual de usuario (PDF, 2MB)</a>

Enlaces ARIA: Para contextos complejos:

<a href="#" aria-label="Leer más sobre accesibilidad web">Leer más</a>

Motores de Búsqueda SEO

Mejores Prácticas

  1. Usa URLs amigables:

    • Mal: pagina.html?id=123

    • Bien: productos/zapatos-deportivos

  2. Texto de anclaje relevante:

    • Evita: <a href="productos.html">Haz clic</a>

    • Usa: <a href="productos.html">Ver catálogo de productos</a>

 Errores comunes

Errores comunes

Enlaces rotos:

<!-- Error: Ruta incorrecta -->
<a href="contacto.htm">Contacto</a> <!-- Extensión incorrecta (.htm vs .html) -->

Olvidar protocolos en URLs externas:

<!-- Error -->
<a href="www.ejemplo.com">Enlace</a>

<!-- Correcto -->
<a href="https://www.ejemplo.com">Enlace</a>

Ejemplo completo

<!DOCTYPE html>
<html>
<head>
    <title>Ejemplo de Enlaces</title>
    <style>
        a { color: #2c3e50; }
        a:hover { color: #e74c3c; }
    </style>
</head>
<body>
    <nav>
        <a href="#inicio" id="inicio">Inicio</a>
        <a href="nosotros.html" target="_self">Nosotros</a>
        <a href="https://twitter.com/ejemplo" 
           target="_blank" 
           rel="noopener noreferrer">
            Síguenos en Twitter
        </a>
    </nav>
    
    <section style="height: 1200px;">
        <h2 id="contacto">Contacto</h2>
        <a href="mailto:info@ejemplo.com"> Contactar por correo</a>
    </section>
    
    <a href="#inicio">Volver al inicio</a>
</body>
</html>

Otros Ejemplos

Como usuar una imagen como enlace:

<a href="https://www.exasoluciones.com">
   <img border="0" alt="W3Schools" src="imagen.gif" width="100" height="100">
</a>

Como enlace a JavaScript:

<a href="javascript:alert('¡Hola Mundo!');">Ejecuta un JavaScript</a>