Desarrollo web (HTML/CSS/JS, WebSockets, Node.js, PHP)

1.1 HTML5 y el documento mínimo

HTML (HyperText Markup Language) es el lenguaje de marcado que estructura el contenido web; no es un lenguaje de programación (no tiene lógica ni variables). El estándar vivo lo mantiene WHATWG (HTML Living Standard). Documento mínimo:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Título</title>
  </head>
  <body>
    <h1>Hola</h1>
  </body>
</html>

• <!DOCTYPE html>: declara HTML5 y activa el modo estándar del navegador (sin él, quirks mode).
• <head>: metadatos (charset, viewport, <title>, <link> a CSS, <meta>), no se muestra.
• <body>: contenido visible.

1.2 Elementos semánticos (HTML5)

HTML5 sustituye los <div> genéricos por etiquetas con significado, clave para accesibilidad y SEO:

Etiqueta	Significado	Etiqueta	Significado
<header>	Cabecera	<nav>	Navegación
<main>	Contenido principal (una sola instancia visible; puede haber otras si están ocultas)	<article>	Contenido autónomo
<section>	Sección temática	<aside>	Contenido tangencial al principal (a menudo lateral, aunque no necesariamente a un lado)
<footer>	Pie	<figure>/<figcaption>	Contenido autónomo con leyenda (imagen, pero también código, tablas…)

Elementos en línea (<span>, <a> —con target="_blank" abre el enlace en una pestaña nueva—, <strong>, <em>, <img>) vs de bloque (<div>, <p>, <h1>, <ul>): distinción básica que también gobierna el CSS (display).

1.3 Formularios y multimedia

• Formularios: <form action method>, <input> (tipos HTML5: email, date, number, range, color…), <label>, <select>, <textarea>, <button>. Atributos de validación: required, pattern, min/max.
• Métodos de envío: GET (parámetros en la URL, idempotente, cacheable) vs POST (en el cuerpo, para datos que modifican estado). POST no es una garantía para datos sensibles: la seguridad la dan HTTPS, la autorización y la validación en el servidor y la protección CSRF. (los métodos HTTP y sus códigos de estado se ven a fondo en el tema 5).
• Multimedia nativa: <audio> (reproduce audio sin recurrir a plugins), <video>, <canvas> (dibujo por script), <svg> (vectorial).

1.4 XHTML frente a HTML

XHTML es HTML reformulado como XML bien formado (W3C, 2000). Reglas estrictas que HTML5 relaja:

	XHTML	HTML5
Etiquetas	En minúsculas obligatorio	Insensible a mayúsculas
Cierre	Todas las etiquetas cierran (<br/>)	Algunas opcionales (<li>, <p>); los elementos vacíos (<br>, <img>) no llevan cierre
Atributos	Siempre entrecomillados y con valor	Más flexible
Anidamiento	Estricto, bien formado	Tolerante a errores
Análisis	Como XML (un error rompe la página)	Tolerante

Lo que decide si el navegador analiza un documento como XML o como HTML es su tipo MIME (application/xhtml+xml frente a text/html), no solo su contenido.

💡 Ejemplo. En XHTML, <IMG SRC=foto.jpg> es inválido: debe ser <img src="foto.jpg" alt="" />. Los navegadores procesan el HTML5 equivalente por tolerancia, pero un <img> sin alt no es HTML válido ni accesible: tolerante no significa conforme. XHTML aporta rigor (útil para procesado automático), pero HTML5 se impuso por su tolerancia.

1.5 Accesibilidad web: WCAG, ATAG, WAI-ARIA y Real Decreto 1112/2018

La accesibilidad web busca que el contenido pueda usarse por cualquier persona, con independencia de su discapacidad o de su dispositivo. Los estándares de la WAI (Web Accessibility Initiative) del W3C:

Estándar	A quién se dirige
WCAG (Web Content Accessibility Guidelines)	Las pautas para que el contenido web sea accesible (la 2.1 es la exigida; existe la 2.2)
ATAG (Authoring Tool Accessibility Guidelines)	Las herramientas de autor (CMS, editores): que sean accesibles y que generen contenido accesible
UAAG (User Agent Accessibility Guidelines)	Los navegadores y reproductores
WAI-ARIA (Accessible Rich Internet Applications)	Atributos especiales (role, aria-*) para hacer accesibles las aplicaciones web dinámicas

WCAG 2.1: cuatro principios —POUR—: Perceptible, Operable (manejable con solo el teclado, con tiempo suficiente), Comprensible (legible, predecible, ayuda a evitar y corregir errores; incluye las etiquetas o instrucciones cuando se pide una entrada y declarar el idioma de la página con lang) y Robusto (compatible con tecnologías de apoyo). Cada criterio de éxito tiene un nivel de conformidad: A, AA y AAA. Declarar el idioma de la página (<html lang="es">) es un criterio de nivel A del principio Comprensible; su ausencia es una no conformidad.

WAI-ARIA — atributos más preguntados: aria-live (marca una región que se actualiza, para que el lector de pantalla avise: polite, assertive u off), aria-label y aria-labelledby (nombre accesible), aria-checked (estado de una casilla), aria-valuenow (valor actual de un control deslizante o barra de progreso) y aria-flowto (orden alternativo de lectura). Herramientas automáticas de evaluación: QualWeb, WAVE, TAW o Lighthouse; no sustituyen a la revisión manual. ARIA tampoco repara por sí sola una semántica o un manejo de teclado mal hechos: hay que cuidar el nombre accesible, el estado, el foco y los anuncios.

Normativa en España: el Real Decreto 1112/2018, de 7 de septiembre, sobre accesibilidad de los sitios web y aplicaciones para dispositivos móviles del sector público, traspone la Directiva (UE) 2016/2102: los contenidos deben ser perceptibles, operables, comprensibles y robustos (art. 5) y se presume conforme el que cumple la norma europea EN 301 549 (art. 6), que remite a WCAG 2.1 nivel AA. Obliga a publicar una declaración de accesibilidad y a habilitar un mecanismo para solicitudes de información accesible y quejas (art. 12), que la entidad debe responder en veinte días hábiles (con suspensión del plazo si se piden aclaraciones; su aplicación a las administraciones autonómicas tiene matices competenciales). La norma EN 301 549 se cita con su versión armonizada y su nivel: cumplir WCAG 2.1 AA no agota todas sus obligaciones.

1.6 Usabilidad y diseño de interfaces

• UI (User Interface) se ocupa de los aspectos visuales e interactivos (colores, botones, tipografía); UX (User Experience) de la usabilidad y la satisfacción global del usuario con el producto. No son sinónimos.
• Los 10 principios heurísticos de Nielsen: 1) visibilidad del estado del sistema (informar de lo que ocurre: una acción sin respuesta durante segundos incumple esta), 2) concordancia con el mundo real, 3) control y libertad del usuario, 4) consistencia y estándares, 5) prevención de errores, 6) reconocimiento antes que recuerdo (no al revés), 7) flexibilidad y eficiencia de uso, 8) diseño estético y minimalista, 9) ayudar a reconocer, diagnosticar y recuperarse de los errores y 10) ayuda y documentación.
• Sistemas de diseño (conjunto de componentes y reglas reutilizables): Material Design (Google), Fluent (Microsoft), Carbon (IBM). WCAG y WAI-ARIA son estándares de accesibilidad, no sistemas de diseño.