🔹 <!
DOCTYPE html>
👉 Diz pro navegador que isso é um documento HTML5.
Sem isso, o navegador pode interpretar o código de forma errada ou “antiga”.
🔹 <html lang="pt-br">
👉 Início do HTML todo.
O atributo lang="pt-br" avisa que o conteúdo está em português do Brasil, o que
ajuda em acessibilidade e SEO.
🔹 <head>
👉 Parte "invisível" do site — são configurações e links que não aparecem direto na
tela, mas são essenciais.
Dentro do <head>:
<meta charset="UTF-8">
👉 Diz que o site usa caracteres universais, como ç, ã, é, etc. Sem isso, os acentos
podem quebrar!
<title>Título da Página</title>
👉 É o nome que aparece na aba do navegador.
<link rel="stylesheet" href="[Link]">
👉 Conecta o HTML ao seu arquivo de estilo CSS.
O navegador vai buscar o arquivo [Link] pra aplicar o visual do site.
🔹 <body>
👉 É o corpo visível do site — tudo que o usuário vê na tela.
Agora os elementos dentro do <body>:
✅ <header>
👉 Cabeçalho do site — geralmente tem logo, título ou menu.
✅ <nav>
👉 Onde vai o menu de navegação, com os links tipo: Início | Sobre | Contato.
✅ <main>
👉 A parte principal do conteúdo da página. Cada página só deve ter um <main>.
✅ <section>
👉 Uma seção do conteúdo. Tipo um bloco que agrupa algo relacionado: "Produtos",
"Serviços", etc.
✅ <article>
👉 Um conteúdo independente dentro da página — pode ser uma notícia, post de blog,
ou algo que faz sentido sozinho.
✅ <footer>
👉 O rodapé do site — geralmente tem informações finais, tipo direitos autorais,
links sociais, etc.
⚠️ Observação:
Todos esses elementos (header, nav, main, etc.) são chamados de tags semânticas,
porque indicam o significado de cada parte do seu site. Isso ajuda:
Motores de busca (Google)
Acessibilidade (leitores de tela)
Organização do seu código