HTML5 y CSS3 para la web: estructura, semántica y diseño

Estándares Web

La web funciona porque todos los navegadores, servidores y dispositivos hablan el mismo idioma. Ese idioma lo definen los estándares web: especificaciones técnicas abiertas y públicas que garantizan que una página creada hoy se pueda ver correctamente en Chrome, Firefox, Safari o Edge, en un ordenador o en un móvil, ahora y dentro de diez años.

Organismos de Estandarización

Organismo	Nombre completo	Tecnologías que gestiona
W3C	World Wide Web Consortium	HTML, CSS, XML, SVG, accesibilidad (WCAG)
WHATWG	Web Hypertext Application Technology Working Group	HTML Living Standard (el HTML5 moderno)
ECMA	European Computer Manufacturers Association	ECMAScript (JavaScript), JSON
IETF	Internet Engineering Task Force	HTTP, HTTPS, URL, protocolos de red

Clasificación de Tecnologías Web

Estructura

HTML describe qué es cada parte del contenido: títulos, párrafos, listas, enlaces, imágenes. Es el esqueleto.

Presentación

CSS define el aspecto visual: colores, fuentes, tamaños, espaciado, animaciones. Es la piel.

Comportamiento

JavaScript aporta interactividad y lógica: eventos, validaciones, peticiones. Es el músculo.

HTML

HTML (HyperText Markup Language) es el lenguaje de marcas estándar para estructurar y dar significado al contenido de las páginas web. Todo lo que un navegador muestra está construido sobre HTML: textos, imágenes, formularios, vídeos, tablas y la propia estructura de la página.

Estructura Básica de un Documento

Todo documento HTML bien formado sigue una estructura fija compuesta por cuatro partes fundamentales. Veamos cada una:

estructura-basica.html
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi primera página</title>
    <link rel="stylesheet" href="estilos.css">
  </head>
  <body>
    <h1>Hola, mundo</h1>
    <p>Este es mi primer documento HTML.</p>
  </body>
</html>

DOCTYPE

La declaración <!DOCTYPE html> no es una etiqueta HTML, sino una instrucción al navegador indicando qué versión del estándar usar. En HTML5 se simplificó a esta forma mínima. Debe ser siempre la primera línea del documento.

Elemento raíz <html>

Envuelve todo el documento. El atributo lang es importante: indica el idioma principal del contenido, lo que mejora la accesibilidad (lectores de pantalla) y el SEO.

Cabecera <head>

Contiene metadatos del documento que el navegador necesita pero el usuario no ve directamente: la codificación de caracteres, el título de la pestaña, las hojas de estilo, las fuentes y los metadatos para buscadores y redes sociales.

Cuerpo <body>

Todo lo que va dentro de <body> es lo que el usuario ve en el navegador: textos, imágenes, enlaces, formularios y la estructura visual de la página.

Etiquetas Estructurales

HTML5 introdujo etiquetas semánticas para describir la función de cada sección de la página. Antes de HTML5, todo era un <div>. Ahora el navegador, los buscadores y los lectores de pantalla entienden qué es cada parte:

Vista previa — estructura semántica

<header> — Encabezado: logo, título, menú principal

<nav> — Barra de navegación (enlaces a secciones)

<main>

<article> — Contenido principal autónomo

<section> — Sección temática

<aside>
Barra lateral, anuncios, info extra

<footer> — Pie: copyright, contacto, enlaces legales

Etiqueta	Significado semántico	Uso típico
<header>	Encabezado de página o sección	Logo, título, menú principal
<nav>	Bloque de navegación	Menús, migas de pan, paginación
<main>	Contenido principal único de la página	Solo puede haber uno por página
<article>	Contenido autónomo y reutilizable	Entradas de blog, noticias, tarjetas
<section>	Sección temática con cabecera	Capítulos, bloques de contenido
<aside>	Contenido relacionado pero secundario	Barra lateral, publicidad, tips
<footer>	Pie de página o sección	Copyright, contacto, sitemap
<div>	Contenedor genérico sin semántica	Solo cuando ninguna etiqueta semántica encaja
<span>	Contenedor inline sin semántica	Para aplicar estilos a fragmentos de texto

¿Por qué importa la semántica?

Usar <article> en lugar de <div class="articulo"> no es solo estética: Google lee las etiquetas semánticas para entender tu página y posicionarla mejor. Los lectores de pantalla permiten a personas ciegas navegar directamente a la <nav> o al <main>. El código es más mantenible. Los tres motivos juntos hacen que la semántica sea obligatoriaen desarrollo profesional.

Etiquetas de Texto

Las etiquetas de texto son las más usadas en HTML. No todas son iguales: algunas tienen significado semántico (describen qué es el contenido) y otras son puramente visuales (solo cambian la apariencia). En HTML moderno se prefieren siempre las semánticas.

Encabezados: <h1> — <h6>

Los encabezados crean la jerarquía de contenidos. Solo debe existir un <h1> por página (el título principal). Los motores de búsqueda los usan para indexar el contenido.

Vista previa — jerarquía de encabezados

h1 — Título principal de la página

h2 — Sección principal

h3 — Subsección

h4 — Apartado dentro de una subsección

h5 — Nivel de detalle avanzado

h6 — Nivel más bajo de jerarquía

Formato y semántica de texto

Vista previa — etiquetas de formato

<p>

Este es un párrafo normal. Es el bloque de texto más básico.

<strong>Texto de gran importancia — semántico, negrita por defecto

<em>Texto con énfasis — semántico, cursiva por defecto

<b>Texto en negrita — solo visual, sin semántica extra

<i>Texto en cursiva — solo visual (o términos técnicos/extranjeros)

<u>Texto subrayado — úsalo con cuidado (se confunde con enlace)

<mark>Texto resaltado — como un rotulador amarillo

<del>~~Texto eliminado~~ — precio tachado, cambio de contenido

<ins>Texto insertado — contrario de <del>

<small>Texto pequeño — letra pequeña legal, notas al pie

<sup><sub>x² + H₂O — superíndice y subíndice

<code>console.log("hola") — fragmento de código inline

"La web es para todos." — Tim Berners-Lee

<pre>

function hola() {
  return "Mantiene los espacios y saltos";
}

Semántica vs. presentación en texto

Prefiere siempre <strong> sobre <b> y <em> sobre <i> cuando el énfasis tenga significado real. Un lector de pantalla pronunciará <strong> con énfasis; <b> lo ignorará.

Enlaces e Imágenes

Los enlaces con <a> son el tejido de la web: conectan páginas entre sí. Las imágenes con <img> son elementos vacíos (sin etiqueta de cierre).

Vista previa — enlaces

href absolutoEnlace a página externa (abre en misma pestaña)

target="_blank"Enlace que abre en pestaña nueva ↗

href="#seccion"Enlace ancla — salta a un id dentro de la misma página

href="mailto:"Abre el cliente de correo: ejemplo@mail.com

href="tel:"En móvil: llama al +34 600 000 000

enlaces-imagenes.html
<!-- Enlace externo en nueva pestaña -->
<a href="https://www.w3.org" target="_blank" rel="noopener noreferrer">
  W3C — Consorcio Web
</a>

<!-- Enlace a sección de la misma página -->
<a href="#contacto">Ir a contacto</a>
<section id="contacto">...</section>

<!-- Imagen con atributos obligatorios -->
<img
  src="foto-perfil.jpg"
  alt="Foto de perfil de Ana García, desarrolladora web"
  width="300"
  height="200"
  loading="lazy"
/>

<!-- Imagen con enlace -->
<a href="https://ejemplo.com">
  <img src="logo.png" alt="Logo de Ejemplo Corp." width="120">
</a>

<!-- Figura con pie de foto (semántico) -->
<figure>
  <img src="grafico-ventas.png" alt="Gráfico de ventas del primer trimestre">
  <figcaption>Fig. 1 — Evolución de ventas Q1 2024</figcaption>
</figure>

El atributo alt es obligatorio y crítico

El atributo alt de <img> no es opcional en la práctica: si la imagen no carga, el usuario ve el texto alternativo. Los motores de búsqueda indexan el contenido del alt para el SEO de imágenes. Los lectores de pantalla lo leen en voz alta para usuarios con discapacidad visual. Si una imagen es puramente decorativa, usa alt="" (vacío).

Listas y Tablas

HTML ofrece tres tipos de listas y un sistema completo para representar datos tabulares. Las tablas deben usarse solo para datos, nunca para maquetar la página (para eso está CSS Flexbox/Grid).

Vista previa — los tres tipos de lista

<ul> — Sin orden

HTML
CSS
JavaScript

Uso: ingredientes, características, opciones

<ol> — Ordenada

Diseñar
Programar
Probar

Uso: pasos, rankings, instrucciones

<dl> — Definición

HTML: Estructura web
CSS: Estilos visuales

Uso: glosarios, términos técnicos

Vista previa — tabla HTML semántica

<caption> — Leyenda de la tabla (mejora accesibilidad)
<th> Lenguaje	<th> Tipo	<th> Año
HTML	Marcas	1991
CSS	Estilos	1996
JavaScript	Programación	1995
<tfoot> — Pie de tabla: totales, notas al pie

Estructura: <table> > <thead> + <tbody> + <tfoot> > <tr> > <th> / <td>

tabla-completa.html
<table>
  <caption>Comparativa de tecnologías web</caption>

  <!-- Encabezado de la tabla -->
  <thead>
    <tr>
      <th scope="col">Lenguaje</th>
      <th scope="col">Tipo</th>
      <th scope="col">Año</th>
    </tr>
  </thead>

  <!-- Cuerpo de datos -->
  <tbody>
    <tr>
      <td>HTML</td>
      <td>Marcas</td>
      <td>1991</td>
    </tr>
    <tr>
      <!-- colspan: fusionar columnas horizontalmente -->
      <td colspan="2">CSS + JavaScript</td>
      <td>1995–96</td>
    </tr>
  </tbody>

  <!-- Pie de la tabla -->
  <tfoot>
    <tr>
      <td colspan="3">Fuente: MDN Web Docs</td>
    </tr>
  </tfoot>
</table>

Formularios

Los formularios permiten al usuario enviar información al servidor. La etiqueta <form> agrupa los controles y define cómo y dónde se envían los datos. Cada control debe tener un <label> asociado para accesibilidad.

Vista previa — controles de formulario

<input type="checkbox"> HTML CSS JavaScript

<input type="radio"> Principiante Intermedio Avanzado

formulario-completo.html
<form action="/registrar" method="POST" novalidate>
  <fieldset>
    <legend>Datos personales</legend>

    <!-- label for + input id: vinculan el texto con el control -->
    <label for="nombre">Nombre completo *</label>
    <input
      type="text"
      id="nombre"
      name="nombre"
      placeholder="Ej: Ana García"
      required
      minlength="3"
      maxlength="100"
      autocomplete="name"
    />

    <label for="email">Correo electrónico *</label>
    <input type="email" id="email" name="email" required />

    <label for="nivel">Nivel de experiencia</label>
    <select id="nivel" name="nivel">
      <option value="">-- Selecciona --</option>
      <option value="junior">Junior</option>
      <option value="mid">Mid</option>
      <option value="senior">Senior</option>
    </select>

    <label for="bio">Presentación</label>
    <textarea id="bio" name="bio" rows="4" maxlength="500"></textarea>

    <!-- Grupo de checkboxes relacionados -->
    <fieldset>
      <legend>Tecnologías que conoces</legend>
      <label><input type="checkbox" name="tec" value="html"> HTML</label>
      <label><input type="checkbox" name="tec" value="css"> CSS</label>
      <label><input type="checkbox" name="tec" value="js"> JavaScript</label>
    </fieldset>
  </fieldset>

  <button type="submit">Registrarse</button>
  <button type="reset">Limpiar</button>
</form>

Atributos clave de los controles de formulario

required — el campo es obligatorio (validación nativa del navegador)
placeholder — texto de ejemplo dentro del campo (desaparece al escribir)
name — identifica el dato al enviarlo al servidor (indispensable)
id — vincula el control con su <label for="...">
autocomplete — ayuda al navegador a autocompletar correctamente
disabled / readonly — deshabilita o bloquea el campo

Atributos Globales

Los atributos globales son los que puede recibir cualquier etiqueta HTML, independientemente de su tipo. Son la base sobre la que trabajan CSS y JavaScript.

Atributo	Descripción	Ejemplo
id	Identificador único en el documento	<div id="menu-principal">
class	Una o varias clases para CSS/JS	<p class="destacado grande">
style	Estilos CSS inline (evitar en prod.)	<h1 style="color: red">
title	Tooltip al pasar el ratón	<abbr title="HyperText Markup">HTML</abbr>
lang	Idioma del elemento	<p lang="en">Hello world</p>
hidden	Oculta el elemento del documento	<div hidden>No visible</div>
tabindex	Orden de tabulación con el teclado	<button tabindex="1">
contenteditable	Permite editar el contenido	<div contenteditable="true">
draggable	Permite arrastrar el elemento	<img draggable="true">
data-*	Atributos personalizados para JS	<div data-id="42" data-tipo="admin">
aria-*	Accesibilidad para lectores de pantalla	<button aria-label="Cerrar">

Learn HTML – Full Tutorial for Beginners — freeCodeCamp.org — youtube.com/watch?v=kUMe1FH4CHE

Multimedia en HTML

Antes de HTML5 incrustar vídeo o audio requería plugins externos como Flash o Silverlight. HTML5 incorporó soporte nativo para multimedia directamente en el navegador, sin dependencias externas y con una API JavaScript completa para controlarlo.

El elemento <video>

<video> incrusta reproductores de vídeo nativos. El navegador mostrará los controles propios del sistema operativo o los personalizados con CSS y JS. Se pueden incluir varias fuentes con <source> para compatibilidad entre navegadores, ya que no todos soportan los mismos formatos.

Atributos del elemento <video>

Atributo	Valor	Efecto
controls	booleano	Muestra los controles nativos (play, volumen, progreso)
autoplay	booleano	Reproduce automáticamente al cargar (requiere muted)
muted	booleano	Silencia el vídeo (necesario para autoplay)
loop	booleano	Repite el vídeo indefinidamente
poster	URL	Imagen de portada antes de reproducir
preload	none / metadata / auto	Controla cuánto se descarga antes de reproducir
width / height	píxeles	Dimensiones del reproductor
playsinline	booleano	En iOS: reproduce dentro de la página, no a pantalla completa

video.html
<!-- Vídeo básico con controles -->
<video controls width="640" height="360" poster="portada.jpg">
  <!-- source: múltiples formatos para compatibilidad -->
  <source src="video.mp4"  type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogv"  type="video/ogg">

  <!-- Fallback si el navegador no soporta <video> -->
  <p>Tu navegador no soporta vídeo HTML5.
     <a href="video.mp4">Descarga el vídeo aquí</a>.
  </p>
</video>

<!-- Vídeo de fondo (autoreproducido, silenciado, en bucle) -->
<video autoplay muted loop playsinline
       class="video-fondo"
       aria-hidden="true">
  <source src="fondo.mp4" type="video/mp4">
</video>

<!-- Formato recomendado por compatibilidad -->
<!-- MP4 (H.264): máxima compatibilidad (Chrome, Firefox, Safari, Edge) -->
<!-- WebM (VP9):  mejor compresión, todos excepto Safari antiguo -->
<!-- OGV:         solo necesario para Firefox muy antiguo (ya innecesario) -->

El elemento <audio>

<audio> funciona igual que<video> pero para sonido. Sin el atributo controls el reproductor es invisible (útil para efectos de sonido controlados por JavaScript).

audio.html
<!-- Reproductor de audio con controles visibles -->
<audio controls>
  <source src="musica.mp3"  type="audio/mpeg">
  <source src="musica.ogg"  type="audio/ogg">
  <source src="musica.wav"  type="audio/wav">
  <p>Tu navegador no soporta audio HTML5.</p>
</audio>

<!-- Audio de fondo sin controles (gestionado por JS) -->
<audio id="sonido-notificacion" preload="auto">
  <source src="notif.mp3" type="audio/mpeg">
</audio>

<script>
  // Reproducir con JavaScript
  document.getElementById('sonido-notificacion').play();
</script>

<!-- Formatos de audio:
  MP3  → Máxima compatibilidad
  OGG  → Open source, buena compresión
  WAV  → Sin compresión, alta calidad, archivos grandes
  AAC  → Mejor calidad que MP3 al mismo bitrate (Safari lo prefiere) -->

Vista previa — reproductor de audio nativo

Así se ve un <audio controls> real en el navegador

El elemento <iframe>

<iframe> (inline frame) incrusta un documento web completo dentro de otro. Se usa habitualmente para incrustar mapas de Google, vídeos de YouTube, tweets, widgets de pago o cualquier contenido externo.

iframe.html
<!-- Incrustar un vídeo de YouTube -->
<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="Vídeo de YouTube: nombre descriptivo"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
  loading="lazy">
</iframe>

<!-- Incrustar un mapa de Google Maps -->
<iframe
  src="https://www.google.com/maps/embed?pb=..."
  width="600"
  height="450"
  style="border:0"
  allowfullscreen=""
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
  title="Ubicación de la oficina en Madrid">
</iframe>

<!-- SEGURIDAD: atributo sandbox -->
<!-- Restringe lo que el iframe puede hacer -->
<iframe
  src="https://externo.com/widget"
  sandbox="allow-scripts allow-same-origin"
  title="Widget externo seguro">
  <!-- Sin sandbox: el iframe tiene pleno acceso -->
  <!-- allow-scripts: puede ejecutar JS -->
  <!-- allow-forms: puede enviar formularios -->
  <!-- allow-popups: puede abrir ventanas -->
  <!-- allow-same-origin: trata la URL como su mismo origen -->
</iframe>

Seguridad con iframes externos

Nunca incrustes iframes de fuentes desconocidas sin el atributo sandbox. Un iframe malicioso puede ejecutar JavaScript en el contexto de tu página, redirigir al usuario o intentar robar información. Siempre añade el atributo title para accesibilidad.

Imágenes Responsivas: <picture> y srcset

Para que las imágenes sean eficientes en pantallas de distintos tamaños y resoluciones, HTML5 ofrece srcset y el elemento<picture>. El navegador selecciona automáticamente la imagen más adecuada según el dispositivo.

imagenes-responsivas.html
<!-- srcset: el navegador elige la imagen según el pixel density -->
<img
  src="foto-800.jpg"           <!-- fallback para navegadores sin srcset -->
  srcset="
    foto-400.jpg  400w,         <!-- imagen de 400px de ancho -->
    foto-800.jpg  800w,         <!-- imagen de 800px de ancho -->
    foto-1200.jpg 1200w,        <!-- imagen de 1200px de ancho -->
    foto-2400.jpg 2400w         <!-- imagen para pantallas Retina -->
  "
  sizes="
    (max-width: 600px) 100vw,   <!-- en móvil ocupa todo el ancho -->
    (max-width: 900px) 50vw,    <!-- en tablet ocupa la mitad -->
    33vw                        <!-- en escritorio ocupa un tercio -->
  "
  alt="Fotografía del producto desde el frente"
  loading="lazy"
/>

<!-- <picture>: control total sobre qué imagen se carga -->
<picture>
  <!-- Formato WebP para navegadores modernos (mejor compresión) -->
  <source
    srcset="foto.webp"
    type="image/webp">

  <!-- AVIF para navegadores muy modernos (aún mejor compresión) -->
  <source
    srcset="foto.avif"
    type="image/avif"
    media="(min-width: 800px)">

  <!-- Fallback JPEG universal -->
  <img src="foto.jpg" alt="Descripción de la imagen" width="800" height="600">
</picture>

Elementos HTML5 Avanzados

HTML5 introdujo una serie de elementos de interfaz nativos que antes requerían JavaScript o librerías externas. Son accesibles, semánticos y funcionan sin código adicional en la mayoría de casos.

Acordeón nativo: <details> y <summary>

El elemento <details> crea un widget desplegable sin necesidad de JavaScript. <summary> es el título visible que el usuario puede clicar.

Vista previa — <details> interactivo

¿Qué es HTML?▾

HTML (HyperText Markup Language) es el lenguaje estándar para crear páginas web. Define la estructura y el contenido de los documentos mediante etiquetas.

¿Cuál es la diferencia entre HTML y CSS?▾

HTML define qué es cada parte del contenido (estructura), mientras que CSS define cómo se ve (presentación). Son complementarios y siempre trabajan juntos.

¿Qué aporta JavaScript? (abierto por defecto con open)▴

JavaScript añade interactividad, lógica y comportamiento dinámico a las páginas web. Es el único lenguaje de programación que los navegadores ejecutan de forma nativa.

Haz clic en los títulos — funciona sin JavaScript

details-summary.html
<!-- FAQ / acordeón completamente sin JavaScript -->
<details>
  <summary>¿Qué es HTML?</summary>
  <p>HTML es el lenguaje de marcas estándar para estructurar páginas web.</p>
</details>

<!-- Abierto por defecto con el atributo open -->
<details open>
  <summary>Sección expandida al cargar</summary>
  <p>Este contenido es visible desde el principio.</p>
</details>

<!-- Agrupados forman un acordeón accesible sin JS -->
<details name="faq">
  <summary>Pregunta 1</summary>
  <p>Respuesta 1...</p>
</details>
<details name="faq">
  <summary>Pregunta 2</summary>
  <p>Respuesta 2...</p>
</details>
<!-- Con el mismo name, solo uno puede estar abierto a la vez (HTML 2024) -->

Modal nativo: <dialog>

El elemento <dialog> es un modal o diálogo nativo del navegador. Gestiona automáticamente el foco, la capa backdrop y la accesibilidad.

dialog.html
<!-- El diálogo empieza oculto por defecto -->
<dialog id="mi-modal">
  <h2>Confirmar acción</h2>
  <p>¿Estás seguro de que quieres eliminar este elemento?</p>
  <form method="dialog">  <!-- method="dialog" cierra el diálogo -->
    <button value="cancelar">Cancelar</button>
    <button value="confirmar">Sí, eliminar</button>
  </form>
</dialog>

<button onclick="document.getElementById('mi-modal').showModal()">
  Abrir modal
</button>

<script>
  const modal = document.getElementById('mi-modal');

  // showModal(): modal bloqueante con backdrop oscuro
  // show():      no bloqueante, sin backdrop

  modal.addEventListener('close', () => {
    console.log('El usuario eligió:', modal.returnValue);
    // returnValue = el 'value' del botón que cerró el modal
  });
</script>

<!-- CSS para el backdrop del dialog -->
<style>
  dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
  }
  dialog {
    border-radius: 12px;
    border: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    padding: 2rem;
  }
</style>

Indicadores de progreso: <progress> y <meter>

Vista previa — <progress> y <meter>

<progress value="65" max="100">— tarea en progreso (carga, descarga, proceso)

<progress> sin value — progreso indeterminado (animación de espera)

<meter value="0.7" optimum="0.8" high="0.9">— medida con rangos óptimos (uso de disco, nota, puntuación)

progress-meter.html
<!-- progress: tarea con progreso conocido -->
<label for="descarga">Descargando archivo:</label>
<progress id="descarga" value="65" max="100">65%</progress>
<!-- El texto dentro es el fallback para navegadores sin soporte -->

<!-- progress indeterminado (sin value): animación de espera -->
<progress>Cargando...</progress>

<!-- meter: medición dentro de un rango con zonas óptimas -->
<label for="almacenamiento">Uso del disco duro:</label>
<meter
  id="almacenamiento"
  value="85"      <!-- valor actual -->
  min="0"         <!-- mínimo posible -->
  max="100"       <!-- máximo posible -->
  low="60"        <!-- a partir de aquí empieza la zona "baja" -->
  high="80"       <!-- a partir de aquí empieza la zona "alta" -->
  optimum="40"    <!-- valor óptimo (determina qué zona es "buena") -->
>85%</meter>
<!-- Con optimum=40 (zona baja): bajo=verde, medio=amarillo, alto=rojo -->

Autocompletado nativo: <datalist>

<datalist> conecta un campo de texto con una lista de sugerencias. A diferencia de <select>, el usuario puede escribir libremente; las opciones son sugerencias, no restricciones.

Vista previa — <datalist> con sugerencias

Ciudad de nacimiento:

Escribe "Ma" para ver las sugerencias filtradas

datalist.html
<!-- input + datalist: el atributo list conecta ambos -->
<label for="ciudad">Ciudad:</label>
<input
  type="text"
  id="ciudad"
  list="ciudades"  <!-- debe coincidir con el id del datalist -->
  placeholder="Escribe o selecciona..."
  autocomplete="off"
/>

<datalist id="ciudades">
  <option value="Madrid">
  <option value="Barcelona">
  <option value="Valencia">
  <option value="Sevilla">
  <option value="Bilbao">
</datalist>

<!-- También funciona con inputs de tipo number, color, date...  -->
<input type="range" min="0" max="100" list="marcas-rango">
<datalist id="marcas-rango">
  <option value="0">Mínimo</option>
  <option value="25">Bajo</option>
  <option value="50">Medio</option>
  <option value="75">Alto</option>
  <option value="100">Máximo</option>
</datalist>

Resultado de cálculo: <output>

output.html
<!-- output muestra el resultado de un cálculo de formulario -->
<form oninput="resultado.value = Number(precio.value) * Number(cantidad.value)">
  <label for="precio">Precio por unidad (€):</label>
  <input type="number" id="precio" name="precio" value="10" min="0">

  <label for="cantidad">Cantidad:</label>
  <input type="number" id="cantidad" name="cantidad" value="1" min="1">

  <label for="resultado">Total:</label>
  <output id="resultado" name="resultado" for="precio cantidad">
    10
  </output> €
</form>
<!-- El atributo 'for' vincula el output con los inputs que usa -->

Gráficos: <canvas> y SVG inline

Para gráficos y visualizaciones, HTML5 ofrece dos enfoques radicalmente distintos:

<canvas> — Mapa de bits

Lienzo en blanco controlado 100% por JavaScript. Dibuja píxel a píxel. Ideal para juegos, gráficas con Chart.js, efectos de partículas. No es accesible por defecto.

SVG inline — Vectorial

XML incrustado directamente en HTML. Vectorial, escalable sin pérdida, seleccionable, animable con CSS. Ideal para iconos, logos, gráficas estáticas y diagramas.

canvas-svg.html
<!-- Canvas: necesita JS para dibujar -->
<canvas id="mi-canvas" width="400" height="200">
  <!-- Fallback accesible -->
  Gráfica de barras mostrando ventas del Q1 2024
</canvas>
<script>
  const ctx = document.getElementById('mi-canvas').getContext('2d');
  // Dibuja un rectángulo con gradiente
  const grad = ctx.createLinearGradient(0, 0, 400, 0);
  grad.addColorStop(0, '#3b82f6');
  grad.addColorStop(1, '#8b5cf6');
  ctx.fillStyle = grad;
  ctx.fillRect(0, 0, 400, 200);
  ctx.fillStyle = 'white';
  ctx.font = 'bold 24px system-ui';
  ctx.fillText('¡Hola Canvas!', 120, 110);
</script>

<!-- SVG inline: XML directamente en el HTML -->
<svg
  xmlns="http://www.w3.org/2000/svg"
  width="200" height="100"
  viewBox="0 0 200 100"
  role="img"
  aria-label="Círculo azul con texto">

  <circle cx="100" cy="50" r="45" fill="#3b82f6" />
  <text x="100" y="56" text-anchor="middle"
        fill="white" font-size="16" font-weight="bold">
    SVG
  </text>
</svg>

La Cabecera HTML Avanzada

La etiqueta <head> es invisible para el usuario pero fundamental para los buscadores, las redes sociales, los navegadores y el rendimiento. Un <head> bien configurado es la diferencia entre una página amateur y una profesional.

Meta tags esenciales

head-completo.html
<head>
  <!-- ── Obligatorios ── -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Título de la página | Nombre del sitio</title>

  <!-- ── SEO básico ── -->
  <meta name="description" content="Descripción concisa de 150-160 caracteres para los buscadores">
  <meta name="keywords" content="html, css, web, desarrollo">  <!-- obsoleto en Google -->
  <meta name="author" content="Ana García">
  <meta name="robots" content="index, follow">  <!-- o "noindex, nofollow" -->
  <link rel="canonical" href="https://misitio.com/pagina-actual">

  <!-- ── Open Graph (Facebook, LinkedIn, WhatsApp) ── -->
  <meta property="og:type"        content="website">
  <meta property="og:title"       content="Título para compartir en redes">
  <meta property="og:description" content="Descripción para redes sociales (150 chars)">
  <meta property="og:image"       content="https://misitio.com/imagen-og.jpg">
  <meta property="og:url"         content="https://misitio.com/pagina-actual">
  <meta property="og:locale"      content="es_ES">

  <!-- ── Twitter Cards ── -->
  <meta name="twitter:card"        content="summary_large_image">
  <meta name="twitter:title"       content="Título para Twitter">
  <meta name="twitter:description" content="Descripción para Twitter">
  <meta name="twitter:image"       content="https://misitio.com/imagen-twitter.jpg">
  <meta name="twitter:creator"     content="@tusername">

  <!-- ── Favicon y iconos de app ── -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  <link rel="icon" type="image/png"    href="/favicon-32.png" sizes="32x32">
  <link rel="apple-touch-icon"         href="/apple-icon-180.png">
  <link rel="manifest"                 href="/site.webmanifest">
  <meta name="theme-color"            content="#3b82f6">

  <!-- ── Rendimiento ── -->
  <!-- Precargar recursos críticos -->
  <link rel="preload" href="fuente-principal.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="hero.jpg" as="image">

  <!-- Preconectar a dominios externos antes de usarlos -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <!-- ── Hoja de estilos ── -->
  <link rel="stylesheet" href="estilos.css">
</head>

Vista previa — así se ve una tarjeta Open Graph en redes

misitio.com

Título para compartir en redes

Descripción concisa que aparece al compartir el enlace en Facebook, LinkedIn o WhatsApp.

Esta tarjeta se genera a partir de los meta tags og:*

¿Por qué importan los meta tags de Open Graph?

Cuando alguien comparte tu URL en WhatsApp, Twitter o LinkedIn, estas plataformas leen los meta tags og:* para mostrar una tarjeta previa. Sin ellos, se muestra solo la URL en texto plano, con mucho menos impacto. Las tarjetas con imagen generan hasta un 3 veces más clics según estudios de marketing digital.

Accesibilidad Web (a11y)

La accesibilidad web consiste en que todas las personas, independientemente de sus capacidades, puedan usar la web. Esto incluye personas con discapacidad visual, auditiva, motriz o cognitiva. En muchos países es un requisito legal(directiva europea 2016/2102, normativa WCAG 2.1).

✗ Inaccesible

<div onclick="comprar()">Comprar</div>

✗ Un usuario de teclado no puede activarlo

✗ Sin alt: un lector de pantalla dirá "imagen"

✗ "Haz clic aquí" no describe el destino

✓ Accesible

<button type="button" onclick="comprar()">Comprar</button>

✓ El botón es activable con Enter/Espacio

✓ El lector dice "Logo de TechShop"

<a href="/productos">Ver catálogo de productos</a>

✓ El destino queda claro sin contexto

Atributos ARIA

ARIA (Accessible Rich Internet Applications) es un conjunto de atributos que complementan el HTML con información semántica adicional para lectores de pantalla. La regla de oro: usa HTML semántico primero; ARIA solo cuando el HTML solo no sea suficiente.

aria.html
<!-- aria-label: nombre descriptivo cuando el texto visible no basta -->
<button aria-label="Cerrar menú de navegación" onclick="cerrarMenu()">
  ✕
</button>

<!-- aria-labelledby: usa el texto de otro elemento como nombre -->
<h2 id="titulo-form">Datos de contacto</h2>
<form aria-labelledby="titulo-form">...</form>

<!-- aria-describedby: descripción adicional -->
<input
  type="password"
  aria-describedby="ayuda-password"
  id="password">
<p id="ayuda-password">
  Mínimo 8 caracteres, una mayúscula y un número.
</p>

<!-- aria-hidden: ocultar elementos decorativos del árbol de accesibilidad -->
<span aria-hidden="true">🎉</span>
<p>¡Enhorabuena!</p>

<!-- aria-live: anunciar cambios dinámicos en voz alta -->
<div aria-live="polite" id="estado-formulario">
  <!-- El lector de pantalla leerá automáticamente lo que cambie aquí -->
</div>

<!-- aria-expanded: indica si un menú está abierto o cerrado -->
<button
  aria-expanded="false"
  aria-controls="menu-desplegable"
  onclick="toggleMenu(this)">
  Menú
</button>
<ul id="menu-desplegable" hidden>
  <li><a href="/">Inicio</a></li>
</ul>

<!-- role: asigna un rol semántico explícito -->
<div role="alert">Error: el email no es válido.</div>
<div role="navigation" aria-label="Menú de pie de página">...</div>
<div role="main">...</div>  <!-- equivale a <main> -->

Navegación por teclado y foco

Orden de tabulación con tabindex

Usa Tab para navegar — el botón con tabindex="-1" se salta

accesibilidad-completa.html
<!-- Orden de tabulación con tabindex -->
<button tabindex="1">Primero</button>
<button tabindex="2">Segundo</button>
<button tabindex="-1">Excluido del tabulado</button>
<button tabindex="0">Orden natural del DOM</button>

<!-- Skip link: permite a usuarios de teclado saltar al contenido principal -->
<!-- Visualmente oculto pero accesible con Tab -->
<a href="#main-content" class="skip-link">
  Saltar al contenido principal
</a>
<style>
  .skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px;
    z-index: 100;
  }
  .skip-link:focus {
    top: 0;  /* Aparece visible cuando recibe foco */
  }
</style>

<!-- Indicador de foco visible (obligatorio WCAG 2.1) -->
<style>
  /* NUNCA elimines el outline de foco sin reemplazarlo -->
  :focus {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
  }
  /* Esta regla solo aplica al teclado, no al ratón */
  :focus:not(:focus-visible) {
    outline: none;
  }
</style>

Las 4 pautas WCAG (Web Content Accessibility Guidelines)

El estándar internacional WCAG 2.1 organiza la accesibilidad en 4 principios recordados como POUR: Perceptible (el contenido debe ser perceptible por todos los sentidos), Operable (navegable con teclado, sin límites de tiempo), Understandable/Comprensible (texto claro, errores descriptivos) y Robusto (compatible con tecnologías asistivas actuales y futuras). Los niveles son A (mínimo), AA (estándar para webs públicas) y AAA (óptimo).

Atributos data-* y JavaScript

Los atributos data-* permiten almacenar información personalizada directamente en el HTML. JavaScript puede leerlos y modificarlos a través de la propiedad dataset. Son la forma correcta de pasar datos del servidor al cliente sin inventarse atributos.

data-attributes.html
<!-- Tarjeta de producto con datos para JavaScript -->
<article
  class="tarjeta-producto"
  data-id="42"
  data-nombre="Monitor UltraWide"
  data-precio="449.99"
  data-categoria="electronica"
  data-disponible="true">

  <h2>Monitor UltraWide Pro</h2>
  <p>449,99 €</p>
  <button class="btn-carrito" data-producto-id="42">
    Añadir al carrito
  </button>
</article>

<script>
  // Leer data attributes con dataset
  const tarjeta = document.querySelector('.tarjeta-producto');

  console.log(tarjeta.dataset.id);          // "42"
  console.log(tarjeta.dataset.nombre);      // "Monitor UltraWide"
  console.log(tarjeta.dataset.precio);      // "449.99"

  // data-producto-id → dataset.productoId (camelCase automático)
  const btn = document.querySelector('.btn-carrito');
  console.log(btn.dataset.productoId);      // "42"

  // Modificar
  tarjeta.dataset.disponible = "false";

  // Usar como selector CSS también
  // document.querySelectorAll('[data-categoria="electronica"]')

  // Ejemplo real: botón que añade al carrito
  btn.addEventListener('click', function() {
    const id     = this.dataset.productoId;
    const nombre = this.closest('[data-nombre]').dataset.nombre;
    const precio = parseFloat(this.closest('[data-precio]').dataset.precio);
    agregarAlCarrito({ id, nombre, precio });
  });
</script>

<!-- También se pueden usar en CSS -->
<style>
  [data-disponible="false"] {
    opacity: 0.5;
    pointer-events: none;
  }
  [data-categoria="electronica"]::before {
    content: "💻 ";
  }
</style>

HTML5: etiquetas de audio y video — iDESWEB UA — youtube.com/watch?v=coy5h2w5xUg

Versiones de HTML

Versión	Año	Características clave	Estado
HTML 4.01	1999	Primera versión madura. Frames (obsoleto), tablas para layout	Obsoleto
XHTML 1.0	2000	HTML reescrito como XML. Sintaxis estricta: todo en minúsculas, cierre obligatorio	Legacy
HTML5	2014	Etiquetas semánticas, canvas, video, audio, APIs web, formularios enriquecidos	Estándar actual
HTML Living Standard	2019–hoy	Evolución continua sin versiones fijas. Mantenido por WHATWG	Vigente

XHTML — Reglas estrictas

xhtml.html
<!-- XHTML: sintaxis estricta -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>XHTML</title>
</head>
<body>
  <!-- Todo en minúsculas, todo cerrado -->
  <p>Párrafo <strong>importante</strong></p>
  <img src="foto.jpg" alt="Foto" />
  <br />
</body>
</html>

HTML5 — Simplificado y potente

html5.html
<!-- HTML5: DOCTYPE mínimo -->
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>HTML5</title>
</head>
<body>
  <!-- Etiquetas semánticas nuevas -->
  <header><nav>...</nav></header>
  <main>
    <article>...</article>
    <aside>...</aside>
  </main>
  <!-- Audio y vídeo nativo -->
  <video src="clip.mp4" controls></video>
  <footer>...</footer>
</body>
</html>

¿Qué DOCTYPE usar hoy?

Siempre <!DOCTYPE html>. Es el DOCTYPE de HTML5 y del HTML Living Standard. Es la forma más corta, compatble con todos los navegadores modernos y es lo que cualquier validador o guía de estilo profesional recomienda sin excepción.

Hojas de Estilo CSS

CSS (Cascading Style Sheets) es el lenguaje que controla el aspecto visual de los documentos HTML. Mientras HTML dice qué es cada elemento, CSS dice cómo se ve: colores, tipografía, tamaños, márgenes, posición, animaciones y mucho más.

✗ Sin CSS

Título de la página

Un párrafo con texto normal sin ningún estilo aplicado.

Un enlace azul subrayado

✓ Con CSS

Título de la página

Un párrafo con tipografía, color y espaciado cuidados.

Un enlace con estilo personalizado

Sintaxis Básica

Una regla CSS se compone de un selector y un bloque de declaraciones. Cada declaración tiene una propiedad y un valor, separados por dos puntos y terminados en punto y coma.

Anatomía de una regla CSS

h1, h2 {

color: #1e40af;/* propiedad: valor */

font-size: 2rem;

margin-bottom: 1.5rem;

font-weight: bold;

}

h1, h2

Selector(es) — ¿A qué elementos se aplica?

color

Propiedad — ¿Qué se cambia?

#1e40af

Valor — ¿A qué se cambia?

Selectores

Los selectores son el mecanismo con el que CSS "apunta" a los elementos HTML que quiere estilizar. Dominar los selectores es dominar CSS. Existen muchos tipos, con distintos niveles de especificidad.

CSS

p {
  color: steelblue;
}

Selector de tipo — afecta a todos los <p>

Resultado

Este párrafo tiene color steelblue aplicado por el selector de tipo.

CSS

.destacado {
  background: #fef9c3;
  padding: 4px 8px;
  border-radius: 4px;
}

Selector de clase — afecta a elementos con class="destacado"

Resultado

Texto normal, texto destacado, texto normal.

CSS

#titulo-principal {
  font-size: 2rem;
  color: crimson;
}

Selector de ID — solo el elemento con id="titulo-principal". Alta especificidad.

Resultado

Título con ID

CSS

nav a {
  color: white;
  text-decoration: none;
}

Selector descendiente — <a> dentro de <nav>, a cualquier nivel.

Resultado

Inicio Sobre mí Contacto

CSS

button:hover {
  background: #2563eb;
  transform: scale(1.05);
}
li:nth-child(odd) {
  background: #f1f5f9;
}

Pseudoclases — estado del elemento: :hover, :focus, :nth-child(), :first-child, :not()

Resultado (pasa el ratón)

Selector	Ejemplo	Selecciona…	Especificidad
Universal	* { }	Todos los elementos	0,0,0
Tipo	p { }	Todos los <p>	0,0,1
Clase	.btn { }	Elementos con class='btn'	0,1,0
ID	#logo { }	El elemento con id='logo'	1,0,0
Atributo	input[type='text']	Inputs de tipo texto	0,1,0
Descendiente	nav a	Todos los <a> dentro de <nav>	0,0,2
Hijo directo	ul > li	Solo <li> hijos directos de <ul>	0,0,2
Hermano adyacente	h2 + p	<p> inmediatamente después de <h2>	0,0,2
Pseudoclase	a:hover	Enlace al pasar el ratón	0,1,1
Pseudoelemento	p::first-line	Primera línea de un párrafo	0,0,2

La especificidad (specificity): quién gana cuando hay conflicto

Cuando dos reglas apuntan al mismo elemento, gana la de mayor especificidad. Se calcula con tres números (ID, Clases/Pseudoclases, Tipo): #logo tiene especificidad 1,0,0 y .btn.activo tiene 0,2,0. Si la especificidad es igual, gana la regla que aparece después en el CSS (la cascada). !important rompe la cascada y debe evitarse salvo excepciones justificadas.

Propiedades y Valores

CSS tiene más de 500 propiedades, pero un subconjunto de unas 50 cubre el 95% del trabajo diario. Las agrupamos por categorías:

Tipografía

Vista previa — propiedades de texto

font-family: GeorgiaTexto en fuente serif clásica

font-weight: 700Texto en negrita

font-size: 24pxTamaño de fuente 24px

letter-spacing: 0.2emEspaciado entre letras ampliado

line-height: 2Texto con interlineado doble. Facilita la legibilidad en párrafos largos donde el ojo necesita seguir la línea.

text-align: centerTexto centrado horizontalmente

text-transform: uppercasetexto en mayúsculas automático

Colores

Vista previa — formatos de color en CSS

color: red

color: #3b82f6

color: rgb(34,197,94)

color: hsl(271,81%,56%)

rgba(239,68,68,0.4)

oklch(0.7 0.2 120)

Modelos de Inclusión de CSS

Hay tres formas de incluir CSS en un documento HTML. En proyectos reales siempre se usa la hoja de estilos externa.

✗ Evitar

CSS Inline — atributo style

inline.html
<p style="color: blue; font-size: 18px; margin: 10px;">
  Texto con estilos directamente en el HTML
</p>
<!-- Problema: mezcla estructura con presentación.
     No reutilizable. Difícil de mantener. -->

Solo si necesario

CSS Interno — etiqueta <style>

interno.html
<head>
  <style>
    p { color: blue; font-size: 18px; }
    h1 { color: navy; }
  </style>
</head>
<!-- Válido para páginas únicas o prototipos rápidos.
     No se puede reutilizar entre páginas. -->

✓ Siempre en producción

CSS Externo — archivo .css separado

externo.html
<head>
  <!-- En el HTML: enlazar el archivo CSS -->
  <link rel="stylesheet" href="estilos.css">
  <link rel="stylesheet" href="componentes/boton.css">
</head>

/* En estilos.css: */
p { color: blue; font-size: 18px; }
h1 { color: navy; }

/* Ventajas:
   - Reutilizable en todas las páginas del sitio
   - El navegador lo cachea (carga más rápida)
   - Separación total entre HTML y CSS
   - Trabajo en equipo sin conflictos */

Modelo de Caja (Box Model)

En CSS, todo elemento HTML es una caja rectangular. El modelo de caja define cómo se calcula el espacio que ocupa cada elemento y cómo se relaciona con los demás. Entenderlo es la clave para maquetar sin frustraciones.

Vista previa — modelo de caja interactivo

margin: 24px

border: 6px

padding: 20px

content
width × height

Content

El texto, imagen u otros elementos que contiene la caja

Padding

Espacio interno entre el contenido y el borde

Border

Línea visible o invisible que rodea el elemento

Margin

Espacio externo que separa la caja de otras cajas

box-model.css
/* Tamaño real sin box-sizing (comportamiento por defecto) */
.caja {
  width: 200px;        /* ancho del contenido */
  padding: 20px;       /* +40px (20 a cada lado) */
  border: 2px solid;   /* +4px  (2 a cada lado) */
  margin: 16px;        /* espacio fuera de la caja */
}
/* Ancho TOTAL ocupado: 200 + 40 + 4 = 244px  ← confuso */

/* ─────────────────────────────────────────── */
/* La solución: box-sizing: border-box         */
/* ─────────────────────────────────────────── */

/* Reset global recomendado en todos los proyectos */
*, *::before, *::after {
  box-sizing: border-box;
}

.caja {
  width: 200px;      /* Ahora 200px es el ancho TOTAL: contenido + padding + border */
  padding: 20px;     /* El contenido se reduce, pero la caja siempre mide 200px */
  border: 2px solid;
  margin: 16px;      /* El margin NUNCA entra en el cálculo del ancho */
}
/* Ancho TOTAL ocupado: 200px exactos  ← predecible */

/* Propiedades de caja más usadas */
.ejemplo {
  width: 300px;
  height: auto;          /* Se adapta al contenido */
  min-width: 100px;
  max-width: 600px;

  padding: 16px;                      /* todos los lados */
  padding: 8px 16px;                  /* vertical | horizontal */
  padding: 4px 8px 12px 16px;        /* top | right | bottom | left */

  margin: 0 auto;                     /* centrar horizontalmente */
  margin-top: 2rem;

  border: 2px solid #3b82f6;
  border-radius: 8px;                 /* esquinas redondeadas */

  overflow: hidden;                   /* ocultar lo que desborda */
}

Regla de oro: siempre box-sizing: border-box

Todos los frameworks modernos (Bootstrap, Tailwind, etc.) aplican box-sizing: border-box globalmente. Deberías hacerlo también en tus proyectos desde el principio. Hace que el comportamiento del tamaño de los elementos sea predecible: el width que defines es el que obtienes, sin sorpresas.

Learn CSS in 20 Minutes — Web Dev Simplified — youtube.com/watch?v=1PnVor36_40

Flexbox — Diseño en una dimensión

Flexbox (Flexible Box Layout) es el sistema de maquetación CSS pensado para distribuir elementos en una sola dirección: fila o columna. Es perfecto para alinear ítems dentro de un contenedor, crear barras de navegación, tarjetas horizontales o centrar elementos vertical y horizontalmente.

El eje principal y el eje cruzado

flex-direction: row — eje principal horizontal →

→

flex-direction: column — eje principal vertical ↓

justify-content — Alineación en el eje principal

Vista previa — justify-content

flex-start

①

②

③

center

①

②

③

flex-end

①

②

③

space-between

①

②

③

space-around

①

②

③

space-evenly

①

②

③

align-items — Alineación en el eje cruzado

Vista previa — align-items (alturas distintas para apreciar el efecto)

flex-start

center

flex-end

stretch (por defecto)

baseline

flex-wrap, flex-grow y flex-shrink

flex-wrap: nowrap (por defecto) — los ítems se comprimen

Item largo 1

Item 2

Item largo 3

Item 4

Item 5

flex-wrap: wrap — los ítems saltan a la siguiente línea

Item largo 1

Item 2

Item largo 3

Item 4

Item 5

flex-grow — reparto del espacio sobrante

grow: 1

grow: 2

grow: 1

El ítem con grow:2 recibe el doble del espacio libre

flexbox.css
/* ── Contenedor flex ── */
.contenedor {
  display: flex;               /* activa flexbox */
  flex-direction: row;         /* row | row-reverse | column | column-reverse */
  flex-wrap: wrap;             /* nowrap | wrap | wrap-reverse */
  justify-content: center;     /* alineación en el eje principal */
  align-items: center;         /* alineación en el eje cruzado */
  align-content: flex-start;   /* cuando hay varias líneas (con wrap) */
  gap: 16px;                   /* espacio entre ítems (row-gap + column-gap) */
}

/* Shorthand: flex-flow = flex-direction + flex-wrap */
.contenedor {
  flex-flow: row wrap;
}

/* ── Ítems flex ── */
.item {
  flex-grow: 1;      /* cuánto crece respecto al espacio libre (0 = no crece) */
  flex-shrink: 1;    /* cuánto se encoge si no hay espacio (0 = no se encoge) */
  flex-basis: 200px; /* tamaño base antes de repartir espacio libre */
  align-self: flex-end; /* sobrescribe align-items para este ítem */
  order: 2;          /* cambia el orden visual sin cambiar el HTML */
}

/* Shorthand: flex = grow + shrink + basis */
.item { flex: 1 1 200px; }  /* equivale a las tres propiedades separadas */
.item { flex: 1; }          /* grow:1, shrink:1, basis:0 */
.item { flex: auto; }       /* grow:1, shrink:1, basis:auto */
.item { flex: none; }       /* grow:0, shrink:0, basis:auto (tamaño fijo) */

/* ── Caso de uso clásico: centrar algo en la pantalla ── */
.centrar-en-pantalla {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* ── Caso de uso: navbar con logo a la izquierda y menú a la derecha ── */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
  height: 64px;
}

/* ── Caso de uso: tarjetas que se adaptan al ancho disponible ── */
.grid-tarjetas {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.tarjeta {
  flex: 1 1 280px;    /* crece, se encoge, mínimo 280px */
  max-width: 400px;
}

Ejemplo completo: navbar con Flexbox

DevBlog

Navbar con justify-content: space-between — logo, menú y botón en sus lugares

CSS Grid — Diseño en dos dimensiones

CSS Grid es el sistema de maquetación más potente de CSS. A diferencia de Flexbox, controla el diseño en dos ejes simultáneamente: filas y columnas. Es ideal para layouts de página completos, galerías, dashboards y cualquier estructura bidimensional compleja.

Terminología de Grid

celda 1

celda 2

celda 3

celda 4

celda 5

celda 6

celda 7

celda 8

Grid container

El elemento con display:grid

Grid item

Cada hijo directo del container

Grid line

Las líneas que forman la cuadrícula (numeradas)

Grid cell

La intersección de una fila y columna

grid-template-columns y la unidad fr

La propiedad grid-template-columns define el número y tamaño de las columnas. La unidad fr (fracción) reparte el espacio disponible proporcionalmente, similar a flex-grow.

Vista previa — variantes de grid-template-columns

grid-template-columns: repeat(3, 1fr) — 3 columnas iguales

sidebar fijo

contenido

col

grid-template-columns: 1fr 2fr 1fr — columna central doble de ancho

sidebar fijo

contenido

col

grid-template-columns: 200px 1fr — sidebar fijo + contenido flexible

sidebar fijo

contenido

grid-template-columns: repeat(4, 1fr) — 4 columnas iguales

sidebar fijo

contenido

col

grid-template-areas — Layout visual con nombres

La propiedad grid-template-areas permite definir el layout de la página usando un mapa visual de texto. Es una de las características más potentes y legibles de CSS Grid.

Vista previa — layout completo con grid-areas

header — ocupa toda la fila (col 1 + col 2)

sidebar
200px fijo

main
1fr — espacio restante

footer — ocupa toda la fila

grid-layout.css
/* ── Definir el layout completo de una página ── */
.pagina {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 64px 1fr 48px;
  grid-template-areas:
    "header  header"   /* header ocupa las 2 columnas */
    "sidebar main  "   /* sidebar izquierda + main derecha */
    "footer  footer";  /* footer ocupa las 2 columnas */
  min-height: 100vh;
  gap: 0;
}

/* Asignar cada elemento a su área */
.pagina > header  { grid-area: header;  }
.pagina > nav     { grid-area: sidebar; }
.pagina > main    { grid-area: main;    }
.pagina > footer  { grid-area: footer;  }

/* Punto "." en las areas = celda vacía */
.dashboard {
  grid-template-areas:
    "nav    nav    nav   "
    "stats  stats  chart "
    ".      tabla  tabla ";
}


/* ── Posicionamiento manual con líneas ── */
.elemento-grande {
  /* grid-column: línea-inicio / línea-fin */
  grid-column: 1 / 3;   /* ocupa desde la línea 1 hasta la 3 */
  grid-row: 2 / 4;

  /* Shorthand con span: "empieza aquí y ocupa N celdas" */
  grid-column: 2 / span 2;  /* empieza en col 2 y ocupa 2 columnas */
  grid-column: span 3;       /* ocupa 3 columnas (posición auto) */
}


/* ── repeat() y minmax() ── */
.galeria {
  display: grid;
  /* repite 3 columnas de entre 200px y 1fr */
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  gap: 1.5rem;
}

/* ── auto-fill y auto-fit: columnas responsivas sin media queries ── */
.tarjetas-auto {
  display: grid;
  /* "Crea tantas columnas de 280px como quepan" */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}
/* auto-fill: reserva huecos vacíos */
/* auto-fit: colapsa los huecos vacíos y expande los ítems existentes */


/* ── Grid de 12 columnas clásico ── */
.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}
.col-4  { grid-column: span 4;  }
.col-6  { grid-column: span 6;  }
.col-12 { grid-column: span 12; }

¿Flexbox o Grid? — Cuándo usar cada uno

Criterio	Flexbox	Grid
Dimensiones	1D — fila o columna	2D — filas Y columnas
Ideal para…	Componentes: navbar, botones, chips, listas	Layouts: páginas, secciones, dashboards
Control del espacio	Los ítems deciden su tamaño	El contenedor decide el layout
Orden visual	Fácil con order	Fácil con grid-area y posicionamiento
Soporte	100% navegadores modernos	100% navegadores modernos
Ejemplo típico	display:flex en nav, card, form	display:grid en body layout, galería

Regla práctica: no es un concurso

Flexbox y Grid no se excluyen. En un layout real se usan juntos: Grid para el layout general de la página y Flexbox para los componentes internos. Una navbar puede ser un ítem de Grid que internamente usa Flexbox para alinear su logo y menú.

Diseño Responsivo y Media Queries

El diseño responsivo hace que una misma página se vea correctamente en móviles, tablets y escritorios. La base son las media queries, reglas CSS que se activan solo cuando se cumple una condición del dispositivo.

Breakpoints y Mobile First

Breakpoints más comunes en la industria

0px

📱 Base (móvil)Mobile first: los estilos base se escriben sin media query

640px

📱 SM — Tablet pequeña@media (min-width: 640px)

768px

📓 MD — Tablet@media (min-width: 768px)

1024px

💻 LG — Escritorio@media (min-width: 1024px)

1280px

🖥️ XL — Escritorio grande@media (min-width: 1280px)

1536px

🖥️ 2XL — Pantalla UHD@media (min-width: 1536px)

responsive.css
/* ━━━ ESTRATEGIA MOBILE FIRST ━━━
   Se empieza diseñando para móvil.
   Las media queries añaden complejidad hacia arriba. */

/* ── Estilos base (móvil, < 640px) ── */
.tarjetas {
  display: grid;
  grid-template-columns: 1fr;   /* 1 columna en móvil */
  gap: 1rem;
  padding: 1rem;
}

.navbar {
  flex-direction: column;        /* menú vertical en móvil */
}

h1 { font-size: 1.5rem; }


/* ── Tablet (≥ 640px) ── */
@media (min-width: 640px) {
  .tarjetas {
    grid-template-columns: repeat(2, 1fr);  /* 2 columnas */
    gap: 1.25rem;
    padding: 1.5rem;
  }
  h1 { font-size: 2rem; }
}


/* ── Escritorio (≥ 1024px) ── */
@media (min-width: 1024px) {
  .tarjetas {
    grid-template-columns: repeat(3, 1fr);  /* 3 columnas */
    gap: 1.5rem;
    padding: 2rem;
  }
  .navbar {
    flex-direction: row;          /* menú horizontal en escritorio */
  }
  h1 { font-size: 2.5rem; }
}


/* ── Escritorio grande (≥ 1280px) ── */
@media (min-width: 1280px) {
  .tarjetas {
    grid-template-columns: repeat(4, 1fr);  /* 4 columnas */
  }
}


/* ── Media queries especiales ── */

/* Orientación */
@media (orientation: landscape) {
  .hero { min-height: 60vh; }
}

/* Preferencia del sistema: modo oscuro */
@media (prefers-color-scheme: dark) {
  body { background: #0f172a; color: #f1f5f9; }
}

/* Preferencia de movimiento reducido (accesibilidad) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Impresión */
@media print {
  nav, aside, .btn { display: none; }
  body { font-size: 12pt; color: black; }
}

/* Rango: entre 768px y 1024px */
@media (min-width: 768px) and (max-width: 1023px) {
  .solo-tablet { display: block; }
}

Vista previa — grid responsivo según el ancho disponible

Móvil (1 col)

Tarjeta 1

Tarjeta 2

Tarjeta 3

Tablet (2 cols)

Tarjeta 1

Tarjeta 2

Tarjeta 3

Escritorio (3 cols)

Tarjeta 1

Tarjeta 2

Tarjeta 3

El viewport meta tag es indispensable para el responsive

Sin <meta name="viewport" content="width=device-width, initial-scale=1.0">en el <head>, los móviles renderizan la página a 980px de ancho y la escalan hacia abajo, haciendo que las media queries no funcionen como esperas. Siempre debe ser la primera o segunda etiqueta del <head>.

Variables CSS (Custom Properties)

Las variables CSS (oficialmente custom properties) permiten definir valores reutilizables que se pueden cambiar desde un solo lugar. Son el equivalente CSS de las variables de programación: si el color de marca cambia, se actualiza en un único punto y afecta a todo el proyecto.

Vista previa — cambio de tema con variables

Tema Azul

Tema Rojo

El mismo CSS, dos temas distintos simplemente cambiando el valor de --color-primario

variables-css.css
/* ── Las variables se declaran con -- y se usan con var() ── */

/* :root aplica al elemento raíz (html): variables globales */
:root {
  /* Paleta de colores */
  --color-primario:    #2563eb;
  --color-secundario:  #7c3aed;
  --color-acento:      #10b981;
  --color-peligro:     #dc2626;

  /* Fondos y superficies */
  --color-fondo:       #ffffff;
  --color-superficie:  #f8fafc;
  --color-borde:       #e2e8f0;

  /* Texto */
  --color-texto:       #0f172a;
  --color-texto-suave: #64748b;

  /* Tipografía */
  --fuente-base:       'Inter', system-ui, sans-serif;
  --fuente-codigo:     'Fira Code', 'Cascadia Code', monospace;
  --tamanyo-base:      1rem;       /* 16px */
  --escala-tipo:       1.25;       /* major third */

  /* Espaciado (escala de 4px) */
  --espacio-1: 0.25rem;   /* 4px  */
  --espacio-2: 0.5rem;    /* 8px  */
  --espacio-3: 0.75rem;   /* 12px */
  --espacio-4: 1rem;      /* 16px */
  --espacio-6: 1.5rem;    /* 24px */
  --espacio-8: 2rem;      /* 32px */

  /* Bordes */
  --radio-sm: 4px;
  --radio-md: 8px;
  --radio-lg: 16px;
  --radio-pill: 9999px;

  /* Sombras */
  --sombra-sm: 0 1px 3px rgba(0,0,0,0.12);
  --sombra-md: 0 4px 12px rgba(0,0,0,0.15);
  --sombra-lg: 0 10px 40px rgba(0,0,0,0.20);

  /* Transiciones */
  --transicion: 200ms ease;
}

/* ── Usar las variables ── */
.boton {
  background-color: var(--color-primario);
  color: var(--color-fondo);
  padding: var(--espacio-3) var(--espacio-6);
  border-radius: var(--radio-md);
  font-family: var(--fuente-base);
  box-shadow: var(--sombra-sm);
  transition: box-shadow var(--transicion),
              background-color var(--transicion);
}

.boton:hover {
  box-shadow: var(--sombra-md);
}

/* ── Modo oscuro con variables ── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-fondo:       #0f172a;
    --color-superficie:  #1e293b;
    --color-borde:       #334155;
    --color-texto:       #f1f5f9;
    --color-texto-suave: #94a3b8;
    /* Los colores primarios pueden mantenerse o ajustarse */
    --color-primario:    #60a5fa;  /* más claro para mejor contraste en oscuro */
  }
  /* Automáticamente TODOS los elementos que usen estas variables se actualizan */
}

/* ── Variables locales (solo afectan a su subtree) ── */
.tarjeta-alerta {
  --color-borde-local: var(--color-peligro);
  border: 2px solid var(--color-borde-local);
  /* Esta variable solo existe dentro de .tarjeta-alerta */
}

/* ── Valor de fallback en var() ── */
.elemento {
  color: var(--color-no-definida, #000000);
  /* Si --color-no-definida no existe, usa #000000 */
  font-size: var(--tamanyo-titulo, var(--tamanyo-base, 1rem));
  /* Fallbacks anidados */
}

/* ── Modificar variables con JavaScript ── */
/*
  document.documentElement.style.setProperty('--color-primario', '#ff6b00');
  Cambia el tema entero en tiempo real
*/

Transiciones y Animaciones

CSS puede animar propiedades de forma fluida sin necesidad de JavaScript. Hay dos sistemas: las transiciones (para cambios provocados por eventos como :hover) y las animaciones (@keyframes), que se ejecutan de forma autónoma.

transition — Cambios suaves entre estados

Vista previa — pasa el ratón sobre cada botón

transitions.css
/* ── Sintaxis de transition ── */
.elemento {
  /* transition: propiedad duración función-timing retraso */
  transition: background-color 300ms ease 0ms;

  /* Múltiples propiedades */
  transition:
    background-color 300ms ease,
    transform        200ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow       300ms ease;

  /* Todas las propiedades animables (con cuidado: puede ser lento) */
  transition: all 300ms ease;
}

/* ── Funciones de timing (easing) ── */
.elemento {
  transition-timing-function: ease;          /* rápido-lento-rápido (por defecto) */
  transition-timing-function: ease-in;       /* empieza lento */
  transition-timing-function: ease-out;      /* termina lento */
  transition-timing-function: ease-in-out;   /* empieza y termina lento */
  transition-timing-function: linear;        /* velocidad constante */

  /* cubic-bezier: control total de la curva */
  /* Herramienta: https://cubic-bezier.com */
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); /* rebote */
}

/* ── Ejemplos prácticos ── */

/* Botón con efecto lift */
.boton {
  background: #3b82f6;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(59,130,246,0.3);
  transform: translateY(0);
  transition:
    box-shadow 200ms ease,
    transform  200ms ease,
    background 200ms ease;
}
.boton:hover {
  background: #2563eb;
  box-shadow: 0 8px 20px rgba(59,130,246,0.4);
  transform: translateY(-2px);
}
.boton:active {
  transform: translateY(0px);
  box-shadow: 0 2px 6px rgba(59,130,246,0.3);
}

/* Menú desplegable con transición de opacidad + transform */
.menu-dropdown {
  opacity: 0;
  transform: translateY(-8px) scale(0.95);
  pointer-events: none;
  transition:
    opacity   200ms ease,
    transform 200ms ease;
}
.menu-trigger:hover + .menu-dropdown,
.menu-dropdown:hover {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

@keyframes — Animaciones autónomas

Vista previa — animaciones con @keyframes

pulse

spin

bounce

fadeIn

Hola!

skeleton

animaciones.css
/* ── Definir un keyframe ── */
@keyframes nombre-animacion {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Con porcentajes para mayor control */
@keyframes rebote {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-30px); }
  60%  { transform: translateY(-15px); }
  80%  { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

/* ── Aplicar la animación ── */
.elemento {
  /* animation: nombre duración timing iteraciones dirección fill-mode retraso */
  animation: nombre-animacion 0.5s ease-out 1 normal forwards 0s;

  /* Propiedades por separado */
  animation-name:            fadeIn;
  animation-duration:        0.6s;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;           /* número o infinite */
  animation-direction:       normal;      /* normal | reverse | alternate | alternate-reverse */
  animation-fill-mode:       forwards;    /* none | forwards | backwards | both */
  animation-delay:           0.2s;
  animation-play-state:      running;     /* running | paused */
}

/* ── Animaciones comunes listas para usar ── */

/* Fade In desde abajo */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Spinner de carga */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  width: 32px; height: 32px;
  border: 3px solid rgba(59,130,246,0.2);
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Skeleton loading (shimmer) */
@keyframes shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
.skeleton {
  background: #e2e8f0;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: shimmer 1.5s infinite;
}

/* Efecto pulse para notificaciones */
@keyframes pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%       { transform: scale(1.2); opacity: 0.7; }
}
.badge-notificacion {
  animation: pulse 2s ease-in-out infinite;
}

/* Entrada de elementos de lista escalonada */
.lista-item {
  animation: fadeInUp 0.4s ease-out both;
}
.lista-item:nth-child(1) { animation-delay: 0.0s; }
.lista-item:nth-child(2) { animation-delay: 0.1s; }
.lista-item:nth-child(3) { animation-delay: 0.2s; }
.lista-item:nth-child(4) { animation-delay: 0.3s; }

/* Siempre respeta las preferencias de accesibilidad */
@media (prefers-reduced-motion: reduce) {
  .lista-item, .spinner, .badge-notificacion {
    animation: none;
  }
}

Pseudoelementos ::before y ::after

Los pseudoelementos ::before y::after insertan contenido decorativo antes o después del contenido real de un elemento, sin tocar el HTML. Son herramientas muy potentes para iconos, efectos visuales y decoraciones.

Vista previa — usos de ::before y ::after

Punto indicador de estado

Activo

Inactivo

Pendiente

Separador de texto (líneas con ::before y ::after)

o continúa con

Tooltip puro CSS con ::before y ::after

Este es el tooltip ← hecho con ::before y ::after en CSS puro

Comillas decorativas en blockquote

"La web es para todos. No para unos pocos."— Tim Berners-Lee

pseudoelementos.css
/* REGLA DE ORO: ::before y ::after SIEMPRE necesitan content */
.elemento::before { content: ""; }  /* vacío para decoración pura */
.elemento::after  { content: "►"; } /* texto/emoji */
.elemento::before { content: attr(data-tooltip); } /* valor de un atributo */

/* ── Separador "o continúa con" ── */
.separador {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.separador::before,
.separador::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}

/* ── Tooltip puro CSS ── */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::before {  /* El texto */
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #0f172a;
  color: white;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.8rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
[data-tooltip]::after {   /* La flechita */
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent;
  border-top-color: #0f172a;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Punto de estado animado ── */
.activo::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  margin-right: 8px;
  animation: pulse 2s infinite;
}

/* ── Comillas en blockquote ── */
blockquote {
  position: relative;
  padding: 1.5rem 1.5rem 1.5rem 3rem;
  background: #f8fafc;
  border-radius: 8px;
}
blockquote::before {
  content: '"';
  position: absolute;
  top: -0.25rem;
  left: 0.5rem;
  font-size: 4rem;
  color: #3b82f6;
  font-family: Georgia, serif;
  line-height: 1;
  opacity: 0.5;
}

/* ── Contador automático con CSS ── */
ol.capitulos { counter-reset: capitulo; }
ol.capitulos li { counter-increment: capitulo; }
ol.capitulos li::before {
  content: "Capítulo " counter(capitulo) " — ";
  font-weight: 700;
  color: #3b82f6;
}

Funciones CSS Modernas

CSS incluye funciones matemáticas y de valor que permiten hacer cálculos, crear tipografía fluida y escribir código más expresivo y mantenible.

calc() — Cálculos mezclando unidades

Vista previa — calc()

width: calc(100% - 240px) — ancho total menos sidebar

sidebar: 240px

contenido: calc(100% - 240px)

padding: calc(var(--espacio-4) * 2)

padding = calc(1rem × 2) = 2rem en cada lado

clamp() — Tipografía fluida

clamp(mínimo, preferido, máximo) devuelve el valor preferido pero nunca baja del mínimo ni sube del máximo. Ideal para tipografía responsiva sin media queries.

Vista previa — clamp() para tipografía fluida

font-size: clamp(1.2rem, 4vw, 2.5rem)

font-size: clamp(0.875rem, 2vw, 1.125rem) — nunca menor a 14px, nunca mayor a 18px

Redimensiona la ventana del navegador para ver el efecto fluido

funciones-css.css
/* ── calc(): operaciones con cualquier unidad CSS ── */
.contenido-principal {
  width: calc(100% - 280px);     /* total - sidebar */
  margin: calc(var(--nav-h) + 2rem) auto 0;
  padding: calc(1rem * 1.5);
  /* Operadores: + - * / (espacios obligatorios alrededor de + y -) */
}

/* ── min(): el valor más pequeño ── */
.contenedor {
  width: min(100%, 1200px);  /* nunca mayor a 1200px ni mayor al 100% */
  /* Equivale a: width:100%; max-width:1200px */
}

/* ── max(): el valor más grande ── */
.caja {
  padding: max(1rem, 3vw);   /* al menos 1rem, puede crecer con el viewport */
}

/* ── clamp(): mínimo, preferido, máximo ── */
.tipografia-fluida {
  /* clamp(min, ideal, max) — no necesita media queries */
  font-size: clamp(1rem, 2.5vw, 1.5rem);

  /* H1 fluido: mínimo 1.8rem, ideal 5vw, máximo 3.5rem */
  font-size: clamp(1.8rem, 5vw, 3.5rem);

  /* Espaciado fluido */
  padding: clamp(1rem, 5vw, 3rem);
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

/* ── Escala tipográfica fluida completa ── */
:root {
  --text-sm:   clamp(0.8rem,   1.5vw, 0.9rem);
  --text-base: clamp(1rem,     2vw,   1.1rem);
  --text-lg:   clamp(1.1rem,   2.5vw, 1.3rem);
  --text-xl:   clamp(1.3rem,   3vw,   1.8rem);
  --text-2xl:  clamp(1.6rem,   4vw,   2.5rem);
  --text-3xl:  clamp(2rem,     5vw,   3.5rem);
  --text-4xl:  clamp(2.5rem,   6vw,   5rem);
}

/* ── Funciones de color modernas ── */
.elemento {
  /* oklch: espacio de color perceptualmente uniforme (recomendado 2024) */
  color: oklch(0.7 0.2 250);     /* luminosidad, croma, tono */
  background: oklch(0.2 0.05 250 / 0.8); /* con transparencia */

  /* color-mix: mezclar dos colores */
  background: color-mix(in oklch, #3b82f6 70%, #8b5cf6 30%);

  /* light-dark(): automático según el tema del sistema */
  color: light-dark(#0f172a, #f1f5f9);
  background: light-dark(#ffffff, #0f172a);
}

/* ── Funciones de transformación ── */
.transformaciones {
  /* Se pueden combinar en una sola propiedad */
  transform:
    translateX(20px)
    translateY(-10px)
    rotate(45deg)
    scale(1.2)
    skewX(5deg);
}

/* ── env(): variables del entorno (safe area en iPhone) ── */
.contenedor-movil {
  padding-bottom: env(safe-area-inset-bottom);
  padding-left:   env(safe-area-inset-left);
  padding-right:  env(safe-area-inset-right);
}

CSS Moderno: Selectores y Features de 2023–2024

En los últimos años CSS ha recibido las actualizaciones más importantes de su historia. Estas características tienen soporte en todos los navegadores modernos y cambian radicalmente la forma de escribir CSS.

:is(), :where() y :not() — Selectores lógicos

selectores-modernos.css
/* ── :is() — Agrupa selectores con especificidad del selector más específico ── */

/* Antes: repetición */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; }

/* Ahora con :is() */
:is(h1, h2, h3, h4, h5, h6) a {
  color: inherit;
  text-decoration: none;
}

/* Combinaciones complejas simplificadas */
:is(article, section, aside) :is(h2, h3) {
  font-size: 1.4rem;
}

/* ── :where() — Como :is() pero con especificidad CERO ── */
/* Útil para reset/base styles que sean fáciles de sobrescribir */
:where(ul, ol) {
  padding-left: 1.5rem;
  list-style: disc;
}
/* Esta regla tiene especificidad 0, cualquier otra la puede sobrescribir */

/* ── :not() — Excluir elementos ── */
/* Todos los botones excepto los deshabilitados */
button:not([disabled]):not(.btn-texto) {
  cursor: pointer;
  background: #3b82f6;
  color: white;
}

/* Links que no sean navegación */
a:not([class]):not([role]) {
  text-decoration: underline;
  color: #3b82f6;
}

/* ── :has() — El selector "padre" (revolucionario) ── */
/* Un formulario que contiene un input inválido */
form:has(input:invalid) {
  border-color: #dc2626;
}

/* Una tarjeta que contiene una imagen → más padding arriba */
.tarjeta:has(img) {
  padding-top: 0;
}

/* Párrafo que sigue a una imagen */
figure:has(img) + p {
  margin-top: 0.5rem;
  font-style: italic;
  color: #64748b;
}

/* Nav que está siendo hover → cambia el logo */
nav:has(a:hover) .logo {
  color: #3b82f6;
}

/* ── :focus-visible — Foco solo para teclado ── */
/* Solo muestra el anillo de foco cuando se navega con teclado, no con ratón */
button:focus-visible {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
}
button:focus:not(:focus-visible) {
  outline: none;  /* sin outline al hacer clic */
}

/* ── Nesting nativo CSS (sin preprocesador) ── */
/* Desde 2023, soporte nativo en todos los navegadores modernos */
.boton {
  background: #3b82f6;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  transition: all 200ms;

  /* Anidado nativo */
  &:hover {
    background: #2563eb;
    transform: translateY(-1px);
  }

  &:active {
    transform: translateY(0);
  }

  &.boton-grande {
    font-size: 1.2rem;
    padding: 14px 28px;
  }

  /* Elemento hijo */
  & .icono {
    margin-right: 8px;
  }
}

Container Queries — El futuro del responsive

Las container queries permiten aplicar estilos basados en el tamaño del contenedor padre, no del viewport. Son la respuesta a uno de los problemas más antiguos del responsive: componentes que se adaptan a su contexto, no a la pantalla.

container-queries.css
/* ── Declarar el contenedor ── */
.tarjeta-wrapper {
  container-type: inline-size;  /* activa las container queries */
  container-name: tarjeta;      /* nombre opcional para referencia */
}

/* Shorthand */
.tarjeta-wrapper {
  container: tarjeta / inline-size;
}

/* ── Aplicar estilos según el tamaño del contenedor ── */
@container tarjeta (min-width: 400px) {
  .tarjeta {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1rem;
  }
}

@container tarjeta (min-width: 600px) {
  .tarjeta {
    grid-template-columns: 250px 1fr;
  }
  .tarjeta h2 {
    font-size: 1.5rem;
  }
}

/* Sin container query: la misma tarjeta en 1 columna si su contenedor es estrecho */
@container (max-width: 399px) {
  .tarjeta {
    display: flex;
    flex-direction: column;
  }
}

/* ── Unidades de contenedor: cqw, cqh ── */
.tarjeta h2 {
  /* 5% del ancho del contenedor padre */
  font-size: clamp(1rem, 5cqw, 2rem);
}


/* ── @layer: organizar la cascada en capas ── */
/* Muy útil para evitar problemas de especificidad con frameworks */
@layer reset, base, componentes, utilidades;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
}

@layer base {
  body { font-family: system-ui; line-height: 1.5; }
  h1 { font-size: 2rem; }
}

@layer componentes {
  .boton { background: blue; color: white; }
}

@layer utilidades {
  .hidden { display: none !important; }
  /* Las utilidades ganan porque su capa va al final */
}

Comparativa: Media Queries vs Container Queries

Aspecto	Media Query	Container Query
Se basa en…	Tamaño del VIEWPORT	Tamaño del CONTENEDOR PADRE
Ideal para…	Layout de página general	Componentes reutilizables
Contexto	Global — siempre igual	Contextual — depende de dónde se usa
Soporte	Universal	Todos los navegadores modernos (2023)
Ejemplo	@media (min-width: 768px)	@container (min-width: 400px)

¡Guía de CSS Flexbox para aprender de forma sencilla! — midulive — youtube.com/watch?v=PSwlAuRbv_A

Organización del CSS: BEM y Buenas Prácticas

En proyectos reales el CSS puede volverse imposible de mantener. Las metodologías de nomenclatura y organización resuelven este problema definiendo reglas claras para nombrar clases y estructurar los archivos.

BEM — Block Element Modifier

Anatomía de BEM

bloque

Componente independiente con significado propio. Ej: .tarjeta, .menu, .boton

bloque__elemento

Parte interna del bloque, sin significado fuera. Ej: .tarjeta__imagen, .menu__item

bloque--modificador

Variante o estado del bloque/elemento. Ej: .boton--primario, .tarjeta--destacada

bem-ejemplo.html
<!-- HTML con nomenclatura BEM -->
<article class="tarjeta tarjeta--destacada">
  <div class="tarjeta__cabecera">
    <img class="tarjeta__imagen" src="foto.jpg" alt="...">
    <span class="tarjeta__badge tarjeta__badge--nuevo">Nuevo</span>
  </div>
  <div class="tarjeta__cuerpo">
    <h2 class="tarjeta__titulo">Monitor UltraWide Pro</h2>
    <p class="tarjeta__descripcion">Panel IPS 144Hz 34"</p>
    <div class="tarjeta__precio">
      <span class="tarjeta__precio-antiguo">499€</span>
      <strong class="tarjeta__precio-actual">449€</strong>
    </div>
  </div>
  <footer class="tarjeta__pie">
    <button class="boton boton--primario boton--grande">
      <span class="boton__icono">🛒</span>
      <span class="boton__texto">Añadir al carrito</span>
    </button>
  </footer>
</article>

bem-estilos.css
/* ── CSS con BEM: sin anidamiento excesivo, sin guerras de especificidad ── */

/* BLOQUE */
.tarjeta {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  background: white;
}

/* MODIFICADOR del bloque */
.tarjeta--destacada {
  box-shadow: 0 8px 24px rgba(59,130,246,0.25);
  border: 2px solid #3b82f6;
}

/* ELEMENTOS */
.tarjeta__cabecera {
  position: relative;
}
.tarjeta__imagen {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.tarjeta__badge {
  position: absolute;
  top: 12px; right: 12px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  background: #e2e8f0;
  color: #475569;
}

/* MODIFICADOR del elemento */
.tarjeta__badge--nuevo {
  background: #dcfce7;
  color: #166534;
}
.tarjeta__badge--oferta {
  background: #fef2f2;
  color: #991b1b;
}

.tarjeta__cuerpo   { padding: 1rem; }
.tarjeta__titulo   { font-size: 1.1rem; font-weight: 700; }
.tarjeta__precio   { display: flex; gap: 0.5rem; align-items: baseline; }
.tarjeta__precio-antiguo { color: #94a3b8; text-decoration: line-through; }
.tarjeta__precio-actual  { font-size: 1.4rem; font-weight: 700; color: #16a34a; }

Reglas de oro para CSS mantenible

Además de BEM, sigue estas prácticas: agrupa el CSS por componente (no por propiedades), evita selectores con más de 2 niveles de anidamiento, nunca uses !important salvo en utilidades deliberadas, escribe un comentario antes de cada componente y usa variables CSS para todos los valores que se repitan más de dos veces.

Validación de Documentos

Validar un documento significa comprobar automáticamente que cumple el estándar definido. Aunque los navegadores modernos son tolerantes con los errores HTML, publicar código inválido provoca problemas de accesibilidad, SEO y mantenimiento.

Validación HTML

El validador oficial del W3C comprueba etiquetas mal cerradas, atributos inválidos, elementos anidados incorrectamente y otros errores de conformidad.

validator.w3.org

Validación CSS

El validador CSS del W3C detecta propiedades inexistentes, valores incorrectos, errores de sintaxis y uso de propiedades sin prefijos necesarios.

jigsaw.w3.org/css-validator

Herramientas integradas

VS Code con la extensión HTML CSS Support y ESLint con plugins específicos detectan errores en tiempo real mientras escribes, sin salir del editor.

VS Code + Prettier + ESLint

Errores comunes que detecta el validador

Los errores más frecuentes son: etiqueta </div> de más o de menos, atributo alt ausente en imágenes, uso de <b> o <i> en lugar de <strong> y <em>, elementos anidados incorrectamente (un <p> dentro de otro <p>), o valores de atributo sin comillas.

Implementa un componente de skeleton loading para una tarjeta de artículo que aparece mientras el contenido real carga. El efecto "shimmer" debe parecerse al de Facebook/LinkedIn. El skeleton debe imitar la estructura de una tarjeta real: - Una imagen rectangular (16:9) en la parte superior - Una línea de título (ancho: 80% del contenedor) - Dos líneas de descripción (ancho: 100% y 60%) - Una línea de metadatos con un círculo (avatar) y dos líneas cortas El efecto shimmer: - Un gradiente brillante que viaja de izquierda a derecha - Duración: 1.5s, en bucle infinito - El fondo base debe ser gris claro, el brillo un blanco semitransparente Después de 3 segundos, el skeleton debe transicionar (fade out) a la tarjeta real con contenido.

Ejercicio Práctico

Medio

Recrear una UI real — tarjeta de perfil de GitHub

Usando solo HTML semántico y CSS (sin frameworks), recrea una tarjeta de perfil similar a la barra lateral de GitHub. La tarjeta debe tener: Estructura HTML (semántica): - article con role y aria adecuados - figure + img para el avatar (200x200, border-radius 50%) - Nombre completo (h1), nombre de usuario con @, bio de 2 líneas - Lista de metadatos: organización (🏢), ubicación (📍), web (🔗), correo (📧) Cada item usa <dt> y <dd> dentro de un <dl> o <ul> - Contadores de seguidores/seguidos con <a> (valor + label) - Lista de tecnologías como tags/badges CSS requerido: - Variables CSS para todos los valores reutilizables - Tipografía: usar clamp() para los tamaños - Hover en el avatar: sutil scale + sombra - Hover en los contadores: underline + color change - El nombre de usuario en color secundario - Los badges de tecnología con colores distintos por categoría - Responsive: en móvil ocupa el 100% del ancho; en tablet/escritorio max-width: 296px - Todo con BEM o similar nomenclatura consistente