✨

Qué aprenderás

Este recurso te lleva de lo básico a lo sólido en HTML5: cómo estructurar documentos, etiquetar con sentido, crear formularios accesibles y añadir contenido multimedia con buenas prácticas de rendimiento y SEO.

  • 🎯
    Usar etiquetas semánticas para significado, no para apariencia.
  • ✅
    Diseñar formularios con validación nativa y mensajes claros.
  • 🎵
    Incrustar audio/video con controles y alternativas.
  • 🦾
    Mejorar accesibilidad con atributos ARIA solo cuando sea necesario.
  • 📈
    Optimizar metadatos, headings y estructura para SEO.
Progreso del curso
🏗️

Semántica: estructura que se entiende

Las etiquetas semánticas ayudan a lectores de pantalla, buscadores y a tu equipo. Úsalas para describir la intención del contenido.

🏛️ Landmarks

  • <header>, <nav>, <main>, <aside>, <footer>
  • <article> (contenido independiente) y <section> (agrupación temática)
  • Un único <h1> por página; jerarquía h2–h6 sin saltos arbitrarios
💻 Ejemplo mínimo semántico ▼ 
<header>
  <h1>Guía de HTML5</h1>
  <nav aria-label="principal">...</nav>
</header>
<main>
  <article>
    <h2>Semántica</h2>
    <p>Contenido...</p>
  </article>
</main>
<footer>© Tu sitio</footer>
♿

Accesibilidad: primero las personas

🖼️

Imágenes

Texto alternativo descriptivo o vacío cuando la imagen es decorativa

🎛️

Controles

Usa <button> y no <div> clicables

🎯

Foco

Estados de foco visibles (no los desactives)

📋

Navegación

Orden lógico de encabezados y navegación por teclado

🎨

Animaciones

Opcionales con prefers-reduced-motion

📝

Formularios HTML5

Aprovecha tipos y validación nativa para mejorar UX sin JS extra.

⚡ Patrón recomendado ▼ 
<form novalidate>
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required 
         autocomplete="email" inputmode="email">

  <label for="fecha">Fecha del evento</label>
  <input id="fecha" name="fecha" type="date" required>

  <button type="submit">Enviar</button>
</form>
💡

Usa aria-invalid y mensajes de error asociados con aria-describedby cuando personalices la validación.

🎬

Multimedia con alternativas

🖼️ Imágenes optimizadas 

<figure>
  <img src="/ruta/poster.webp" 
       alt="Ejemplo de maquetación" 
       width="1200" height="675">
  <figcaption>Imagen con texto alternativo y dimensiones fijas.</figcaption>
</figure>

🎥 Video responsivo 

<video controls preload="metadata" poster="/ruta/poster.jpg">
  <source src="/ruta/demo.webm" type="video/webm">
  <source src="/ruta/demo.mp4" type="video/mp4">
  Tu navegador no soporta video HTML5.
</video>
🔍

SEO On-Page (con HTML)

✅
Un solo <h1> descriptivo por documento
✅
Usa listas y tablas solo cuando representen listas y datos tabulares
✅
Enlaces con texto significativo (evita "haz clic aquí")
⏳
Metadatos en el <head> (este bloque no los incluye por ser embebido en WP)
📱

Responsive y tipografía

La legibilidad manda: tamaño base entre 16–18px, alturas de línea 1.5–1.7 y contenido en columnas fluidas.

📐

Dimensiones

Imágenes con ancho máximo 100% y alturas automáticas

🔤

Texto

Evita textos en imágenes para mantener accesibilidad y nitidez

📏

Unidades

Usa unidades relativas (rem, %) en lugar de px fijos

⚡

APIs útiles del ecosistema HTML5

👁️ Intersection Observer
💾 Local Storage
📢 Dialog Element
🌐 Fetch
👁️ Ejemplo: Intersection Observer para realzar secciones ▼ 
<script>
const io = new IntersectionObserver((entries)=>{
  entries.forEach(e => e.target.classList.toggle('in-view', e.isIntersecting));
}, {threshold: 0.2});

document.querySelectorAll('.card').forEach(c => io.observe(c));
</script>