Enlaces e imágenes en HTML

En las prácticas anteriores aprendiste a estructurar texto, crear listas y organizar datos con tablas. Ahora vamos a dar un paso más: conectar páginas entre sí y mostrar contenido visual con imágenes de forma semántica y accesible.

Enlaces con la etiqueta `<a>`

La etiqueta <a> (anchor) se usa para crear enlaces. Un enlace permite que el usuario navegue a otra página, otro archivo o incluso a una sección dentro del mismo documento.

Propiedades importantes de `<a>`

href: indica la dirección a la que apunta el enlace.
target: indica dónde se abrirá ese enlace.
rel: define la relación del enlace con el documento actual (clave cuando usas target="_blank").

Valores comunes de target:

_self: abre el enlace en la misma pestaña (comportamiento por defecto).
_blank: abre el enlace en una pestaña nueva.

Páginas externas

Uno de los usos más comunes de <a> es enlazar a otras páginas web como Wikipedia, redes sociales o documentación.

Cuando abras enlaces externos en nueva pestaña, usa rel="noopener noreferrer" para mejorar seguridad.

Ejemplos de enlaces externos

Ir a la documentación de HTML

Abrir Wikipedia en una pestaña nueva

<html>
  <body>
    <h2>Ejemplos de enlaces externos</h2>

    <p>
      <a href="https://developer.mozilla.org/es/docs/Web/HTML">Ir a la documentación de HTML</a>
    </p>

    <p>
      <a href="https://www.wikipedia.org" target="_blank" rel="noopener noreferrer">Abrir Wikipedia en una pestaña nueva</a>
    </p>
  </body>
</html>

Rutas absolutas vs rutas relativas

Esta diferencia es clave cuando trabajas con enlaces e imágenes.

Ruta absoluta: incluye dominio completo (por ejemplo, https://...).
Ruta relativa: parte desde tu proyecto actual (por ejemplo, about.html o ./img/logo.png).

Regla rápida

Usa rutas absolutas cuando apuntes a recursos externos.
Usa rutas relativas cuando el archivo está dentro de tu propio proyecto.

Rutas absolutas (externas)
Rutas relativas (internas)

<a href="https://developer.mozilla.org/es/docs/Web/HTML">Documentación HTML</a>
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Firefox_logo%2C_2019.svg" alt="Logo de Firefox" width="100" height="100" />

<a href="about.html">Ir a About</a>
<img src="./img/logo-firefox.svg" alt="Logo de Firefox" width="100" height="100" />

Enlaces entre páginas de tu proyecto

Si tienes varias páginas dentro de tu proyecto, puedes enlazarlas con rutas relativas. Supongamos esta estructura:

Directoryraiz - Carpeta raíz del proyecto
- index.html - Página principal
- about.html - Página “Acerca de”

index.html
about.html

<html>
  <body>
    <h1>Página principal</h1>
    <p>Bienvenido a mi sitio web.</p>
    <p>
      <a href="about.html">Ir a la página Acerca de</a>
    </p>
  </body>
</html>

<html>
  <body>
    <h1>Acerca de</h1>
    <p>Esta es la página de Acerca de.</p>
    <p>
      <a href="index.html">Volver a la página principal</a>
    </p>
  </body>
</html>

Previsualizar el ejemplo de múltiples páginas

Enlaces de sección dentro de la misma página

También puedes usar <a> para crear enlaces dentro de la misma página, apuntando a secciones específicas usando el atributo id.

Ejemplo de anclas internas

<html>
  <body>
    <h2 id="seccion1">Sección 1</h2>
    <p>Contenido de la sección 1...</p>

    <h2 id="seccion2">Sección 2</h2>
    <p>Contenido de la sección 2...</p>

    <p>
      <a href="#seccion1">Ir a Sección 1</a>
      |
      <a href="#seccion2">Ir a Sección 2</a>
    </p>
  </body>
</html>

Previsualizar el ejemplo de enlaces internos en una pestaña nueva

¿Qué puedes meter dentro de `<a>`?

Dentro de un enlace no solo va texto plano; también puedes incluir otros elementos en línea:

 para marcar información importante.
 para dar énfasis.
 para destacar una palabra.
Una imagen (<img>) o una figura (<figure>) en contextos adecuados.

Probar Firefox con enfoque en privacidad y funciones avanzadas

<html>
  <body>
    <p>
      <a href="https://www.mozilla.org/es-ES/firefox/new/" target="_blank" rel="noopener noreferrer">
        Probar <strong>Firefox</strong> con enfoque en <em>privacidad</em> y funciones <mark>avanzadas</mark>
      </a>
    </p>
  </body>
</html>

Imágenes con la etiqueta `<img>`

La etiqueta <img> se usa para mostrar imágenes en una página. Es una etiqueta sin cierre (autocontenida), y necesita ciertas propiedades para funcionar correctamente.

Propiedades importantes de `<img>`

src: ruta o URL de la imagen.
alt: texto alternativo que describe la imagen. Es esencial para accesibilidad.
width: ancho de la imagen.
height: alto de la imagen.

Mejor práctica semántica: `figure` + `figcaption`

Cuando una imagen forma parte del contenido (por ejemplo, un logo explicado en texto), es mejor usar figure y figcaption.

<html>
  <body>
    <h2>Imagen con contexto semántico</h2>

    <figure>
      <img
        src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Firefox_logo%2C_2019.svg"
        alt="Logo de Firefox en color naranja y morado"
        width="140"
        height="140"
      />
      <figcaption>Logo oficial de Firefox.</figcaption>
    </figure>
  </body>
</html>

Guía rápida de accesibilidad en imágenes (MDN) Consulta buenas prácticas reales para redactar textos alternativos útiles.

Práctica 5: Crea una mini galería con enlaces

Vamos a continuar la secuencia de prácticas. Dentro de la carpeta practicas, crea una carpeta llamada practica-5 y dentro un archivo index.html.

Directorypracticas - Carpeta raíz de prácticas
- Directorypractica-5 - Carpeta de la práctica 5
  - index.html - Archivo donde harás la actividad

En este archivo, crea una página HTML que cumpla estas condiciones:

Escribe la estructura base del documento (<html>, <head>, <title>, <body>).
Añade un <h1> con el título de tu mini galería (por ejemplo: “Navegadores web”).
Crea al menos 2 enlaces con <a>:
- uno que abra en la misma pestaña,
- y otro que abra en pestaña nueva usando target="_blank" y rel="noopener noreferrer".
En al menos uno de esos enlaces, mete dentro elementos en línea como ,  o .
Añade al menos 2 imágenes con <img> usando obligatoriamente src, alt, width y height.
Haz que al menos una imagen sea clicable metiéndola dentro de un enlace <a>.
Presenta al menos una imagen con estructura semántica <figure> + <figcaption>.
Agrega una tabla con al menos 2 filas y 2 columnas, y dentro de alguna celda incluye un enlace o una imagen.

Evita estos errores comunes al usar enlaces e imágenes

Escribir enlaces externos sin https:// en href.
Abrir enlaces con target="_blank" sin rel="noopener noreferrer".
Usar rutas relativas mal escritas (por ejemplo, imagnes/logo.png en lugar de imagenes/logo.png).
Olvidar el alt en imágenes informativas.
Poner textos alt genéricos como “imagen” o “foto” sin describir el contenido real.
Definir width y height con valores que deforman la imagen.
Crear enlaces rotos por escribir mal el nombre del archivo (about.html vs abount.html).