Enlaces y navegación
Una sola página por sí sola es una isla. Los enlaces son lo que une las páginas en una web: permiten a un visitante moverse a otra página, saltar a una sección más abajo, o abrir una aplicación de correo para escribirte. El elemento detrás de todo esto es el anchor, <a>, y funciona con un atributo llamado href. Si las palabras elemento y atributo son nuevas, el capítulo ¿Qué es HTML? te las presenta.
El elemento anchor
Un enlace se hace con el elemento anchor, escrito <a>. Le das un atributo href, que es a dónde va el enlace, y el texto entre las etiquetas de apertura y cierre es lo que el visitante ve y hace clic.
<a href="https://scrimba.com">Visita Scrimba</a>Las palabras "Visita Scrimba" aparecen como un enlace clickeable. Haz clic en ellas y el navegador carga la dirección en el href.
Piensa en href como el destino escrito en un letrero, y el texto del enlace como la etiqueta pintada en el letrero. La etiqueta es lo que la gente lee; el destino es a dónde apunta la flecha.
<a href="...">: el href es a dónde va, el texto entre las etiquetas es lo que la gente hace clic. Ese es el elemento completo. Obtén esas dos partes y puedes enlazar a cualquier lugar de la web. URLs absolutas y relativas
Cada enlace necesita una dirección a la que apuntar, y hay dos tipos. Una URL absoluta es la dirección completa, comenzando con https://, la misma que escribirías en la barra de direcciones. Úsala para enlazar a otro sitio web:
<a href="https://scrimba.com">Página de inicio de Scrimba</a>Una URL relativa es un atajo a otra página en tu propio sitio. En lugar de la dirección completa, das la ruta desde donde estás ahora:
<a href="about.html">Acerca de nosotros</a>Ese enlace busca un archivo about.html en la misma carpeta que la página actual. Una URL absoluta es una dirección postal completa con el país y la ciudad; una URL relativa es "dos puertas hacia abajo desde aquí".
https://... para otros sitios, una relativa como about.html es un atajo a una página en la tuya. Dirección postal completa versus "dos puertas hacia abajo". Comienza con enlaces relativos para tus propias páginas y escribirás mucho menos. Objetivos de enlace, rel y abrir en pestañas nuevas
Por defecto, hacer clic en un enlace carga la página nueva en la misma pestaña, reemplazando la página en la que estabas. A veces quieres que se abra en una pestaña nueva en su lugar, para que el visitante mantenga tu página abierta. Lo haces con el atributo target establecido en _blank:
<a href="https://scrimba.com" target="_blank">Abre Scrimba en una pestaña nueva</a>_blank significa "una pestaña nueva y fresca". Abrir un enlace normalmente es caminar a través de una puerta hacia la siguiente sala; target="_blank" abre una segunda puerta para que la primera sala permanezca donde estaba.
target="_blank" abre un enlace en una pestaña fresca para que tu página permanezca en su lugar. Déjalo fuera y el enlace se abre en la misma pestaña, que es lo que la gente espera la mayoría de las veces. Guarda la pestaña nueva para enlaces que se dirigen a otros sitios. Enlaces en la página con IDs de fragmento
Los enlaces no solo van a otras páginas. También pueden saltar a un lugar más abajo en la página actual, de la manera que lo hace una tabla de contenidos. Primero, dale al lugar que quieres alcanzar, por ejemplo una encabezado, un atributo id único:
<h2 id="pricing">Precios</h2>Luego enlaza a él poniendo un # delante de ese nombre:
<a href="#pricing">Salta a precios</a>Hacer clic en el enlace desplaza la página hacia abajo a la encabezado de precios. La parte #name se llama un fragmento. El id es un marcador que insertas en la página, y el enlace # es que saltas directamente a él.
id, luego enlaza a él con # y ese mismo nombre, como <a href="#pricing">. La página desplaza directamente allí. Imagina el id como un marcador y el enlace # como saltando a él. Construir una navegación
La mayoría de sitios tienen una fila de enlaces en la parte superior: Inicio, Acerca de, Contacto. Esa es una navegación, y es un conjunto de anchors agrupados juntos. HTML tiene un elemento hecho para ella, <nav>, que marca un bloque como la navegación de la página:
<nav>
<a href="/">Inicio</a>
<a href="/about">Acerca de</a>
<a href="/contact">Contacto</a>
</nav>Cada enlace es un anchor ordinario. Envolverlos en <nav> le dice al navegador y otras herramientas "este grupo es cómo te mueves por el sitio".
<nav>, como Inicio, Acerca de, Contacto. El <nav> le dice a todo "esta es cómo te mueves". Los enlaces adentro son anchors simples, nada nuevo que aprender.