Carregando...

HTML básico

Nas lições anteriores conheceu o HTML e escolheu um editor. Agora vai construir uma página básica completa: o esqueleto padrão com que todo arquivo HTML moderno deve começar, mais um pouco de conteúdo visível.

O que é um documento HTML básico?

Um documento HTML básico é um arquivo de texto com estrutura exterior fixa. Dentro coloca o conteúdo que os visitantes veem. Quase cada página deste curso reutiliza o mesmo esqueleto exterior e muda o que vai no body.

Resposta direta: o esqueleto necessário

Uma página básica moderna inclui estas partes nesta ordem:

<!DOCTYPE html> — declara um documento HTML5
<html> — o elemento raiz que envolve toda a página
<head> — informação sobre a página (não o artigo visível principal)
<title> dentro do head — texto para o separador do navegador e favoritos
<body> — o conteúdo que as pessoas veem na página

Documento HTML básico

html

HTML Code

<!DOCTYPE html>
<html>
<head>
<title>Título da página</title>
</head>
<body>
<h1>Isto é um título</h1>
<p>Isto é um parágrafo.</p>
</body>
</html>

Ler o exemplo linha a linha

O doctype deve vir primeiro para o navegador usar regras HTML modernas
Tudo o resto fica dentro de <html> ... </html>
<head> guarda o título; os visitantes notam-no sobretudo no nome do separador
<body> guarda o título e o parágrafo que vê na área da página
A maioria dos elementos precisa de uma etiqueta de fecho com barra, como </p>

Head vs body

Pense em <head> como notas dos bastidores e em <body> como o palco. Motores de busca e navegadores usam o título e outros dados do head. Quem lê a página olha para o body. Colocar o texto principal do artigo só no head é um erro comum de iniciantes.

Aninhamento e ordem

Os elementos HTML aninham-se: um elemento pode ficar dentro de outro. Mantenha as etiquetas numa árvore clara. Feche as etiquetas internas antes das externas. Para o esqueleto básico conserve esta ordem: doctype, depois html, depois head (com title), depois body.

Experimente você mesmo

Crie um arquivo chamado basic.html no seu editor
Cole o exemplo acima
Altere o texto do title e do título
Guarde o arquivo e abra-o no navegador
Após guardar e atualizar, confirme que o título do separador e o título da página foram ambos atualizados

Pequenas dicas que poupam tempo depois

Prefira nomes de etiquetas em minúsculas (<p>, não <P>) para estilo HTML moderno
Indente linhas aninhadas para ver quais etiquetas pertencem juntas
Mantenha um <h1> claro como título principal nos primeiros exemplos
Vai adicionar charset, links, imagens e mais mais tarde; domine primeiro este esqueleto

Erros comuns

Esquecer <!DOCTYPE html> no topo
Fechar etiquetas na ordem errada (por exemplo fechar html antes de body)
Colocar o título visível só dentro de <head>
Guardar sem a extensão .html e perguntar-se pelo comportamento estranho do navegador
Escrever uma etiqueta de abertura sem o fecho quando o elemento precisa de ambos

Resumo

Uma página HTML básica usa doctype, html, head, title e body
O title aparece sobretudo no separador do navegador
O conteúdo visível pertence ao body
Os elementos aninham-se; feche primeiro as internas
Pratique editando um arquivo pequeno e atualizando o navegador
As lições seguintes adicionam mais elementos sobre o mesmo esqueleto

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓

Perguntas

🎯

70%

Para Passar

♾️

∞

Tempo

🔄

∞

Tentativas

📝 Instruções

Leia cada pergunta cuidadosamente
Selecione a melhor resposta para cada pergunta
Você pode refazer o quiz quantas vezes quiser
Seu progresso será mostrado no topo

Idioma