Manual completo de HTML5 y CSS moderno | Flexbox, Grid, Responsive, Variables

📘 HTML & CSS — Temas esenciales Guía visual

📄 1. HTML5 semántico y estructura moderna

HTML5 introduce etiquetas semánticas que mejoran accesibilidad y SEO. Olvida los <div> sin sentido.

<header>Cabecera de la página</header>
<nav>Menú de navegación</nav>
<main>Contenido principal único</main>
<article>Artículo independiente</article>
<section>Agrupación temática</section>
<aside>Contenido lateral (sidebar)</aside>
<footer>Pie de página</footer>

✅ Buenas prácticas actuales: Usar <meta charset="UTF-8">, viewport para móviles, y atributos alt en imágenes.

🔹 ¿Por qué usar HTML semántico? Mejora la accesibilidad (screen readers), SEO y hace el código más mantenible. Las etiquetas semánticas definen propósito: <header> para la cabecera, <nav> para navegación, <main> para el contenido principal, <article> para contenidos independientes y <aside> para información complementaria.

🔹 Encabezados y estructura: Usa jerarquía correcta (<h1> → <h2> → <h3>) para ayudar a motores de búsqueda y lectores de pantalla. No saltes niveles y mantén títulos descriptivos.

🔹 Formularios accesibles: Etiqueta cada campo con <label for="id">, usa atributos type, required y aria-* cuando sea necesario. Valida en cliente y servidor.

🔹 Buenas prácticas: Evita atributos inline para estilos, usa archivos separados cuando el proyecto crezca, y añade metadatos (description, viewport, lang) en el <head>.

⚡ DESAFÍOS Día 1 — HTML semántico

📌 Desafío 1.1: Crea la estructura básica de un blog personal usando: <header>, <nav>, <main>, <article>, <footer>. Agrega un título y un menú con 3 enlaces ficticios.

<!DOCTYPE html>
<html>
<head><title>Mi Blog</title></head>
<body>
    <header><h1>Blog semántico</h1></header>
    <nav><a href="#">Inicio</a> <a href="#">Artículos</a> <a href="#">Contacto</a></nav>
    <main>
        <article><h2>Mi primer post</h2><p>Contenido del artículo...</p></article>
    </main>
    <footer>© 2025 Mi Blog</footer>
</body>
</html>

📌 Desafío 1.2: Añade roles ARIA a la estructura del blog (nav, main, banner) y un atributo lang correcto. Haz un pequeño ejemplo.

<header role="banner">...</header>
<nav role="navigation">...</nav>
<main role="main" lang="es">...</main>

📌 Desafío 1.3: Crea un pequeño formulario de contacto semántico con etiquetas asociadas (label + input) y validación HTML básica (required, type=email).

<form>
    <label>Nombre<input required></label>
    <label>Email<input type="email" required></label>
    <button type="submit">Enviar</button>
</form>

📌 Desafío 1.4: Estructura un artículo con encabezados correctos (h1..h3), una lista y una figura con caption.

<article>
    <h1>Título</h1>
    <h2>Subtítulo</h2>
    <figure><img src="#" alt=""><figcaption>Pie</figcaption></figure>
    <ul><li>Punto 1</li><li>Punto 2</li></ul>
</article>

🎨 2. CSS moderno: Variables, Box Model y reset

Las variables CSS (custom properties) permiten temas dinámicos y código reutilizable.

:root {
    --primary: #2563eb;
    --spacing: 1rem;
}
.btn {
    background: var(--primary);
    padding: var(--spacing);
}

🔁 Reset recomendado: * { margin:0; padding:0; box-sizing: border-box; }

🔹 Variables CSS: Las custom properties (`--nombre`) permiten cambiar temas en cascada y definir valores reutilizables. Son dinámicas y se pueden actualizar desde JS o mediante clases.

🔹 Box model y tamaño: Entiende `content`, `padding`, `border` y `margin`. Usa `box-sizing: border-box` para que el padding no aumente el ancho total del elemento.

🔹 Especificidad y mantenimiento: Evita reglas demasiado específicas; prefiere clases reutilizables. Usa un sistema de nomenclatura (BEM o similar) para componentes grandes.

🔹 Rendimiento: evita selectores costosos (como `div > *`) a gran escala; prefiere clases y reduce repaints usando transform/opacity para animaciones.

⚡ DESAFÍOS Día 2 — Variables CSS

📌 Desafío 2.1: Define un tema claro y oscuro usando variables: colores de fondo y texto. Crea un botón que alterne clase (solo CSS con preferencia, o escribe el CSS básico). Muestra cómo se aplican.

:root { --bg: white; --text: black; }
.dark { --bg: #1e293b; --text: #f1f5f9; }
body { background: var(--bg); color: var(--text); }

📌 Desafío 2.2: Crea variables para espaciado y tipografía y úsalas en un header y un párrafo.

:root{--space:1rem;--fs:16px}
.header{padding:var(--space);font-size:calc(var(--fs)*1.5)}

📌 Desafío 2.3: Implementa un tema dinámico usando la preferencia `prefers-color-scheme` y variables CSS.

@media (prefers-color-scheme: dark){:root{--bg:#0f172a;--text:#f1f5f9}}

📌 Desafío 2.4: Muestra cómo sobrescribir variables para un componente concreto (ej. .card) sin afectar el resto.

.card{--bg:#fff;background:var(--bg);padding:1rem;border-radius:8px}

🏁 11. Proyecta integrador HTML + CSS

🔧 Proyecta integrador HTML + CSS — Desafío único

📌 Desafío 11.1: Crea la estructura base de una landing simple que incluya: header con navegación (Flex), sección hero con título y subtítulo, y una rejilla de 3 tarjetas de servicios (Grid). Añade clases y comentarios HTML.

<!-- Estructura base: header, hero, services, footer -->
<header class="site-header">
  <nav class="nav"><a href="#">Inicio</a> <a href="#">Servicios</a> <a href="#">Contacto</a></nav>
</header>

<section class="hero">
  <h1>Título de la landing</h1>
  <p>Subtítulo y llamada a la acción</p>
</section>

<section class="services">
  <div class="card">Servicio 1</div>
  <div class="card">Servicio 2</div>
  <div class="card">Servicio 3</div>
</section>

<footer class="site-footer">Pie de página</footer>

<!-- CSS sugerido: .nav {display:flex;gap:16px} .hero {display:grid;place-items:center} .services {display:grid;grid-template-columns:repeat(3,1fr);gap:16px} -->

🌐 Manual completo de HTML5 + CSS moderno

📄 1. HTML5 semántico y estructura moderna

🎨 2. CSS moderno: Variables, Box Model y reset

🏁 11. Proyecta integrador HTML + CSS