HTML, CSS y JavaScript
El , en un navegador, está construido a partir de exactamente tres lenguajes. No necesitas escribirlos a mano, pero sí necesitas saber qué le corresponde a cada uno.
HTML (HyperText Markup Language, Lenguaje de Marcado de Hipertexto) es la estructura — el contenido y su esqueleto. Dice "aquí hay un encabezado, aquí hay un párrafo, aquí hay un botón." Son los sustantivos de la página; por sí solo, el HTML es un documento plano, sin estilo, como un archivo de texto con etiquetas. El navegador convierte tu HTML en un árbol vivo de objetos en memoria llamado el DOM (Document Object Model, Modelo de Objetos del Documento); cuando el código "cambia la página", en realidad está cambiando el DOM, y el navegador vuelve a dibujar para reflejarlo.
CSS (Cascading Style Sheets, Hojas de Estilo en Cascada) es el estilo — cómo se ve todo. Colores, fuentes, espaciado, disposición, izquierda o centrado, pantalla pequeña versus grande. El CSS no cambia qué hay en la página, solo cómo se presenta. Si el HTML son los sustantivos, el CSS son los adjetivos.
JavaScript (JS) es el comportamiento — lo que sucede cuando interactúas. Escucha el clic, envía los datos al , muestra un indicador de carga, actualiza el DOM cuando llega la respuesta. HTML y CSS son estáticos; JavaScript hace que una página haga cosas. Son los verbos. (El mismo lenguaje también suele ejecutar el backend, por eso lo verás en todas partes.)
Una forma de imaginar la división: el HTML construye un árbol (el DOM), el CSS lo pinta, y JavaScript entra y lo cambia:
HTML ─▶ builds the DOM tree CSS ─▶ styles it JS ─▶ changes it
┌──────────────────────────┐
│ page (document) │
│ ├── header │ colors, fonts, on click,
│ │ └── "My App" │ spacing applied update a node
│ └── form │ to each node → browser redraws
│ ├── input (name) │
│ └── button "Save" │
└──────────────────────────┘