Tema 9 · Estilos y Citas

Imágenes, Figuras y Favicon

Aprende a insertar gráficos con <img>, garantizar la accesibilidad con alt, optimizar la carga con lazy loading, estructurar con <figure> y configurar el favicon.

Enlaces e Hipervínculos (<a>) Listas Ordenadas, Desordenadas y Glosarios

La Etiqueta <img> y sus Atributos Obligatorios

La etiqueta <img> es un elemento vacío (no tiene etiqueta de cierre). No inserta técnicamente la imagen en el archivo, sino que crea un espacio reservado que descarga la imagen desde el servidor a través del atributo src. 

<img src="imagenes/laptop.jpg" alt="Desarrollador programando en laptop moderna" width="600" height="400" loading="lazy">
Atributo Función y Buenas Prácticas
src Ruta de origen (Source): Puede ser una URL absoluta en internet o una ruta relativa a tus carpetas locales.
alt Texto alternativo (Alt Text): Crítico para la accesibilidad. Si la imagen falla al cargar o el usuario utiliza un lector de pantalla para personas con discapacidad visual, este texto describe el contenido. Nunca lo dejes vacío salvo que la imagen sea puramente decorativa (en cuyo caso se usa alt="").
width / height Define las dimensiones intrínsecas en píxeles. Ayuda al navegador a reservar el espacio exacto en pantalla antes de que la imagen termine de descargarse, evitando saltos molestos de diseño (conocido en SEO como Cumulative Layout Shift o CLS).
loading="lazy" Carga diferida nativa: Ordena al navegador no descargar la imagen hasta que el usuario haga scroll y la imagen esté próxima a aparecer en la pantalla. Ahorra ancho de banda y acelera enormemente la velocidad de carga.

Estructuración Semántica: <figure> y <figcaption>

Cuando una imagen, diagrama, ilustración o código requiere un pie explicativo o una leyenda, HTML5 introduce las etiquetas semánticas <figure> y <figcaption>: 

<figure>
  <img src="grafica.png" alt="Curva de crecimiento de usuarios en 2026">
  <figcaption>Figura 1: Evolución del tráfico orgánico en el último trimestre.</figcaption>
</figure>

¿Cómo agregar un Favicon a tu Sitio?

El favicon es la pequeña imagen o logotipo que aparece junto al título de tu página en la pestaña del navegador. Se coloca siempre dentro del elemento <head>: 

<head>
  <!-- Favicon clásico ICO o PNG -->
  <link rel="icon" type="image/x-icon" href="/favicon.ico">
  <!-- Favicon moderno vectorial SVG (escala perfecto en pantallas Retina y modo oscuro) -->
  <link rel="icon" type="image/svg+xml" href="/logo.svg">
</head>

⚡ Imágenes Responsivas con Figure y Figcaption

Observa cómo se integra una imagen con texto alternativo, bordes redondeados y una leyenda semántica:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Imágenes y Figuras en HTML5</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f1f5f9; }
    .galeria-contenedor { max-width: 520px; margin: 0 auto; }
    figure {
      background: white;
      margin: 0;
      padding: 15px;
      border-radius: 12px;
      box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
      border: 1px solid #cbd5e1;
    }
    figure img {
      width: 100%;
      height: auto;
      border-radius: 8px;
      display: block;
    }
    figcaption {
      margin-top: 12px;
      font-size: 0.85rem;
      color: #64748b;
      text-align: center;
      border-top: 1px solid #f1f5f9;
      padding-top: 8px;
    }
  </style>
</head>
<body>

  <div class="galeria-contenedor">
    <figure>
      <!-- Usamos una imagen de muestra segura en línea -->
      <img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=600&auto=format&fit=crop&q=80" 
           alt="Laptop mostrando líneas de código en un editor moderno" 
           width="600" 
           height="400" 
           loading="lazy">
      <figcaption>
        <strong>Fotografía 1.1:</strong> Espacio de trabajo de un programador web en Kilopolis.
      </figcaption>
    </figure>
  </div>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de HTML5 y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno HTML/CSS/BS5 Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.