Estrutura do documento: DOCTYPE, html, head e body
Escreva do zero um documento HTML5 válido: a declaração DOCTYPE, o elemento raiz html, o head para metadados e o body para o conteúdo.
Estrutura do documento: DOCTYPE, html, head e body é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
Todo documento HTML tem o mesmo esqueleto
Um documento HTML5 válido sempre começa com uma declaração DOCTYPE, contém um elemento raiz html e, dentro dele, uma seção head para metadados e uma seção body para o conteúdo visível. Compreender essa estrutura é o primeiro passo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>A declaração DOCTYPE
<!DOCTYPE html> não é uma tag HTML — é uma instrução para o navegador renderizar a página no modo de padrões. Sem ela, os navegadores recorrem ao "modo de compatibilidade", que renderiza as páginas de maneira inconsistente. Coloque-a sempre na linha 1.
O elemento <html> e o atributo lang
O elemento <html> é a raiz do documento. Adicione um atributo lang para declarar o idioma da página. Os leitores de tela usam essa informação para escolher o mecanismo de pronúncia correto, e os mecanismos de busca usam-na para exibir resultados localizados.
<html lang="en">
<!-- or -->
<html lang="fr">
<html lang="de">O elemento <head>
O <head> contém metadados — informações sobre a página, e não o conteúdo da própria página. Nada dentro de head fica diretamente visível para os usuários, mas isso afeta a maneira como o navegador e os mecanismos de busca tratam a página.
Metatags charset e viewport
<meta charset="UTF-8"> informa ao navegador que deve decodificar o arquivo como UTF-8, dando suporte a todos os caracteres internacionais. <meta name="viewport"> faz o design responsivo funcionar em dispositivos móveis.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">O elemento <title>
O texto de <title> aparece na aba do navegador, nos favoritos e nos resultados dos mecanismos de busca. Mantenha-o conciso (50–60 caracteres), descritivo e inclua o nome da marca no final.
<title>Getting Started with HTML | CoddyKit</title>Vinculando CSS e fontes
Vincule folhas de estilo externas usando <link> dentro de head. Use rel="stylesheet" e o href correto. O Google Fonts e outros serviços de fontes também são vinculados dessa maneira.
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">O elemento <body>
Tudo o que fica visível na página está dentro de <body>: títulos, parágrafos, imagens, botões, formulários e scripts. O body é aquilo que o usuário vê e com que interage.
Tags de script: onde colocá-las
Coloque <script src="app.js" defer></script> em <head>. O atributo defer baixa o script em paralelo e o executa depois que o HTML é totalmente analisado, sendo a escolha padrão mais segura.
<head>
<script src="app.js" defer></script>
</head>Comentários em HTML
Use <!-- comment --> para adicionar observações ao seu HTML. Os comentários não são exibidos aos usuários, mas ficam visíveis na visualização do código-fonte. Use-os para explicar a intenção, marcar seções ou desativar temporariamente o código durante a depuração.
<!-- Navigation section -->
<nav>
...
</nav>
<!-- End navigation -->Validação: o validador da W3C
Cole seu HTML em validator.w3.org para verificar se há erros. Um HTML válido reduz inconsistências entre navegadores, ajuda os leitores de tela a analisar a página corretamente e demonstra qualidade profissional.
Verificação rápida
Onde a tag <meta charset="UTF-8"> deve ser colocada?
Recapitulação: o esqueleto de um documento HTML
Todo arquivo HTML precisa de: → →
(charset, viewport, title, links de CSS) → (todo o conteúdo visível). Esse esqueleto garante consistência entre navegadores, acessibilidade e indexação adequada para SEO.Perguntas Frequentes
A aula “Estrutura do documento: DOCTYPE, html, head e body” é grátis?
Sim — o texto completo de “Estrutura do documento: DOCTYPE, html, head e body” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Estrutura do documento: DOCTYPE, html, head e body”?
Escreva do zero um documento HTML5 válido: a declaração DOCTYPE, o elemento raiz html, o head para metadados e o body para o conteúdo. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “Estrutura do documento: DOCTYPE, html, head e body”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Estrutura do documento: DOCTYPE, html, head e body
- Tags semânticas: header, nav, main, article e footer
- Texto, imagens, links e listas
- Formulários: input, label e button