HTML, CSS e JavaScript
O , dentro de um navegador, é construído a partir de exatamente três linguagens. Você não precisa escrevê-las à mão, mas precisa saber o que cada uma é responsável por.
HTML (HyperText Markup Language, ou Linguagem de Marcação de Hipertexto) é a estrutura — o conteúdo e seu esqueleto. Ele diz "aqui tem um título, aqui tem um parágrafo, aqui tem um botão." São os substantivos da página; sozinho, o HTML é um documento simples e sem estilo, como um arquivo de texto com etiquetas. O navegador transforma seu HTML em uma árvore viva de objetos em memória chamada DOM (Document Object Model, ou Modelo de Objeto de Documento); quando um código "muda a página", na verdade ele está mudando o DOM, e o navegador redesenha a tela para acompanhar.
CSS (Cascading Style Sheets, ou Folhas de Estilo em Cascata) é o estilo — a aparência de tudo. Cores, fontes, espaçamento, layout, alinhado à esquerda ou centralizado, tela pequena versus tela grande. O CSS não muda o que está na página, apenas como isso é apresentado. Se o HTML são os substantivos, o CSS são os adjetivos.
JavaScript (JS) é o comportamento — o que acontece quando você interage. Ele fica escutando o clique, envia os dados para o , mostra um indicador de carregamento, atualiza o DOM quando a resposta chega. HTML e CSS são estáticos; o JavaScript faz uma página fazer coisas. São os verbos. (A mesma linguagem também costuma rodar o backend, por isso você a vê em todo lugar.)
Uma forma de visualizar essa divisão: o HTML constrói uma árvore (o DOM), o CSS a pinta, e o JavaScript entra e a modifica:
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" │
└──────────────────────────┘