HTML do zero

O esqueleto por trás de toda página web

29 de junho de 2026 Front-end 2 min de leitura

Quando comecei a estudar Front-End, uma das primeiras coisas que precisei entender foi que uma página da web não começa pelo visual. Antes de pensar em cores, fontes ou animações, existe uma estrutura que organiza todo o conteúdo. É aí que entra o HTML.

HTML significa HyperText Markup Language e é a linguagem de marcação utilizada para estruturar os elementos de uma página. Enquanto o CSS fica responsável pela estilização e o JavaScript pela programação e pela dinamicidade, o HTML funciona como a base de tudo.

Diferentemente de uma linguagem de programação, o HTML não executa lógica — ele marca o conteúdo, indicando ao navegador o que cada parte representa. Essas marcações são feitas por meio de tags, normalmente escritas entre < e >. Por exemplo:

<h1>Meu primeiro site</h1>

Aqui, h1 representa o título principal da página.

O HTML tem seis níveis de título:

h1 — título principal;
h2 — segundo nível;
h3 — terceiro nível;
e assim por diante, até h6.

Uma boa prática que aprendi durante os estudos foi usar apenas um h1 por página, representando o título principal daquele conteúdo.

Antes de começar a colocar conteúdo, existe uma estrutura básica que organiza o documento:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Minha página</title>
  </head>

  <body></body>
</html>

Vale entender cada parte separadamente.

<!DOCTYPE html> informa ao navegador qual versão do HTML está sendo utilizada. Não é considerado uma tag, mas sim uma declaração.

<html> é a tag raiz: todo o código HTML da página fica dentro dela. A partir daí, o documento é dividido principalmente em duas partes: head e body.

O head contém informações importantes para o navegador, mas que não fazem parte do conteúdo visual da página — os chamados metadados. É dentro dele que aparece, por exemplo:

<title>Meu site</title>

A tag title define o título do projeto ou da página, exibido na aba do navegador.

Também é possível usar a tag meta para adicionar informações como descrição da página, autor, palavras-chave e outros dados usados pelo navegador. Diferentemente de tags como title, meta é uma tag vazia — não tem conteúdo entre abertura e fechamento. As informações são definidas por meio de atributos como name e content.

Enquanto o head concentra informações destinadas ao navegador, o body representa o corpo da página: é nele que fica o conteúdo que será apresentado ao usuário.

Eu entendi que o HTML determina o que existe na página e como esse conteúdo está organizado; a estilização fica por conta do CSS.

Por isso, antes de pensar em criar uma página bonita, é importante entender como construir uma página bem estruturada.