Enlaces, rutas y navegación

El elemento que hace que exista la Web

<a href="https://developer.mozilla.org/">MDN Web Docs</a>

href indica el destino y el contenido del elemento es el texto visible del enlace. Ese texto importa: «pincha aquí» no dice nada fuera de contexto, y mucha gente navega saltando de enlace en enlace sin leer lo que hay alrededor.

Enlaces a otras páginas del sitio

mi-web/
│
├── index.html
├── productos.html
└── contacto.html

Desde index.html:

<a href="productos.html">Productos</a>

Enlaces dentro de la misma página

<a href="#contacto">Ir a contacto</a>

y en algún punto del documento:

<section id="contacto">
    <h2>Contacto</h2>
</section>

id

Identifica un elemento de forma única dentro del documento. Dos elementos con el mismo id son un error, y uno que los validadores sí detectan.

Enlaces especiales

<a href="mailto:contacto@example.com">Enviar correo</a>

<a href="tel:+34960000000">960 000 000</a>

tel: es especialmente útil en móvil, donde convierte el número en algo que se puede pulsar para llamar.

Abrir en otra pestaña

<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer">
    Abrir recurso
</a>

target="_blank" abre en pestaña nueva y rel="noopener noreferrer" corta la referencia que la página abierta obtendría hacia la tuya. Los navegadores actuales ya lo hacen por su cuenta, pero escribirlo sigue siendo lo correcto: no dependes de la versión del navegador y dejas la intención por escrito.

Dicho lo cual: abrir pestañas automáticamente no debería ser tu opción por defecto. Quien navega debería mantener el control de su navegación, y el botón de volver atrás deja de funcionar en una pestaña nueva.

Rutas relativas

Esta es la idea que desatasca todo lo demás. Cuando escribes href="productos.html", el navegador no busca desde la raíz del proyecto: busca desde la carpeta del archivo que contiene el enlace.

Por eso la misma ruta, escrita en dos archivos distintos, apunta a sitios distintos. No hay rutas correctas en abstracto: hay rutas correctas desde un origen.

La navegación

Un menú es, conceptualmente, una lista de enlaces:

<nav aria-label="Navegación principal">
    <ul>
        <li><a href="index.html">Inicio</a></li>
        <li><a href="productos.html">Productos</a></li>
        <li><a href="acerca.html">Acerca de</a></li>
        <li><a href="contacto.html" aria-current="page">Contacto</a></li>
    </ul>
</nav>

• <nav> declara que ese bloque es navegación. Un lector de pantalla ofrece saltar a él, o saltárselo entero para ir al contenido, que es lo que hace casi todo el mundo que navega así.
• La lista dice que son cuatro enlaces hermanos, y permite anunciar «lista de 4 elementos». Cuatro enlaces sueltos separados por espacios no dicen ni cuántos son ni dónde acaban.
• aria-current="page" marca cuál es la página que se está viendo. Sin CSS es la única forma de comunicarlo.

No elegimos las etiquetas pensando en cómo queremos que se vea. Elegimos las que representan mejor la información.

Tarea 4 · El sitio multipágina

Amplía tu proyecto hasta tener cuatro páginas en la raíz:

mi-web/
├── index.html
├── productos.html
├── acerca.html
└── contacto.html

Requisitos:

1. Las cuatro tienen el esqueleto completo y su propio <title> distinto y descriptivo.
2. Las cuatro incluyen el mismo bloque de navegación, con los mismos enlaces en el mismo orden.
3. Cada página marca su propio enlace con aria-current="page".
4. Cada página tiene un único h1 que coincide con su tema.

Recorre después el ciclo completo: Inicio → Productos → Acerca de → Contacto → Inicio. Si algún enlace falla, no lo arregles todavía: anótalo, porque es exactamente el problema que ataca la tarea siguiente.

Estoy atascado · el título de cada página

El <title> se lee fuera de contexto: en una pestaña estrecha, en un favorito, en un resultado de búsqueda. «Contacto» no dice de qué web es. Escribe primero lo específico y después el sitio, porque las pestañas se recortan por el final: Contacto | PixelStore.

Tarea 5 · El laberinto de rutas

Ahora el caso difícil, con carpetas de por medio:

web/
├── index.html
├── img/
│   └── logo.webp
└── paginas/
    ├── productos.html
    └── contacto.html

Paso 1 · Te enseño uno

Desde productos.html, enlazar logo.webp.

¿Dónde estoy?

En web/paginas/, porque ahí vive el archivo que escribe el enlace.

¿Dónde está el destino?

En web/img/.

¿Cuál es el camino?

Subir de paginas/ a web/, y desde ahí bajar a img/.

Ruta

../img/logo.webp

No conviene resolverlo de una sola vez. El procedimiento tiene tres pasos: dónde estoy, dónde voy y cuántos niveles subo antes de empezar a bajar.

Paso 2 · Ahora tú

1. Desde productos.html, volver a index.html.
2. Desde index.html, mostrar la imagen logo.webp.
3. Desde contacto.html, enlazar productos.html.
4. Desde index.html, enlazar contacto.html.
5. Desde index.html, saltar a una sección con id="envios" en esa misma página.

Ver soluciones

1 · ../index.html — subo de paginas/ a la raíz.

2 · img/logo.webp — ya estoy en la raíz, solo bajo.

3 · productos.html — los dos están en paginas/, misma carpeta.

4 · paginas/contacto.html — bajo un nivel desde la raíz.

5 · #envios — sin nombre de archivo: el destino está en el documento actual.

Ver respuestas

1 · Desde la carpeta del archivo que contiene el enlace, no desde la raíz del proyecto.

2 · Declara que ese bloque es una zona de navegación, y eso permite saltar a él o saltárselo. Un div no significa nada.

3 · Porque describe una posición dentro de tu disco duro. En cualquier otro equipo esa ruta no existe.

---