Insertar una imagen de cabecera (banner) en una página web con HTML

Un banner es una imagen horizontal en la parte superior de la página. El método moderno usa HTML semántico y CSS para control total.

Estructura HTML5 básica

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi página</title>
  <style>
    header { margin: 0; padding: 0; }
    header img { display: block; width: 100%; height: auto; max-height: 200px; object-fit: cover; }
  </style>
</head>
<body>
  <header>
    <img src="banner.jpg" alt="Descripción del banner para accesibilidad y SEO">
  </header>
  <main>
    <h1>Bienvenido a nuestra página</h1>
    <p>Contenido principal…</p>
  </main>
</body>
</html>

Puntos clave

• <header>: elemento semántico para cabecera del sitio/sección.
• src: ruta relativa (banner.jpg en misma carpeta) o absoluta (/images/banner.jpg, https://cdn.ejemplo.com/banner.jpg).
• alt: obligatorio para accesibilidad (lectores de pantalla) y SEO. Describe la imagen.
• CSS: width:100% hace fluido el banner; max-height + object-fit:cover evita que ocupe demasiada altura en móviles recortando la imagen sin deformar.
• Formato imagen: WebP (mejor compresión), JPEG (fotos), PNG (gráficos con transparencia). Ancho típico 1200-1920 px.

Banner responsive con picture (arte direccional)

<header>
  <picture>
    <source media="(max-width: 600px)" srcset="banner-movil.webp" type="image/webp">
    <source media="(min-width: 601px)" srcset="banner-desktop.webp" type="image/webp">
    <img src="banner-desktop.jpg" alt="Banner principal">
  </picture>
</header>

Validación

Abre el archivo .html en navegador. Verifica en herramientas de desarrollador (F12) pestaña "Responsive" que se ve bien en móvil, tablet, desktop.