Estrutura do HTML: os blocos de construção
Entenda a estrutura básica de um documento HTML.
Estrutura do HTML: os blocos de construção é uma aula grátis de HTML for Kids no CoddyKit. Esta é a aula 2 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 HTML for Kids, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML for Kids inclui 4 aulas no total.
Estrutura do HTML: os blocos de construção
Boas-vindas à segunda lição! Hoje, vamos aprender sobre a estrutura de um documento HTML e como suas partes se encaixam. Pense nisso como aprender o esqueleto de uma página da web.
A estrutura do documento HTML
Um documento HTML tem uma estrutura específica que o navegador entende. É como uma receita que informa ao navegador o que fazer.
As partes básicas de um documento HTML são:
- Declaração do tipo de documento: informa ao navegador que este é um documento HTML.
- Etiqueta HTML: contém todo o conteúdo da página.
- Cabeçalho: contém informações sobre a página, como o título.
- Corpo: contém o conteúdo visível para o usuário.
Qual é a aparência da estrutura?
Veja como é a estrutura básica de um documento HTML:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is the content of my web page.</p>
</body>
</html>
A declaração do tipo de documento
A declaração <!DOCTYPE html> aparece no início de todo documento HTML. Ela informa ao navegador que deve esperar HTML5, a versão mais recente do HTML.
Pense nela como o ponto de partida da sua receita de HTML!
A etiqueta HTML
A etiqueta <html> é o contêiner principal de todo o código do seu documento. Ela informa ao navegador: “Tudo o que está aqui dentro é HTML.”
Veja como ela aparece:
<html>
<!-- All other HTML tags go here -->
</html>
A seção de cabeçalho
A seção <head> contém informações sobre sua página da web que não ficam visíveis na própria página. Por exemplo:
- Título: o texto exibido na aba do navegador.
- Informações meta: detalhes adicionais, como a descrição da página.
Exemplo:
<head>
<title>My Cool Web Page</title>
</head>
A seção do corpo
A seção <body> contém tudo o que fica visível para o usuário, como textos, imagens e links. Essa é a área principal do conteúdo.
Exemplo:
<body>
<h1>Welcome!</h1>
<p>This is my awesome web page.</p>
</body>
Reunindo tudo
Aqui está um exemplo completo de um documento HTML com todas as partes que acabamos de aprender:
<!DOCTYPE html>
<html>
<head>
<title>All About Me</title>
</head>
<body>
<h1>Hi, I’m a Web Creator!</h1>
<p>This is my first structured HTML page.</p>
</body>
</html>
Muito bem!
Parabéns! Você aprendeu a estrutura de um documento HTML. Agora sabe como todas as partes se encaixam para formar uma página da web. Na próxima lição, começaremos a adicionar conteúdo real às nossas páginas. Prepare-se para criar sua primeira obra-prima da web!
Perguntas Frequentes
A aula “Estrutura do HTML: os blocos de construção” é grátis?
Sim — o texto completo de “Estrutura do HTML: os blocos de construção” é 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 HTML for Kids, atualize para CoddyKit PRO. O curso de HTML for Kids inclui 4 aulas no total.
O que vou aprender em “Estrutura do HTML: os blocos de construção”?
Entenda a estrutura básica de um documento HTML. Você pratica HTML for Kids 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 HTML for Kids?
Nenhuma experiência prévia é necessária. HTML for Kids 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 2 de 4.
Quanto tempo leva a aula “Estrutura do HTML: os blocos de construção”?
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 HTML for Kids?
Sim. Cada aula de HTML for Kids 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
- O que é HTML?
- Estrutura do HTML: os blocos de construção
- Tags e elementos HTML
- Configurando sua primeira página HTML