Atributo href del HTML <a>

Etiqueta HTML <a>

Definición y uso

href La propiedad especifica la URL de la página a la que apunta el vínculo.

href El valor de la propiedad puede ser cualquier URL relativa o absoluta de un documento válido, incluyendo identificadores de fragmento y segmentos de código JavaScript. Si el usuario selecciona el contenido del etiqueta <a>, el navegador intentará recuperar y mostrar href La propiedad especifica la URL del documento que representa o la lista de expresiones JavaScript, métodos y funciones que se ejecutarán.

Si href Si no existe la propiedad, el etiqueta <a> no será un vínculo.

Consejo:¡Puede usar href="#top" o href="#" para enlazar al inicio de la página actual!

Crear vínculos de texto

Un enlace simple <a> que se refiere a otros documentos puede ser del siguiente formato:

<a href="http://www.codew3c.com/index.html">CodeW3C.com En línea Tutoriales</a>

El navegador muestra el frase "CodeW3C.com Tutoriales en Línea" con efectos especiales (generalmente texto azul subrayado), de modo que el usuario sepa que es un enlace que se puede enlazar a otro documento. Al igual que así:

CodeW3C.com Enseñanza en Línea

Los usuarios también pueden utilizar las opciones del navegador para especificar ellos mismos el color del texto, y establecer el color del texto del enlace antes y después del enlace.

Consejo:Se puede usar Pseudoclases CSSAñadir estilos complejos y variados a los enlaces de texto.

Crear enlaces de imagen

Los enlaces anclados más complejos pueden incluso contener imágenes. A continuación se muestra un LOGO que es un enlace de imagen, al hacer clic en la imagen, se puede regresar a la página principal de W3school:

<a href="http://www.codew3c.com/index.html">
<img src="/i/codew3c_logo_white.gif" />
</a>

El código anterior añadirá un enlace de retorno a la página principal para el LOGO de CodeW3C.com:

CodeW3C.com Enseñanza en Línea

La mayoría de los navegadores gráficos colocan un borde especial alrededor de la imagen como parte del ancla. Al poner la imagen en el etiqueta <img> con el atributo propiedad borderEstablecer en 0 puede eliminar el borde de los enlaces hipertexto. También se puede usar Atributos de borde de CSSpara cambiar globalmente el estilo del borde del elemento.

Ejemplo

Ejemplo 1

La propiedad href especifica el destino del enlace:

<a href="https://www.codew3c.com">Visitar CodeW3C.com</a>

Prueba personalmente

Ejemplo 2

¿Cómo usar una imagen como enlace?:

<a href="https://www.codew3c.com">
<img border="0" alt="W3School" src="/i/logo/w3logo.png" width="400" height="225">
</a>

Prueba personalmente

Ejemplo 3

¿Cómo enlazar a una dirección de correo electrónico?:

<a href="mailto:someone@example.com">Enviar correo electrónico</a>

Prueba personalmente

Ejemplo 4

¿Cómo enlazar a un número de teléfono?:

<a href="tel:+8613888888888">+86 138 8888 8888</a>

Prueba personalmente

Ejemplo 5

¿Cómo enlazar a otra sección de la misma página?:

<a href="#section2">Ir al Capítulo 2</a>

Prueba personalmente

Ejemplo 6

¿Cómo enlazar a JavaScript?:

<a href="javascript:alert('Hello World!');">Ejecutar JavaScript</a>

Prueba personalmente

Sintaxis

<a href="URL">

Valor del atributo

Valor Descripción
URL

URL del enlace.

Valores posibles:

  • URL absoluta - apunta a otro sitio web (por ejemplo, href="http://www.example.com/index.html")
  • URL relativa - apunta a un archivo dentro del sitio web (por ejemplo, href="index.html")
  • Enlace a un elemento con un id específico en la página (por ejemplo, href="#section2")
  • Otros protocolos (por ejemplo, https://, ftp://, mailto:, file: y otros)
  • Script (por ejemplo, href="javascript:alert('Hello');")

Compatibilidad del navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte

Etiqueta HTML <a>