Etiqueta HTML <a>
La etiqueta <a> se utiliza para insertar hipervínculos a otras páginas, archivos, ubicaciones dentro de la misma página, direcciones de correo electrónico o cualquier otra URL. Puedes usar tanto texto como imágenes como hipervínculo.
En el navegador, los hipervínculos difieren en su apariencia y color. De forma predeterminada, los enlaces HTML aparecen como texto azul subrayado. Cuando pasas el cursor sobre un enlace, se vuelve rojo (enlace activo). Los enlaces que ya se han hecho clic (enlaces visitados) se vuelven morados.
Puedes cambiar el color de los enlaces, quitar el subrayado o cambiar el color de los enlaces usando estilos de CSS.
TIP
Los atributos "download", "media", "hreflang", "target", "rel" y "type" estarán presentes solo si el atributo "href" está presente.
TIP
Hasta que definas otro destino, una página enlazada se muestra en la ventana actual del navegador.
Sintaxis
La etiqueta <a> viene en pares. El contenido se escribe entre las etiquetas de apertura (<a>) y cierre (</a>).
Atributos
La etiqueta <a> puede tener atributos que proporcionan información adicional sobre ella.
El atributo href
Href es un atributo obligatorio de la etiqueta <a>. Define un enlace en la página web o un lugar en la misma página web, al que el usuario navega después de hacer clic en el enlace. El valor del atributo es un ancla o una URL. El ancla apunta al ID (identificador único) de la parte de la página web referenciada. Antes del ID colocamos una almohadilla (#).
Se ve así:
Etiqueta HTML <a>
<a href="url">the link text</a>
<a href="#a">the link text</a>Ejemplo de la etiqueta HTML <a> con el atributo href:
Ejemplo de la etiqueta HTML <a>|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3docs.com/">W3docs.com</a>
</body>
</html>Resultado
Haz clic en el enlace y serás redirigido a la página de inicio de nuestro sitio web.
Usando el atributo href de la etiqueta <a> con la etiqueta <img>, puedes crear una imagen enlazada.
Ejemplo de la etiqueta HTML <a> para crear una imagen enlazada:
Ejemplo de la etiqueta HTML <a> para crear una imagen enlazada:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
height: 90vh;
}
</style>
</head>
<body>
<a href="https://en.wikipedia.org/wiki/France">
<img src="https://images.unsplash.com/photo-1549144511-f099e773c147?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="France" />
</a>
</body>
</html>El atributo target
El atributo target se utiliza para indicarle al navegador dónde abrir el documento (de forma predeterminada, los enlaces se abren en la ventana actual).
El atributo target puede tener los siguientes valores:
- _blank– abre el enlace en una nueva ventana.
- _self-opens the link in a current window.
- _parent - abre el documento en el marco principal.
- _top - abre el documento a todo el ancho de la ventana.
Ejemplo de la etiqueta HTML <a> con el atributo target:
Ejemplo de la etiqueta HTML <a> con un atributo target|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3docs.com/" target="_blank">W3docs.com</a>
</body>
</html>Resultado
El atributo rel
Este atributo establece la relación del documento actual con el enlazado. Los valores del atributo pueden ser los siguientes:
- alternate - una versión alternativa del documento.
- author- referencia al autor del documento o artículo.
- bookmark - un enlace permanente para usar en marcadores.
- nofollow - enlaces a un documento no respaldado (esto indica a los motores de búsqueda que el rastreador no debe seguir ese enlace).
Valor nofollow
Si quieres crear un enlace nofollow, usa rel="nofollow". Esto informa a los motores de búsqueda que no respaldas el contenido al otro lado del enlace. El valor del atributo nofollow generalmente se usa en enlaces de pago y publicidad. A veces, el unfollow se considera una etiqueta o atributo, pero en realidad es un valor del atributo rel.
Ejemplo del atributo rel con el valor "nofollow":
Ejemplo del atributo "rel" con el valor "nofollow":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<p>This text is from <a href="https://www.lipsum.com/" rel="nofollow" target="_blank">Lorem Ipsum</a>.</p>
</body>
</html>Atributos
| Attribute | Value | Description |
|---|---|---|
| charset | char_encoding | Defines the character-set of a linked document. Not used in HTML5. |
| coords | coordinates | Defines the coordinates of a link. Not used in HTML5. |
| download | filename | Defines that the target will be downloaded when a hyperlink is clicked. |
| href | URL | Defines the URL of the linked document. |
| hreflang | language_code | Defines the language of the linked document. |
| media | media_query | Defines what media/device the linked document is optimized for. |
| name | section_name | Defines the name of an anchor. Not used in HTML5. |
| ping | list_of_URLs | Defines a space-separated list of URLs to which, when the link is followed, post requests with the body ping will be sent by the browser (in the background). Typically used for tracking. |
| rel | alternate author bookmark external help license next nofollow noreferrer noopener prev search tag | Defines the relationship between the target object and the linked document. |
| rev | text | Defines a reverse link, the inverse relationship of the "rel" attribute. Not used in HTML5. |
| shape | default rect circle poly | Defines the shape of the hyperlink. Not used in HTML5. |
| target | _blank _parent _self _top | Defines where to open the linked document. |
| type | media_type | Defines the media type in the form of a MIME- type for the linked URL. |
La etiqueta <a> también admite los atributos globales y los atributos de evento.
Cómo dar estilo a una etiqueta HTML <a>
{
"tag_name": "a"
}Práctica
What are the features and uses of the HTML <a> tag?