Enlaces e imágenes
La web se llama "web" (telaraña) precisamente por esto: páginas conectadas entre sí mediante enlaces. En este módulo aprenderás a enlazar páginas, secciones dentro de la misma página, y a incrustar imágenes correctamente.
El enlace: <a>
La etiqueta <a> (de anchor, ancla) es la
responsable de cualquier enlace en HTML. Por sí sola no hace nada: necesita el
atributo href ("hypertext reference"), que le dice
a dónde debe llevar al usuario cuando hace clic.
Crea un enlace. Todo lo que va entre la etiqueta de apertura y cierre es lo que el usuario ve y puede pulsar (texto, una imagen, o ambos).
Como ves, href no solo acepta direcciones web: también
puedes usar mailto: para abrir el gestor de correo del
usuario, o tel: para que un móvil ofrezca llamar
directamente a ese número.
Abre el enlace en una pestaña nueva en lugar de sustituir la página actual.
Cuando usas target="_blank", añade siempre rel="noopener". Evita que la página que se abre pueda manipular la pestaña original — una pequeña brecha de seguridad que, si no la cierras, muchos navegadores y auditorías señalarán.
Usar target="_blank" en todos los enlaces "porque sí".
Ábrelo en pestaña nueva solo cuando tenga sentido (por ejemplo, un enlace a un
documento externo), no en la navegación interna de tu propio sitio: a los usuarios
les suele molestar acumular pestañas sin control.
Rutas relativas vs. rutas absolutas
Cuando enlazas a otra página de tu propio sitio, no hace falta escribir la dirección completa. Aquí es donde entran las rutas relativas y absolutas.
- Ruta absoluta: la dirección completa, incluyendo
https://y el dominio. Ej:https://graffica.es/contacto.html. Se usa para enlazar a sitios externos. - Ruta relativa: solo el camino desde el archivo actual. Ej:
contacto.htmlo../imagenes/logo.png. Se usa para enlazar dentro de tu propio proyecto.
Usa siempre rutas relativas para tu propio contenido. Si algún día cambias de dominio (por ejemplo, de una versión de pruebas a la versión definitiva), las rutas relativas seguirán funcionando sin que tengas que tocar nada; las absolutas, no.
Anclas internas: saltar dentro de la misma página
También puedes enlazar a un punto concreto dentro de la misma página. Para
ello, primero le pones un id único al elemento de destino,
y luego enlazas a ese id precedido de una almohadilla #.
La imagen: <img>
A diferencia de <a>, <img>
no tiene etiqueta de cierre: es una etiqueta "vacía" que se autocompleta con sus
atributos.
La ruta del archivo de imagen (relativa o absoluta, igual que con los enlaces).
Un texto alternativo que describe la imagen. Se muestra si la imagen no carga, y lo leen en voz alta los lectores de pantalla para personas con discapacidad visual. No es opcional si quieres una web accesible.
Reservan el espacio de la imagen antes de que cargue, evitando que el resto del contenido "salte" mientras la página termina de cargar.
Dejar alt="" vacío en imágenes con contenido informativo,
o directamente omitir el atributo. Solo déjalo vacío quen la imagen es puramente
decorativa y no aporta información (por ejemplo, un adorno visual repetido). Si la
imagen comunica algo, descríbelo: "Logotipo de Gráffica Estudio", no "imagen1.png".
Buenas prácticas de formato de imagen, en pocas palabras: usa
.jpg para fotografías, .png
cuando necesites transparencia, .svg para logotipos e
iconos (escala sin perder calidad), y si puedes, .webp
para casi todo lo demás — pesa menos manteniendo buena calidad.
Agrupar una imagen con su descripción: <figure>
Cuando una imagen necesita un pie de foto, existe una pareja de etiquetas pensada justo para eso:
Agrupa una imagen (u otro contenido, como un gráfico) junto con su descripción como una sola unidad.
El pie de foto o descripción asociada a ese <figure>.
Ponlo a prueba
Comprueba lo que has aprendido
1. ¿Para qué sirve principalmente el atributo alt de una imagen?
2. ¿Cuándo conviene usar una ruta relativa en vez de absoluta?
3. ¿Qué combinación abre un enlace en pestaña nueva de forma segura?