Utiliza el elemento anchor para especificar un hipervínculo, a menudo denominado enlace, a otra web o archivo que deseas visualizar. Cada elemento anchor (de anclaje) comienza con una etiqueta <a> y termina con una etiqueta </a>.
Elemento HTML Anchor <a>
Las etiquetas anchor de apertura y cierre rodean el texto para hacer clic en el hipervínculo. Utiliza el atributo href para configurar la referencia del hipervínculo, que identifica el nombre y la ubicación del archivo a acceder. La siguiente imagen muestra una web con una etiqueta anchor (ancla) que configura un hipervínculo al sitio web de este curso, https://htmldesdecero.es.
El código para la etiqueta anchor de ejemplo es el siguiente:
<a href="https://htmldesdecero.es">Aprender HTML desde Cero</a>Observa que el valor href es la URL del sitio web. El texto que se escribe entre las dos etiquetas anchor se muestra en la página web como un hipervínculo y está subrayado por la mayoría de los navegadores. Cuando mueves el cursor del ratón sobre un hipervínculo, el cursor cambia a una mano apuntando, como se muestra en la imagen anterior.
Para crear una página web como la mostrada anteriormente, ejecuta un editor de texto. Modifica el elemento title y añade etiquetas anchor a la sección body como se indica en el siguiente código:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo de Anchor</title>
<meta charset="utf-8">
</head>
<body>
<a href="https://htmldesdecero.es">Aprender HTML desde Cero</a>
</body>
</html>Sintaxis
La etiqueta <a> se escribe como <a href=""></a> con la URL vinculada entre las comillas dobles del atributo href y el texto de anclaje (es decir, el texto que ve el usuario) entre las etiquetas de inicio y fin.
Así:
<a href="http://www.htmldesdecero.es/">HtmlDesdeCero</a>.Ejemplos
Uso básico de la etiqueta
Aprende programación con estos <a href="https://codigonautas.com/">ejemplos de código.</a>.Abrir el enlace en una nueva ventana (o pestaña)
Aquí utilizamos "target="_blank"" para abrir el enlace en una nueva ventana.
Aprende programación con estos <a href="https://codigonautas.com/" target="_blank">ejemplos de código.</a>.Recargar la nueva ventana
Aquí abrimos varios enlaces en una nueva ventana, pero en lugar de abrir una nueva ventana con cada enlace, se abre una nueva ventana con el primer enlace, luego los siguientes enlaces cargan su contenido en esa ventana.
Hacemos esto simplemente dando un nombre al atributo “target” que no existe (es decir, inventamos nuestro propio nombre para la ventana o pestaña).
<a href="http://www.htmldesdecero.es/" target="myTab">Enlace 1</a><br>
<a href="https://codigonautas.com/" target="myTab">Enlace 2</a><br>
<a href="http://htmleditor.online" target="myTab">Enlace 3</a><br>Imagen vinculada
Aquí envolvemos la etiqueta <a> alrededor de una imagen para crear una imagen vinculada.
<a href="https://en.wikipedia.org/wiki/Phi_Phi_Islands" target="myTab">
<img src="/pix/places/phi-phi-200x150.jpg" alt="Foto de Koh Phi Phi en Tailandia">
</a>No-Follow
Aquí utilizamos "rel="nofollow"" para crear un enlace “nofollow“. Esto se utiliza para informar a los motores de búsqueda que no respaldas el contenido al otro lado del enlace. El valor del atributo "nofollow" se utiliza típicamente en enlaces pagados y publicidad.
<a href="http://www.growuz.com/" rel="nofollow" target="myTab">¡Mejor Agencia de Marketing!</a>Nota
Muchas personas se refieren a esto como la “etiqueta nofollow”, pero en realidad no es una etiqueta. Ni siquiera es un atributo (el atributo es "rel"). La parte “nofollow” es simplemente un valor del atributo “rel”.
Atributos
Los atributos se pueden agregar a un elemento HTML para proporcionar más información sobre cómo debe aparecer o comportarse el elemento.
El elemento <a> acepta los siguientes atributos.hrefEspecifica la URL de la página a la que enlaza. targetEspecifica el contexto de navegación predeterminado para cargar la URL. Solo se utiliza cuando el atributo href está presente.
Valores posibles:_blank_self_top_parent
Cualquier cadena con al menos un carácter que no comience con un carácter U+005F LOW LINE. En otras palabras, no puede comenzar con un carácter de subrayado (los nombres que comienzan con un guion bajo están reservados para palabras clave especiales).downloadIndica que el enlace se utiliza para descargar un recurso (como un archivo). El autor puede especificar un nombre de archivo predeterminado proporcionando un valor. Este atributo es opcional.
Valor: [Nombre de archivo predeterminado.] (opcional)relDescribe la relación entre el documento actual y la URI de destino. Solo se debe utilizar cuando el atributo href está presente. Se pueden proporcionar varios valores, separados por un espacio. revRelación inversa de enlace del recurso de destino con respecto a este documento (o subsección/tema). hreflangCódigo de idioma de la URL de destino. Solo se debe utilizar cuando el atributo href está presente. typeEspecifica el tipo MIME del recurso vinculado. Solo se debe utilizar cuando el atributo href está presente. referrerpolicyPolítica de referencia para las solicitudes iniciadas por el elemento.
Valores de rel:Valor Descripción alternateProporciona representaciones alternativas del documento actual. authorEnlaza al autor del documento actual. bookmarkProporciona el enlace permanente a la sección ancestral más cercana. externalIndica que el documento referenciado no forma parte del mismo sitio que el documento actual. helpProporciona un enlace a la ayuda contextual. licenseIndica que el contenido principal del documento actual está cubierto por la licencia de copyright descrita por el documento referenciado. nextIndica que el documento actual es parte de una serie, y que el siguiente documento en la serie es el documento referenciado. nofollowIndica que el autor original o el editor del documento actual no respalda el documento referenciado. Este atributo se utiliza a menudo para declarar enlaces de pago a motores de búsqueda como Google, quienes solicitan a los webmasters que declaren todos los enlaces de pago (por ejemplo, publicidad) de esta manera. noopenerCrea un contexto de navegación de nivel superior que no es un contexto de navegación auxiliar si el hipervínculo crearía alguno de esos al principio (es decir, tiene un valor de atributo de destino apropiado). noreferrerRequiere que el agente de usuario no envíe una cabecera HTTP Referer (sic) header si el usuario sigue el hipervínculo. openerCrea un contexto de navegación auxiliar si el hipervínculo crearía de lo contrario un contexto de navegación de nivel superior que no es un contexto de navegación auxiliar (es decir, tiene “_blank” como valor de atributo de destino). prevIndica que el documento actual es parte de una serie, y que el documento anterior en la serie es el documento referenciado. searchProporciona un enlace a un recurso que puede utilizarse para buscar en el documento actual y sus páginas relacionadas. tagProporciona una etiqueta (identificada por la dirección dada) que se aplica al documento actual.
Hipervínculos absolutos
Un hipervínculo absoluto indica la ubicación absoluta de un recurso en la Web. Utiliza hipervínculos absolutos cuando necesites establecer vínculos a recursos de otros sitios web. El valor href para un hiperenlace absoluto a la página principal de un sitio web incluye el protocolo http:// y el nombre de dominio. El siguiente hipervínculo es un hipervínculo absoluto a la página principal del sitio web CodigoNautas.
<a href="https://codigonautas.com/">CódigoNautas</a>Ten en cuenta que si queremos acceder a una página web que no sea la página principal del sitio web del curso, también podemos incluir un nombre de carpeta y un nombre de archivo específico. Por ejemplo, la siguiente etiqueta anchor configura un hipervínculo absoluto para una página llamada HTML ubicada en https://codigonautas.com/html.
<a href="https://codigonautas.com/html">Artículos de HTML</a>
Hipervínculos relativos
Cuando necesites enlazar a páginas web dentro de tu sitio, utiliza un hipervínculo relativo. El valor href para un hipervínculo relativo no comienza con http:// y no es necesario incluir un nombre de dominio.
Para un hipervínculo relativo, el valor href contendrá sólo el nombre de archivo o la carpeta de la página web que deseas visualizar. La ubicación del hipervínculo es relativa a la página que se muestra actualmente. Para por ejemplo, si estás codificando una página de inicio (index.html) para un sitio web y quieres enlazar a una página llamada contacto.html localizado en la misma carpeta que index.html, entonces usarías el siguiente código de ejemplo:
<a href="contacto.html">Contacto</a>Para que quede más claro, esta página es https://htmldesdecero.es, entonces para dirigirme a la sección de Etiquetas HTML, debería colocar el siguiente código:
<a href="/etiquetas/">Etiquetas HTML</a>SiteMap
Un mapa de sitio o sitemap representa la estructura, u organización, de las páginas de un sitio web en una manera visual. Cada página del sitio web está representada por un recuadro en el mapa del sitio. La siguiente imagen muestra el mapa del sitio para un sitio web que contiene una página de inicio y dos páginas de contenido: una página de Servicios y otra de Contacto. Observa que la página de Inicio está en la parte superior del mapa del sitio. El segundo nivel en un mapa del sitio muestra las otras páginas principales de el sitio web.
En este pequeño sitio web de tres páginas, las otras dos páginas (Servicios y Contacto) están incluidas en el segundo nivel. La navegación principal de un sitio web suele incluir hipervínculos a las páginas mostradas en los dos primeros niveles del mapa del sitio.
Ejemplo de código con elemento anchor
La mejor manera de aprender a codificar páginas web es haciéndolo! Practiquemos y creemos tres páginas: Página de Inicio (index.html) con dos páginas de contenido: Página de Servicios (servicios.html) y Página de Contacto (contacto.html).
- Primero: Crear una carpeta. Los diseñadores web almacenan y organizan los archivos de su ordenador creando una carpeta en su disco duro para cada sitio web. Esto les ayuda a ser eficientes ya que trabajan con muchos sitios web diferentes. Ahora es tu turno, tú organizarás tu propio trabajo de diseño web creando una nueva carpeta para cada sitio web. Utiliza tu sistema operativo para crear una nueva carpeta llamada practica02 para tu nuevo sitio web.
- Crea la página de inicio (home). Utiliza el siguiente código como punto de partida para tu nueva página de inicio (index.html):
<!DOCTYPE html>
<html lang="es">
<head>
<title>Mi web de ejemplo 02</title>
<meta charset="utf-8">
</head>
<body>
<header>
<h1>Elemento Anchor</h1>
</header>
<nav>
<b>Inicio Servicios Contacto</b>
</nav>
<main>
<h2>Aprende practicando</h2>
<p>Nada mejor que escribiendo etiquetas para aprender HTML.</p>
<h2>Comentarios</h2>
<p>Deja tu comentario para ayudarte en lo que necesites.</p>
</main>
<footer>
<small><i>Copyright © 2019 Aprender HTML desde Cero</i></small>
</footer>
</body>
</html>- Inicia un editor de texto y abre el archivo index.html. Los hipervínculos de navegación se ubicarán dentro del elemento nav. Editarás el código dentro del elemento
navpara configurar tres hipervínculos: El texto “Inicio” incluirá un hipervínculo a index.html, “Servicios” a servicios.html y “Contacto” incluirá un hipervínculo a contacto.html.
<nav>
<b>
<a href="index.html">Inicio</a>
<a href="servicios.html">Servicios</a>
<a href="contacto.html">Contacto</a>
</b>
</nav>- Crea la Página de Servicios. Es práctica común crear una nueva página web basada en una página existente. Usarás el archivo index.html como punto de partida para la nueva página de servicios. Modifica el título de la página web, no cambies el código dentro de los elementos header, nav o footer. En otras palabras, crearás algo parecido a:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Mi web de ejemplo 02 - Servicios</title>
<meta charset="utf-8">
</head>
<body>
<header>
<h1>Elemento Anchor</h1>
</header>
<nav>
<b>
<a href="index.html">Inicio</a>
<a href="servicios.html">Servicios</a>
<a href="contacto.html">Contacto</a>
</b>
</nav>
<main>
<h2>Los servicios que necesitas</h2>
<dl>
<dt><strong>Diseño web</strong></dt>
<dd>Ya sea que sus necesidades sean grandes o pequeñas, podemos crear una Web!</dd>
<dt><strong>Logotipos</strong></dt>
<dd>Creamos logos personalizados para cualquier empresa.</dd>
<dt><strong>Search Engine Optimization (SEO)</strong></dt>
<dd>La mayoría de la gente encuentra nuevos sitios usando motores de búsqueda.</dd>
</dl>
</main>
<footer>
<small><i>Copyright © 2018 Aprender HTML desde Cero</i></small>
</footer>
</body>
</html>- Crea la página de contacto. Usa el archivo index.html como punto de partida para la nueva página de Contacto. Abre index.html en un editor de texto y guárdalo como contacto.html. Edite el código como sigue:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Mi web de ejemplo 02 - Contacto</title>
<meta charset="utf-8">
</head>
<body>
<header>
<h1>Elemento Anchor</h1>
</header>
<nav>
<b>
<a href="index.html">Inicio</a>
<a href="servicios.html">Servicios</a>
<a href="contacto.html">Contacto</a>
</b>
</nav>
<main>
<h2>Contacto con Aprender desde cero</h2>
<ul>
<li>E-mail: contacto@aprenderdesdecero.online</li>
<li>Teléfono: 555-2828-5555</li>
</ul>
</main>
<footer>
<small><i>Copyright © 2019 Aprender HTML desde Cero</i></small>
</footer>
</body>
</html>Guarda el archivo contacto.html en su carpeta practica02 y prueba tu página en un navegador. Debe ser similar a la siguiente imagen:
Hipervínculos de correo electrónico
La etiqueta anchor también se puede utilizar para crear hipervínculos de correo electrónico. Un hipervínculo de correo electrónico iniciará automáticamente el programa de correo predeterminado configurado para el navegador. Es similar a un hipervínculo externo con las dos excepciones siguientes:
- Utiliza
mailto:en lugar dehttp://. - Inicia la aplicación de correo electrónico predeterminada para el navegador del visitante con su dirección de correo electrónico como destinatario.
Por ejemplo, para crear un hipervínculo de correo electrónico a la dirección de correo electrónico hola@htmldesdecero.es, codifica lo siguiente:
<a href="mailto:contacto@htmldesdecero.es">hola@htmldesdecero.es</a>Es una buena práctica colocar la dirección de correo electrónico tanto en la página web como dentro de la etiqueta anchor. No todo el mundo tiene un programa de correo electrónico configurado con su navegador. Al colocar la dirección de correo electrónico en ambos lugares, aumentas la usabilidad para todos tus visitantes.
¿Te atreves a actualizar la página de contacto con la nueva etiqueta mailto:? Claro que sí! Dale a compartir y nos vemos en un próximo tutorial :’)
