HTML

La estructura de toda página web

HTML describe el contenido y la estructura de toda página web. Desde tus primeras etiquetas hasta formularios accesibles y HTML semántico, este itinerario te ofrece unos cimientos sólidos para todo lo demás en el desarrollo web.

Fundamentos

Principiante - lo básico, paso a paso

• ¿Qué es HTML? Etiquetas y atributosDescubre qué es HTML y aprende a reconocer una etiqueta y un atributo.
• Estructurar el texto: títulos, párrafos y listasAprende a organizar el texto con una jerarquía de títulos, párrafos y listas.
• Enlaces e imágenesCrea enlaces a otras páginas y muestra imágenes con las etiquetas a e img.
• Tablas sencillasPresenta datos en filas y columnas con las etiquetas table, tr, th y td.
• El esqueleto completo de una página HTMLEnsambla una página web completa con el doctype y las etiquetas html, head, meta y body.

Progresión

Intermedio - crear proyectos reales

• Formularios: input, label, select, textarea, buttonConstruye formularios completos, accesibles y listos para producción.
• HTML semántico: estructurar una página realSustituye tus divs anónimos por etiquetas que dan sentido a tu estructura.
• Multimedia: audio, video, figure y figcaptionIncrusta sonido, vídeo e ilustraciones con leyenda sin ningún plugin.
• Atributos globales y data-*Aprovecha los atributos que funcionan en todas partes y guarda tus propios datos en el HTML.
• Preparar tu página para la webPule el head de tu página: título, descripción, favicon y enlaces externos seguros.

Avanzado

Competente - patrones avanzados y rendimiento

• Accesibilidad: alt, jerarquía de títulos y ARIADomina el texto alternativo, una jerarquía de títulos que los lectores de pantalla puedan recorrer de verdad, y un uso de ARIA limitado a los casos en que el HTML nativo se queda corto.
• Formularios avanzados y validación nativaAprovecha required, pattern, inputmode y la Constraint Validation API para formularios robustos sin ninguna librería externa.
• Imágenes responsivas: srcset, sizes y pictureSirve la imagen adecuada a la pantalla adecuada con srcset y sizes, reserva picture para la dirección de arte y domina el lazy loading.
• SEO técnico: Open Graph y datos estructuradosControla la previsualización de tus páginas en las redes sociales con Open Graph y aspira a resultados enriquecidos con schema.org en JSON-LD.
• Rendimiento de carga: defer, async, preload y prefetchOrdena la ejecución de tus scripts con defer y async, y luego dirige la red con preload, preconnect y prefetch.

Maestría

Experto - arquitectura, internos y casos límite

• Del HTML al DOM: análisis y recuperación de erroresComprende cómo el navegador convierte cualquier flujo HTML, incluso mal formado, en un árbol DOM determinista.
• Web Components: elementos personalizados, shadow DOM y slotsDomina el ciclo de vida de los elementos personalizados, la encapsulación del shadow DOM y la proyección de contenido mediante slots.
• Internacionalización: lang, dir, charset y trampas de UnicodeUsa lang, dir y la declaración de codificación con criterio, y vence las trampas de normalización y direccionalidad de Unicode.
• Seguridad del lado de HTML: XSS, sandbox, noopener y CSPIdentifica los vectores de XSS propios del marcado y despliega las defensas nativas de HTML: sandbox, noopener y Content Security Policy.
• HTML interactivo moderno: dialog, details, popover, contenteditableReemplaza tus bibliotecas de UI con las primitivas nativas del HTML moderno: diálogos modales, acordeones exclusivos, popovers y regiones editables.