Enlaces e imágenes

Enlaces internos y externos

Los enlaces son elementos fundamentales en HTML que permiten conectar diferentes recursos web entre sí. La etiqueta <a> (anchor) es la responsable de crear estos enlaces y utiliza el atributo href (hypertext reference) para especificar el destino del enlace.

Enlaces externos

Los enlaces externos apuntan a recursos que se encuentran fuera de nuestro sitio web, como otras páginas web, documentos o servicios en línea.

<a href="https://www.example.com">Visitar Example.com</a>

Para crear un enlace externo, utilizamos una URL completa que incluye el protocolo (http:// o https://) seguido del dominio y la ruta específica:

<p>Puedes encontrar más información en <a href="https://developer.mozilla.org/es/docs/Web/HTML">MDN Web Docs</a>.</p>

Enlaces internos dentro de la página

Los enlaces internos pueden apuntar a diferentes secciones dentro de la misma página utilizando anclas. Para esto, necesitamos dos elementos: un enlace que apunte a un identificador y un elemento con ese identificador.

Primero creamos el enlace utilizando el símbolo # seguido del identificador:

<a href="#seccion-contacto">Ir a Contacto</a>

Después creamos el elemento de destino con el atributo id:

<h2 id="seccion-contacto">Contacto</h2>
<p>Aquí está la información de contacto...</p>

Enlaces a otras páginas del sitio

Para enlazar a otras páginas dentro del mismo sitio web, utilizamos rutas relativas sin incluir el dominio:

<a href="acerca-de.html">Acerca de nosotros</a>
<a href="productos/catalogo.html">Ver catálogo</a>
<a href="../index.html">Volver al inicio</a>

Las rutas relativas pueden navegar por la estructura de carpetas:

• archivo.html - archivo en la misma carpeta
• carpeta/archivo.html - archivo dentro de una subcarpeta
• ../archivo.html - archivo en la carpeta padre

Enlaces especiales

HTML permite crear enlaces para acciones específicas utilizando esquemas de URL especiales:

Enlaces de correo electrónico:

<a href="mailto:contacto@ejemplo.com">Enviar correo</a>
<a href="mailto:soporte@ejemplo.com?subject=Consulta&body=Hola, tengo una pregunta...">Contactar soporte</a>

Enlaces telefónicos:

<a href="tel:+34912345678">Llamar al +34 91 234 56 78</a>

Estructura y accesibilidad

Es importante que el texto del enlace sea descriptivo y explique claramente a dónde conduce.

Los enlaces pueden contener otros elementos HTML además de texto simple:

<a href="productos.html">
  <strong>Nuestros productos</strong>
  <br>
  Descubre toda nuestra gama
</a>

Fragmentos de URL en enlaces externos

También podemos enlazar directamente a secciones específicas de páginas externas combinando la URL con un fragmento:

<a href="https://developer.mozilla.org/es/docs/Web/HTML#elementos_html">Elementos HTML en MDN</a>

Los enlaces son la base de la navegación web y permiten crear una experiencia de usuario fluida conectando contenido relacionado tanto dentro como fuera de nuestro sitio web.

Atributos de enlaces (target,)

Los enlaces HTML admiten atributos adicionales que modifican su comportamiento y proporcionan información importante tanto para el navegador como para los motores de búsqueda. Los atributos target son esenciales para controlar cómo y dónde se abren los enlaces.

Atributo target

El atributo target especifica dónde se abrirá el documento vinculado. Este atributo es especialmente útil cuando queremos controlar la experiencia de navegación del usuario.

Abrir enlaces en una nueva pestaña:

<a href="https://www.example.com" target="_blank">Abrir en nueva pestaña</a>

El valor _blank es el más utilizado y hace que el enlace se abra en una nueva pestaña o ventana del navegador. Esto es útil cuando no queremos que el usuario abandone completamente nuestra página.

Valores del atributo target:

• **_self** - Abre el enlace en la misma ventana/pestaña (comportamiento por defecto)

<a href="pagina2.html" target="_self">Misma pestaña</a>

• **_blank** - Abre el enlace en una nueva ventana/pestaña

<a href="https://www.google.com" target="_blank">Nueva pestaña</a>

• **_parent** - Abre el enlace en el marco padre (útil cuando trabajamos con iframes)

<a href="salir.html" target="_parent">Salir del frame</a>

• **_top** - Abre el enlace en la ventana completa, eliminando todos los marcos

<a href="inicio.html" target="_top">Ventana completa</a>

Imágenes y atributos alt

Las imágenes son elementos visuales esenciales en HTML que enriquecen el contenido de nuestras páginas web. La etiqueta <img> es un elemento vacío (no tiene etiqueta de cierre) que utiliza atributos para definir qué imagen mostrar y cómo debe comportarse.

Sintaxis básica de la etiqueta img

La estructura básica de una imagen requiere únicamente el atributo src (source) que especifica la ubicación del archivo de imagen:

<img src="imagen.jpg">

Sin embargo, esta implementación mínima no es suficiente para una página web profesional. Es fundamental incluir el atributo alt para mejorar la accesibilidad:

<img src="imagen.jpg" alt="Descripción de la imagen">

El atributo src

El atributo src define la ruta hacia el archivo de imagen. Podemos utilizar tanto rutas relativas como absolutas:

Rutas relativas (recomendadas para imágenes locales):

<img src="logo.png" alt="Logo de la empresa">
<img src="imagenes/producto.jpg" alt="Fotografía del producto principal">
<img src="../recursos/icono.svg" alt="Icono de navegación">

Rutas absolutas (para imágenes externas):

<img src="https://ejemplo.com/imagen.jpg" alt="Imagen externa">

El atributo alt: accesibilidad esencial

El atributo alt proporciona texto alternativo que describe el contenido de la imagen. Este atributo es fundamental para:

• Lectores de pantalla - Usuarios con discapacidad visual
• Navegadores con imágenes deshabilitadas
• Conexiones lentas donde las imágenes no cargan
• Motores de búsqueda para indexar el contenido visual

Ejemplos de descripciones alt efectivas:

<!-- Imagen decorativa -->
<img src="patron-fondo.png" alt="">

<!-- Imagen informativa -->
<img src="grafico-ventas.png" alt="Gráfico que muestra un aumento del 25% en ventas durante 2024">

<!-- Imagen con texto -->
<img src="promocion.jpg" alt="Descuento del 50% en todos los productos - Válido hasta el 31 de diciembre">

<!-- Retrato o foto de persona -->
<img src="director.jpg" alt="María García, directora ejecutiva de la empresa">

Atributos adicionales importantes

Dimensiones con width y height:

<img src="banner.jpg" alt="Banner promocional" width="800" height="200">

Especificar las dimensiones ayuda al navegador a reservar espacio antes de que la imagen cargue, evitando cambios de diseño bruscos.

Atributo title para información adicional:

<img src="producto.jpg" alt="Smartphone XYZ" title="Disponible en 3 colores diferentes">

El atributo title muestra un tooltip cuando el usuario pasa el cursor sobre la imagen.

Formatos de imagen modernos

HTML soporta diversos formatos de imagen como jpg, png, svg o webp.

Imágenes responsivas básicas

Para imágenes que se adapten a diferentes tamaños de pantalla:

<img src="imagen.jpg" alt="Imagen adaptable" style="max-width: 100%; height: auto;">

Casos especiales del atributo alt

Imágenes que son enlaces:

<a href="inicio.html">
    <img src="logo.png" alt="Volver a la página de inicio">
</a>

Imágenes en listas o catálogos:

<ul>
    <li>
        <img src="producto1.jpg" alt="Camiseta azul talla M - 25€">
        <p>Camiseta casual</p>
    </li>
    <li>
        <img src="producto2.jpg" alt="Pantalón negro talla L - 45€">
        <p>Pantalón formal</p>
    </li>
</ul>

Errores comunes que evitar

Alt genérico o redundante:

<!-- Evitar -->
<img src="foto.jpg" alt="Foto">
<img src="imagen.png" alt="Imagen">

<!-- Mejor -->
<img src="foto.jpg" alt="Equipo de desarrollo en la oficina central">
<img src="imagen.png" alt="Proceso de fabricación paso a paso">

Alt excesivamente largo:

<!-- Evitar -->
<img src="paisaje.jpg" alt="Una fotografía muy hermosa de un paisaje montañoso con árboles verdes, un cielo azul con algunas nubes blancas, tomada durante el atardecer...">

<!-- Mejor -->
<img src="paisaje.jpg" alt="Paisaje montañoso al atardecer con bosque de coníferas">