Enlaces HTML
Los enlaces navegan a otras páginas o a una parte de la página. Aprende a crear enlaces HTML con la etiqueta <a>: href, URLs absolutas vs relativas y destinos.
Los sitios web contienen diferentes tipos de enlaces que te llevan directamente a otras páginas o te permiten navegar a una parte específica de la página. Los enlaces en HTML se llaman hipervínculos. Se definen usando la etiqueta <a>.
Los hipervínculos se aplican a una frase, una palabra, una imagen o cualquier elemento HTML.
El color predeterminado de los enlaces en HTML es:
- enlaces no visitados: subrayados y azules
- enlaces visitados: subrayados y morados
- enlaces activos: subrayados y rojos
Este es el estilo predeterminado de los enlaces, pero puedes eliminar el subrayado o cambiar el color de los enlaces usando estilos CSS.
Sintaxis
La etiqueta <a> viene en pares: la apertura <a> indica dónde debe comenzar el enlace y el cierre </a> indica dónde termina el enlace.
Para crear un hipervínculo, debes usar la etiqueta <a> y el atributo href, cuyo valor es la URL o ubicación a la que apunta el enlace.
Enlaces HTML
<a href="url">your text</a>.Ejemplo de la etiqueta HTML <a> con el atributo href:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Link example</h2>
<a href="https://www.w3docs.com/">W3Docs.com</a>
</body>
</html>En el ejemplo anterior, usamos <h2> para definir un subtítulo y la etiqueta <a> para crear un enlace. Entre las etiquetas <a> y </a> tenemos el texto W3Docs.com, que el navegador representa como un enlace azul subrayado. Al hacer clic en él, el usuario es redirigido a la página de inicio de nuestro sitio web.
Atributo Target
Para abrir un enlace en una nueva página, debes agregar target="_blank" a tu código. El atributo target especifica exactamente dónde abrir la página enlazada. Con target="_blank", la página enlazada se abrirá en una nueva ventana o en una nueva pestaña.
Los valores más comunes para target son:
_self— abrir en la misma pestaña (este es el valor predeterminado, por lo que rara vez se escribe)._blank— abrir en una nueva pestaña o ventana.
Enlaces HTML
<a href="https://www.w3docs.com/" target="_blank" rel="noopener noreferrer">W3Docs.com</a>Por qué importa rel="noopener noreferrer"
Fíjate en el rel="noopener noreferrer" del enlace anterior. Cuando abres un enlace con target="_blank", la nueva página normalmente puede acceder a la página que la abrió a través de la propiedad window.opener. Una página maliciosa podría usar esto para redirigir silenciosamente tu pestaña original a una página de phishing — un ataque llamado reverse tabnabbing.
Agregar rel="noopener" elimina esa referencia, de modo que la nueva página no puede tocar tu pestaña. noreferrer hace lo mismo y además evita que el navegador envíe el encabezado Referer a la nueva página. Como regla general, siempre agrega rel="noopener noreferrer" cuando enlaces a un sitio externo con target="_blank".
Atributo ID
Para navegar a una parte específica de la página, usa el atributo id.
Así es como debes hacerlo:
-
Usa el atributo
idpara darle un nombre a la parte de la página a la que el usuario debe ser redirigido después de hacer clic en el enlace. El valor del atributo puede ser una palabra o una frase que describa esa parte (si usas una frase, no debe haber espacios — usa guiones bajos en su lugar).
Ej.<h2 id="jump">Link example with id attribute</h2>. Usamos el atributoidllamado "jump". -
Crea un hipervínculo usando el
iddel destino del enlace, precedido por un símbolo de almohadilla (#).
Ej.<a href="#jump">When you click on this link, you will be redirected to the part of the page with "jump" id</a>.
Ahora veamos cómo se verá esto en código HTML. En el ejemplo a continuación, desplázate hasta el enlace en la parte inferior, haz clic en él y volverás de nuevo al inicio.
Ejemplo de la etiqueta HTML <a> con el atributo id:
Ejemplo del enlace con un atributo id
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2 id="jump">Link example with id attribute</h2>
<p>
Here can be any part of the page you want to the user to end up clicking on hyperlink. We use attribute id called “jump”.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum ut ipsum quis elementum. Curabitur a sem a ante pulvinar tincidunt. Nullam posuere arcu in erat laoreet, vitae efficitur ex venenatis. Quisque in fermentum nunc, vel consequat risus. Suspendisse risus purus, semper quis tempus eget, iaculis euismod velit. Quisque mi nunc, cursus et suscipit eget, gravida et nisi. Duis eros massa, eleifend eget tincidunt in, porta sit amet ante. Nunc eu feugiat quam. Morbi vel sapien ac dolor ultricies dapibus quis quis libero. Cras et auctor leo.
</p>
<p>
Donec accumsan sapien vitae diam commodo lobortis. Nam feugiat ullamcorper malesuada. Praesent fermentum nulla quis mauris consequat mollis. In lacus libero, laoreet nec aliquam in, vestibulum quis dui. Donec congue enim et lorem lobortis, ut suscipit augue congue. Integer efficitur ligula nec lectus aliquet, in luctus magna efficitur. Mauris euismod mauris viverra enim tincidunt efficitur. Ut imperdiet quis lorem in tincidunt. Nam magna orci, venenatis et felis rhoncus, semper maximus eros. Proin mauris mauris, sodales quis eleifend vel, convallis in leo. Curabitur vel auctor lacus. Integer vestibulum nisi magna, id malesuada erat consequat quis. Vivamus iaculis aliquam ullamcorper. Aenean faucibus posuere rhoncus. Mauris tincidunt magna velit, sed semper arcu venenatis non. Sed odio risus, luctus eget aliquam vel, elementum id sem.
</p>
<p>
Ut imperdiet pharetra nisl ut mollis. Aenean neque odio, volutpat a imperdiet sit amet, sollicitudin non dolor. Donec velit odio, lacinia sed dui in, dignissim consequat sem. Nullam vel vestibulum mi, ornare lacinia diam. Vivamus sed vestibulum ligula, a tempor magna. Nulla vitae nisi ligula. Vivamus euismod tincidunt justo varius rhoncus. Aliquam vitae enim odio. Nunc pretium, odio in fermentum fringilla, ipsum nulla aliquet magna, ac aliquet dui tellus viverra lacus. In vel feugiat elit. Nulla a pretium nunc, consequat blandit tellus. Proin sit amet molestie eros. Aliquam sit amet quam tincidunt, egestas nunc ut, vehicula tellus. Donec ullamcorper, ipsum cursus rutrum fermentum, ipsum sem semper orci, quis ultrices odio turpis sit amet tortor.
</p>
<p>
Phasellus ultrices at neque sit amet varius. Fusce molestie lacinia lorem, eu interdum urna tempor malesuada. Etiam nec ultricies nisi, ut fringilla nibh. Phasellus arcu metus, ultrices eu ipsum eu, fermentum fermentum tellus. Cras blandit massa turpis, eu condimentum purus suscipit ut. In hac habitasse platea dictumst. Sed nec magna sit amet mi congue aliquam. Integer tempor lobortis eros, ut finibus tortor fringilla id. Mauris mollis sollicitudin justo, et condimentum lacus. Nam tellus velit, efficitur nec efficitur eu, pharetra ac tortor. Mauris vitae sagittis purus.
</p>
<p>
Donec accumsan sapien vitae diam commodo lobortis. Nam feugiat ullamcorper malesuada. Praesent fermentum nulla quis mauris consequat mollis. In lacus libero, laoreet nec aliquam in, vestibulum quis dui. Donec congue enim et lorem lobortis, ut suscipit augue congue. Integer efficitur ligula nec lectus aliquet, in luctus magna efficitur. Mauris euismod mauris viverra enim tincidunt efficitur. Ut imperdiet quis lorem in tincidunt. Nam magna orci, venenatis et felis rhoncus, semper maximus eros. Proin mauris mauris, sodales quis eleifend vel, convallis in leo. Curabitur vel auctor lacus. Integer vestibulum nisi magna, id malesuada erat consequat quis. Vivamus iaculis aliquam ullamcorper. Aenean faucibus posuere rhoncus. Mauris tincidunt magna velit, sed semper arcu venenatis non. Sed odio risus, luctus eget aliquam vel, elementum id sem.
</p>
<p>
Ut imperdiet pharetra nisl ut mollis. Aenean neque odio, volutpat a imperdiet sit amet, sollicitudin non dolor. Donec velit odio, lacinia sed dui in, dignissim consequat sem. Nullam vel vestibulum mi, ornare lacinia diam. Vivamus sed vestibulum ligula, a tempor magna. Nulla vitae nisi ligula. Vivamus euismod tincidunt justo varius rhoncus. Aliquam vitae enim odio. Nunc pretium, odio in fermentum fringilla, ipsum nulla aliquet magna, ac aliquet dui tellus viverra lacus. In vel feugiat elit. Nulla a pretium nunc, consequat blandit tellus. Proin sit amet molestie eros. Aliquam sit amet quam tincidunt, egestas nunc ut, vehicula tellus. Donec ullamcorper, ipsum cursus rutrum fermentum, ipsum sem semper orci, quis ultrices odio turpis sit amet tortor.
</p>
<p>
Fusce ultricies ex eros, et maximus est feugiat vel. Ut non nunc turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi viverra eu dui congue pulvinar. Donec tincidunt, nulla sed sodales iaculis, felis sem dapibus sem, et viverra justo massa sed magna. Vestibulum eleifend ex vitae mattis iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
<a href="#jump">When we click on this link, we will be redirected to the part of the page with “jump” id</a>
</body>
</html>También puedes saltar a un id en una página diferente añadiendo el fragmento al final de la URL de esa página. Por ejemplo, si la página about tiene un elemento con id="contact", este enlace abre esa página y se desplaza directamente hasta él:
<a href="/about#contact">Contact us</a>Cómo aplicar un hipervínculo a una imagen
Para aplicar un hipervínculo a una imagen, solo necesitas colocar la imagen dentro de la etiqueta <a>. Esto se hace con la etiqueta <img>, que debe tener algunos atributos requeridos:
- src - la fuente de la imagen
- alt - texto alternativo para la imagen
- width - ancho de la imagen
- height - alto de la imagen
Ejemplo de las etiquetas <a> e <img> para aplicar un hipervínculo a una imagen:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3docs.com/">
<img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="logo" />
</a>
</body>
</html>Las imágenes HTML se tratarán en profundidad en el próximo capítulo.
Títulos de enlace
El atributo title se usa para especificar información adicional sobre un elemento. Esta información a menudo se muestra como texto de información emergente cuando mueves el ratón sobre el elemento.
Ejemplo de títulos de enlace:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Link Title Example</h1>
<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>The <span class="attribute">title</span> attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.</p>
<a href="https://www.w3docs.com/learn-html.html" title="Learn HTML">Learn more about HTML</a>
</body>
</html>URLs absolutas vs. relativas
El valor que pones en href puede ser uno de dos tipos de dirección. Conocer la diferencia es una de las partes más importantes para crear enlaces correctamente.
Una URL absoluta es la dirección web completa, incluyendo el protocolo (https://) y el nombre de dominio. Úsala para enlazar a una página de un sitio web diferente:
<a href="https://en.wikipedia.org/wiki/HTML">More about HTML</a>Una URL relativa apunta a una página del mismo sitio web, descrita de forma relativa a donde se encuentra la página actual. El navegador completa el protocolo y el dominio por ti. Las URLs relativas tienen varias formas:
<!-- Same folder as the current page -->
<a href="./contact.html">Contact</a>
<!-- One folder up, then into another folder -->
<a href="../images/logo.png">Logo</a>
<!-- Root-relative: starts at the site root, no matter where the current page is -->
<a href="/about">About us</a>Cómo elegir:
- Una
/inicial (una ruta relativa a la raíz como/about) siempre parte desde la cima de tu sitio, por lo que el mismo enlace funciona en todas las páginas. Esta suele ser la opción más segura para la navegación de todo el sitio. ./significa "esta carpeta" y../significa "subir una carpeta". Estas rutas relativas al documento se rompen si luego mueves la página a una carpeta diferente, así que úsalas con cuidado.- Usa una URL absoluta completa solo cuando el destino esté en otro dominio.
Consulta HTML URL para una visión más detallada de cómo se construyen las URLs.
Ejemplo de enlaces absolutos y relativos:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>External and internal paths</h1>
<p><a href="https://en.wikipedia.org/wiki/HTML">More about HTML (absolute)</a></p>
<p><a href="/about">About us (root-relative)</a></p>
</body>
</html>Enlaces de correo electrónico y teléfono
El valor de href no se limita a páginas web. Con esquemas de URL especiales puedes abrir el cliente de correo del usuario o, en un teléfono, iniciar una llamada.
Un enlace mailto: abre un nuevo correo electrónico dirigido a la dirección indicada:
<a href="mailto:[email protected]">Email us</a>Un enlace tel: permite a los usuarios móviles tocar para marcar un número de teléfono:
<a href="tel:+15551234567">Call us</a>Los atributos rel, download y hreflang
Además de href, target y title, la etiqueta <a> acepta varios otros atributos útiles.
El atributo rel describe la relación entre la página actual y la página enlazada. Ya viste rel="noopener noreferrer" por motivos de seguridad. Otro valor común es rel="nofollow", que indica a los motores de búsqueda que no transmitan crédito de posicionamiento al enlace:
<a href="https://example.com" rel="nofollow">Sponsored link</a>El atributo download indica al navegador que descargue el destino en lugar de navegar hacia él. Puedes darle un valor para sugerir un nombre de archivo:
<a href="/files/report.pdf" download="annual-report.pdf">Download the report</a>El atributo hreflang indica el idioma del documento enlazado. No cambia el comportamiento para los usuarios, pero ayuda a los navegadores y motores de búsqueda a entender el destino:
<a href="https://example.fr/" hreflang="fr">French version</a>Para la lista completa de atributos que admite la etiqueta <a>, consulta la referencia de la etiqueta HTML <a>.
Accesibilidad: escribe texto de enlace descriptivo
Los usuarios de lectores de pantalla suelen saltar de enlace en enlace, escuchando solo el texto del enlace sin contexto. Etiquetas vagas como "haz clic aquí" o "leer más" no les dicen nada sobre el destino del enlace. Escribe texto de enlace que describa el destino por sí solo:
<!-- Avoid: meaningless out of context -->
<p>To learn about our pricing, <a href="/pricing">click here</a>.</p>
<!-- Better: the link text describes the target -->
<p>See our <a href="/pricing">pricing plans</a>.</p>Mantén las palabras significativas dentro de las etiquetas <a>, asegúrate de que los enlaces se vean diferentes del texto circundante y evita usar la URL sin formato como texto de enlace en enlaces importantes.