19. Figuras y atributos en HTML5

Curso HTML5 desde cero — Freimel Jerez

En HTML5, las figuras y los atributos permiten describir mejor el contenido y darle significado semántico. Esto mejora la accesibilidad, el SEO y la estructura del sitio.

🖼️ La etiqueta <figure>

La etiqueta <figure> se utiliza para agrupar contenido visual, como imágenes, diagramas o ilustraciones.

<figure>
  <img src="imagen.jpg" alt="Ejemplo de imagen">
</figure>

📝 La etiqueta <figcaption>

Se usa junto con <figure> para agregar una descripción al contenido.

<figure>
  <img src="logo.png" alt="Logo de la empresa">
  <figcaption>Logo oficial de la empresa</figcaption>
</figure>

🏷️ ¿Qué son los atributos?

Los atributos proporcionan información adicional sobre un elemento HTML. Siempre van dentro de la etiqueta de apertura.

Atributos comunes

• src → ruta del archivo
• alt → texto alternativo (accesibilidad)
• title → información adicional
• id → identificador único
• class → clases CSS

<img src="foto.jpg" alt="Foto del producto" title="Producto en oferta">

♿ Importancia del atributo alt

El atributo alt es fundamental para:

• Usuarios con lectores de pantalla
• SEO (posicionamiento en buscadores)
• Casos donde la imagen no carga

✅ Buenas prácticas

• Usar <figure> solo cuando el contenido lo requiera
• Siempre incluir alt en imágenes
• Evitar atributos innecesarios
• Escribir descripciones claras y cortas

🎥 Video de la lección

Debes ver el video completo para desbloquear la siguiente lección.

📌 Resumen

• <figure> agrupa contenido visual
• <figcaption> describe la figura
• Los atributos aportan información clave
• El atributo alt es obligatorio y esencial

En la siguiente lección aprenderás sobre etiquetas complementarias en HTML5.