Lenguajes y formatos de la web

HTML (HyperText Markup Language) describe qué es cada parte de una página: un título, un párrafo, un enlace, un formulario. «HTML5» fue la última versión con número, en 2014; desde entonces es un estándar vivo que mantiene el WHATWG y que se llama, simplemente, HTML.

HTML5 trajo elementos semánticos como <header>, <nav>, <main> o <article>, audio y vídeo nativos con <audio> y <video>, nuevos tipos de campo (email, date, range) y la base de muchas de las APIs de JavaScript que verás al final de este módulo.

CSS (Cascading Style Sheets) aplica estilos a los elementos HTML mediante selectores y propiedades. La «cascada» es la regla que resuelve los conflictos cuando varias reglas afectan al mismo elemento: gana la más específica y, a igualdad, la última.

No existe un «CSS4»: desde CSS3, el lenguaje se divide en módulos que avanzan cada uno a su ritmo. Los más útiles hoy son Flexbox y Grid para maquetar, las variables (custom properties), las consultas de contenedor (@container), el anidamiento nativo, el selector :has() y las capas de cascada (@layer).

Ojo con el nombre: los CSS Modules son otra cosa. Son archivos .module.css que tu herramienta de build procesa para que cada nombre de clase sea único y no choque con el de otro componente.

JavaScript añade comportamiento: responder a un clic, pedir datos al servidor, modificar el DOM. Su estándar se llama ECMAScript y el comité TC39 publica una edición cada año. ES2015 (también llamado ES6) fue el gran salto: trajo let y const, funciones flecha, clases, módulos y promesas.

Es un lenguaje dinámico, en el que las variables no tienen un tipo fijo, y asíncrono por naturaleza: no se queda bloqueado esperando a la red, sino que reacciona cuando llega la respuesta. Con Node.js también se ejecuta en el servidor; lo verás a fondo en el módulo de lenguajes de programación.

TypeScript, creado por Microsoft en 2012, es un superconjunto de JavaScript: todo JavaScript válido es TypeScript válido y, además, puedes anotar tipos. El compilador revisa el código y te avisa de errores, como pasar un texto donde se esperaba un número, antes de que lleguen al usuario.

Los navegadores no entienden TypeScript, así que se compila a JavaScript, que en la práctica consiste sobre todo en quitarle los tipos. Las versiones recientes de Node.js ya hacen eso por su cuenta al cargar un archivo .ts.

JSON (JavaScript Object Notation) representa datos con la sintaxis de los objetos de JavaScript, pero más estricta: claves entre comillas dobles, sin comas al final y sin comentarios. Solo admite seis tipos de valor: texto, número, booleano, null, objeto y lista.

Es el formato por defecto de casi todas las APIs. En JavaScript conviertes un objeto en texto con JSON.stringify() y un texto en objeto con JSON.parse(), o directamente con respuesta.json() al usar fetch.

YAML describe los mismos datos que JSON, pero con indentación en lugar de llaves y comillas. Admite comentarios con #, textos de varias líneas y referencias para no repetir bloques. De hecho, casi cualquier JSON es también YAML válido.

Es el idioma de la configuración en el mundo DevOps: Docker Compose, Kubernetes, GitHub Actions, GitLab CI y OpenAPI usan archivos .yaml o .yml.

XML (eXtensible Markup Language) se parece a HTML, pero no tiene etiquetas predefinidas: inventas las tuyas. Es muy estricto (toda etiqueta se cierra y un solo error invalida el documento) y admite atributos, espacios de nombres y validación con esquemas XSD.

Dominó en los años 2000 y sigue muy presente: los servicios SOAP, los feeds RSS, los sitemaps para buscadores, los documentos de Office (un .docx es XML comprimido) y el propio SVG son XML.

SVG (Scalable Vector Graphics) describe imágenes con formas geométricas (círculos, rectángulos, trazados) en lugar de píxeles. Como es XML, puedes escribirlo a mano, incrustarlo directamente en el HTML, darle estilo con CSS y modificarlo con JavaScript.

Al ser vectorial, un icono SVG se ve igual de nítido en un reloj que en un monitor 4K, y suele pesar mucho menos que un PNG equivalente. Todos los iconos de esta app son SVG.

Markdown, creado por John Gruber en 2004, te permite dar formato escribiendo de forma natural: # para un título, dos asteriscos para la negrita, un guion para cada elemento de una lista o [texto](url) para un enlace. Después, un programa lo convierte en HTML.

Es el formato de los README.md de GitHub y GitLab, de mucha documentación técnica y de herramientas de notas como Obsidian. La variante de referencia es CommonMark, y GitHub Flavored Markdown le añade tablas y listas de tareas.