Estrutura básica de um documento HTML

Todo documento HTML segue uma estrutura padrão — um conjunto de elementos obrigatórios que todo navegador espera encontrar. Entender essa estrutura é como aprender a montar o esqueleto antes de adicionar qualquer músculo ou roupa por cima.

Nesta lição, você vai entender o que é cada parte, por que ela existe e qual é o seu papel.

A estrutura completa

Veja como um documento HTML básico se parece:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minha Primeira Página</title>
  </head>
  <body>
    <h1>Olá, mundo!</h1>
    <p>Este é o meu primeiro parágrafo.</p>
  </body>
</html>

À primeira vista pode parecer muita coisa, mas cada linha tem um propósito claro. Vamos destrinchar cada uma delas.

1. <!DOCTYPE html> — A declaração de tipo

<!DOCTYPE html>

Essa é sempre a primeira linha de qualquer documento HTML moderno. Ela não é uma tag HTML — é uma instrução para o navegador.

Ela diz: "Ei, navegador — esse arquivo aqui é um documento HTML5. Por favor, interprete-o usando as regras modernas."

Sem essa declaração, o navegador pode entrar em um modo chamado "quirks mode" (modo peculiar), onde ele tenta adivinhar o tipo do documento e pode renderizar a página de forma estranha e imprevisível.

💡 Nas versões antigas do HTML, o DOCTYPE era uma linha longa e complicada. No HTML5, foi simplificado para apenas <!DOCTYPE html>. Muito mais fácil!

2. <html> — O elemento raiz

<html lang="pt-BR">
  ...
</html>

A tag <html> é a raiz do documento — ela envolve absolutamente tudo que está na página. Pense nela como a caixa que contém todas as outras caixas.

O atributo lang informa ao navegador e às tecnologias assistivas (como leitores de tela) em qual idioma o conteúdo está escrito. Para português do Brasil, usamos lang="pt-BR".

Esse atributo é importante por dois motivos:

• Acessibilidade: leitores de tela usam o idioma para pronunciar o texto corretamente
• SEO: buscadores como o Google usam essa informação para entregar a página para o público certo

3. <head> — A área de configurações

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Minha Primeira Página</title>
</head>

O <head> é a área de bastidores da página — tudo o que fica aqui é invisível para o usuário, mas essencial para o funcionamento correto da página.

Pense no <head> como as configurações de um celular: você não vê essas configurações enquanto usa o aparelho, mas elas definem como tudo funciona por baixo.

Vamos conhecer o que normalmente fica dentro do <head>:

<meta charset="UTF-8">

Define a codificação de caracteres do documento. O UTF-8 é o padrão que permite exibir corretamente letras acentuadas, cedilha, emojis e caracteres de praticamente todos os idiomas do mundo.

Sem essa linha, palavras como "coração", "ação" e "português" podem aparecer com caracteres estranhos na tela.

<meta name="viewport" ...>

Essa meta tag é responsável pela responsividade da página — ou seja, por fazer com que ela se adapte corretamente à tela de dispositivos móveis.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• width=device-width → a largura da página se adapta à largura do dispositivo
• initial-scale=1.0 → define o nível de zoom inicial como 100%

Sem essa linha, seu site vai aparecer minúsculo em celulares, como se fosse uma versão reduzida da tela do computador.

<title>

<title>Minha Primeira Página</title>

Define o título da página — o texto que aparece na aba do navegador e nos resultados de busca do Google.

É um dos elementos mais importantes para SEO e para a experiência do usuário. Um bom título descreve claramente o conteúdo da página.

4. <body> — O conteúdo visível

<body>
  <h1>Olá, mundo!</h1>
  <p>Este é o meu primeiro parágrafo.</p>
</body>

O <body> é onde a mágica acontece visualmente. Tudo o que você quer que apareça na tela — textos, títulos, imagens, botões, formulários, links — vai dentro do <body>.

Se o <head> são os bastidores, o <body> é o palco.

Visualizando a hierarquia

Uma forma clara de entender essa estrutura é vê-la como uma hierarquia de caixas dentro de caixas — como uma boneca matrioska:

documento
└── <html>
    ├── <head>
    │   ├── <meta charset>
    │   ├── <meta viewport>
    │   └── <title>
    └── <body>
        ├── <h1>
        └── <p>

Essa hierarquia é o que o navegador usa para construir o DOM — a estrutura interna que vimos na lição anterior.

A indentação: organizando o código

Repare que no código de exemplo, os elementos dentro de <html> estão recuados para a direita, e os elementos dentro de <head> e <body> estão recuados ainda mais. Isso se chama indentação.

<!-- Sem indentação — difícil de ler -->
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Página</title>
</head>
<body>
<h1>Título</h1>
<p>Parágrafo</p>
</body>
</html>

<!-- Com indentação — fácil de ler -->
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8">
    <title>Página</title>
  </head>
  <body>
    <h1>Título</h1>
    <p>Parágrafo</p>
  </body>
</html>

Os dois códigos produzem exatamente o mesmo resultado no navegador. A indentação não afeta o funcionamento — ela existe apenas para tornar o código legível para humanos.

💡 O VS Code indenta o código automaticamente na maioria das situações. Você também pode selecionar todo o código e pressionar Shift + Alt + F para formatar automaticamente.

Juntando tudo

Veja o documento completo com comentários explicando cada parte:

<!-- Informa ao navegador que este é um documento HTML5 -->
<!DOCTYPE html>

<!-- Elemento raiz da página; lang define o idioma como português do Brasil -->
<html lang="pt-BR">

  <!-- Área de configurações — invisível para o usuário -->
  <head>

    <!-- Define a codificação de caracteres para suportar acentos e símbolos -->
    <meta charset="UTF-8">

    <!-- Garante que a página se adapte a telas de celular -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Título exibido na aba do navegador e nos resultados de busca -->
    <title>Minha Primeira Página</title>

  </head>

  <!-- Área de conteúdo visível — tudo que o usuário vê na tela -->
  <body>

    <h1>Olá, mundo!</h1>
    <p>Este é o meu primeiro parágrafo.</p>

  </body>

</html>

Resumindo