Fundamentos da web

Do que uma página é feita, como as partes se aninham e onde ver isso acontecendo. O vocabulário mínimo pra ler qualquer interface por dentro.

11 min · atualizado em 08 de ago. de 2026

Esta página que você está lendo é uma árvore de umas quarenta caixas com nome. O cabeçalho é uma delas, esta frase está dentro de outra, e você conseguiria apontar quase todas só pela posição na tela.

O que separa quem lê uma página de quem só olha não é saber escrever código. São três coisas: saber do que ela é feita, entender como as partes se encaixam umas dentro das outras, e conhecer o lugar onde dá pra ver isso acontecendo.

É o assunto deste guia. No fim dele você abre qualquer site, olha a estrutura e reconhece o que está vendo. Isso é o pré-requisito de todo o resto da trilha, e é o que transforma "vou perguntar pro dev" em "acho que já sei o que está acontecendo aqui".

Três camadas, e cada uma tem um trabalho

Toda página da web é feita de três coisas empilhadas:

HTML é a estrutura. O que existe e o que cada coisa é: isto é um título, isto é um botão, isto é uma lista
CSS é a aparência. Cor, espaçamento, tamanho, posição, animação
JavaScript é o comportamento. O que acontece quando alguém clica, digita ou rola

A separação não é organizacional, é funcional, e é ela que decide de quem é cada problema.

"O botão está com a cor errada" é CSS. "O botão não aparece pro leitor de tela" é HTML. "O botão não faz nada quando clica" é JavaScript.

Saber em qual das três caixas um problema mora encurta metade das conversas com o time. Você para de dizer "tem um bug no botão" e passa a dizer onde ele está.

A árvore

Quando o navegador recebe uma página, ele monta uma estrutura em árvore na memória. Um elemento dentro do outro, cada um com seus filhos, na ordem:

<body>
  <header>
    <nav>...</nav>
  </header>
 
  <main>
    <h1>Título da página</h1>
    <article>
      <h2>Um bloco de conteúdo</h2>
      <p>Um parágrafo.</p>
    </article>
  </main>
 
  <footer>...</footer>
</body>

Isso é o DOM, e a leitura dele é a mesma de um painel de camadas: indentação é aninhamento, ordem é ordem, e o que está dentro de quê é o que está dentro de quê.

A diferença que importa é o peso do nome. Num arquivo de design, uma camada pode se chamar qualquer coisa e nada muda: o nome é organização, não função. No HTML, a tag é funcional. Trocar div por button muda o comportamento do elemento sem trocar uma vírgula de estilo.

Tem uma segunda diferença que muda o seu trabalho. No arquivo de design, a ordem das camadas define o que aparece na frente. No HTML, a ordem define a sequência de leitura: é a ordem em que a página é falada por um leitor de tela e percorrida quando alguém aperta Tab. O que fica na frente visualmente é uma decisão separada, de CSS.

Ou seja: dá pra ter uma página visualmente impecável e completamente fora de ordem pra quem não enxerga ela. Isso não é hipótese rara, é comum, e só aparece pra quem olha a estrutura.

Onde ver tudo isso

Não precisa instalar nada. O inspetor já vem no navegador, escondido atrás da tecla F12.

Quatro coisas pra fazer lá dentro, em ordem de utilidade pra quem desenha:

Selecionar elemento. Tem uma setinha no canto superior esquerdo do painel. Clica nela e passa o mouse pela página: cada bloco acende com a tag, o tamanho e o espaçamento interno. É a forma mais rápida de perceber que a web inteira é feita de caixas empilhadas
Ler os estilos. O painel da direita lista todo o CSS aplicado naquele elemento, com o que venceu a briga no topo e o que perdeu riscado. É aqui que "acho que tem uns 2px de diferença" vira um número
Editar ao vivo. Clica num valor, troca, vê na hora. Nada disso salva. F5 e volta tudo
Simular dispositivo. Ver a página em qualquer largura, e não só nas três que você desenhou. É onde a maior parte dos layouts começa a ranger

Vale fazer isso nos produtos que você admira. Descobrir que aquele menu que parecia sofisticado são doze linhas de CSS é o tipo de coisa que baixa a barreira de forma permanente.

Tag, atributo, conteúdo

O vocabulário mínimo pra conseguir ler qualquer linha:

<a href="/glossario" class="link-azul">Abrir o glossário</a>

<a> é a tag de abertura, </a> a de fechamento. Ela diz o que a coisa é. a é link
href e class são atributos, a configuração daquele elemento. href é o destino, class é o gancho pro CSS achar ele
"Abrir o glossário" é o conteúdo, o que aparece na tela
tudo junto é um elemento

Reconhecer esses quatro pedaços é o suficiente pra ler HTML sem se perder, e é literalmente tudo que você precisa decorar neste guia.

As tags que aparecem sempre

Não são muitas. Estas cobrem a maior parte do que existe por aí:

Tag	O que é
`<h1>` a `<h6>`	Títulos, do mais importante ao menos
`<p>`	Parágrafo
`<a>`	Link, leva pra algum lugar
`<button>`	Botão, faz alguma coisa acontecer
`<ul>`, `<ol>`, `<li>`	Lista sem ordem, lista numerada, e cada item
`<img>`	Imagem
`<input>`, `<label>`	Campo de formulário e o rótulo dele
`<header>`, `<nav>`, `<main>`, `<footer>`	As regiões da página
`<article>`, `<section>`	Blocos de conteúdo
`<div>`, `<span>`	Caixas sem significado nenhum

Repare na assimetria: as nove primeiras linhas descrevem o que a coisa é, e a última descreve nada. É por isso que a última merece cuidado.

O elemento que engana

Escolher a tag que descreve o que a coisa é, em vez de resolver tudo com div, tem nome: HTML semântico.

Parece preciosismo até você comparar os dois:

<!-- parece botão -->
<div class="botao" onclick="salvar()">Salvar</div>
 
<!-- é botão -->
<button onclick="salvar()">Salvar</button>

Na tela, indistinguíveis. No uso, três diferenças: a div não recebe foco quando alguém aperta Tab, não dispara com Enter ou espaço, e é anunciada como "grupo" pelo leitor de tela.

Nenhuma dessas três é visível. Todas as três são graves. E as três somem trocando quatro caracteres.

Aqui entra uma opinião minha, que vale marcar como opinião: a tag é escolhida no momento em que alguém interpreta o seu design, e o nome que você deu ao componente participa dessa escolha. Um componente chamado "Botão" tem mais chance de virar <button> do que um chamado "Frame 218". Não é garantia, é probabilidade, e é uma probabilidade que sai de graça.

O teste de um minuto

Abre o seu produto, tira a mão do mouse e navega a tela inteira só de Tab.

Três perguntas: dá pra chegar em todos os controles? Dá pra ver onde você está a cada momento? A ordem em que as coisas recebem foco faz algum sentido?

Se falhar em qualquer uma, você achou um problema real, sem instalar nada e sem depender de ninguém. E achou com informação suficiente pra abrir a conversa, que é diferente de achar um relatório automatizado dizendo que existe um problema em algum lugar.

O que fazer hoje

Escolhe dois sites: um que você admira e o seu produto. Abre os dois no inspetor e compara a árvore.

Procura três coisas. Quantas div existem contra quantas tags com nome. Se existe um <main>. E se os botões são <button> de verdade.

Não precisa consertar nada, nem contar pra ninguém. O objetivo é só passar a enxergar a camada que sempre esteve ali.

O próximo módulo é CSS, onde a distância entre o que você faz no Figma e o que o navegador entende encolhe até quase zero.

Em breve

Mentoria

Quatro sessões de uma hora, no seu projeto e no seu ritmo, pra atravessar o que trava justo no seu caso.

Me avisa quando sair

Travou em alguma palavra? O glossário tem a definição curta de cada termo que apareceu aqui.