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>.

1. 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://aprenderdesdecero.online/html/.

Elemento HTML Anchor a
Elemento HTML Anchor

El código para la etiqueta anchor de ejemplo es el siguiente:

<a href="https://aprenderdesdecero.online/html/">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 vody 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://aprenderdesdecero.online/html/">Aprender HTML desde Cero</a>
</body>
</html>

2. 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 Seo y Blogger.

<a href="https://seoyblogger.blogspot.com/">Seo y Blogger</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 Sitemap ubicada en https://seoyblogger.blogspot.com/p/sitemap.html.

<a href="https://seoyblogger.blogspot.com/p/sitemap.html">Sitemap de Seo y Blogger</a>

3. 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://aprenderdesdecero.online, entonces para dirigirme al curso de HTML desde Cero, debería colocar el siguiente código:

<a href="/html/etiquetas-basicas-html/">HTML</a>

4. Site Map

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.

Site Map de un sitio web HTML
Site Map de un sitio web HTML

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.

5. 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).

Ejemplo de código con elemento anchor
Ejemplo de código con elemento anchor (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 &nbsp; Servicios &nbsp; 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 &copy; 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 nav para 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> &nbsp;
<a href="servicios.html">Servicios</a> &nbsp;
<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> &nbsp;
  <a href="servicios.html">Servicios</a> &nbsp;
  <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 &copy; 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> &nbsp;
  <a href="servicios.html">Servicios</a> &nbsp;
  <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 &copy; 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:

Ejemplo de páginas web con anchor
Ejemplo de páginas web con anchor

 

6. 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 de http://.
  • 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 contacto@aprenderdesdecero.online, codifica lo siguiente:

<a href="mailto:contacto@aprenderdesdecero.online">contacto@aprenderdesdecero.online</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 :’)

Etiqueta ANCHOR
5 (100%) 7 votos




Alex Walton

Alex Walton

Aprender desde Cero es tu web para conocer todo sobre informática. Mi nombre es Alex y me gustaría que dejes tu comentario ante cualquier duda o aporte.
"Si no lo consigues a la primera, llámalo versión 1.0"

Comparte este artículo:

Facebook
Google+
Twitter
LinkedIn
WhatsApp
Email
Deja tu comentario
Contenido Relacionado
Etiqueta VIDEO HTML5 con ejemplo

Etiqueta VIDEO

El nuevo elemento video HTML5 es compatible con la reproducción nativa de archivos de vídeo en el navegador sin necesidad ...
Leer Más
Etiqueta AUDIO HTML5 con ejemplo

Etiqueta AUDIO

El nuevo elemento audio de HTML5 soporta la reproducción nativa de archivos de audio en el navegador sin la necesidad ...
Leer Más
Etiqueta EMBED HTML5 con ejemplos

Etiqueta EMBED

El elemento embed es un elemento autónomo, o vacío (no se utiliza etiqueta de cierre), cuyo propósito es proporcionar un ...
Leer Más
SOBRE NOSOTROS

Somos una web que busca el libre conocimiento en temas relacionados a la informática.

Todos los cursos son gratis. La publicidad nos mantiene activos así que por favor visita a nuestros anunciantes.

RECIBE MUCHOS REGALOS