Como funciona a base de um arquivo HTML com doctype, html, head e body
Quase todo documento HTML começa com uma estrutura parecida. Ela funciona como o esqueleto da página.
Veja o exemplo:
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>Minha página</title> 5 </head> 6 <body> 7 <h1>Olá!</h1> 8 <p>Bem-vindo ao meu site.</p> 9 </body> 10</html>
Pode parecer muita coisa para uma página tão simples, mas cada parte tem sua função.
<!DOCTYPE html>Indica ao navegador que o documento está usando HTML5.
1<!DOCTYPE html>
Sem isso, alguns navegadores podem entrar em modos antigos de interpretação. E aí a diversão vira manutenção estranha.
<html>É o elemento raiz do documento. Tudo fica dentro dele.
1<html> 2 ... 3</html>
<head>Guarda informações sobre a página que não aparecem diretamente no conteúdo principal.
1<head> 2 <title>Minha página</title> 3</head>
Aqui costumam ficar título da aba, metadados, links para arquivos de estilização (CSS) e outras configurações.
<body>Contém tudo o que aparece para a pessoa usuária.
1<body> 2 <h1>Olá!</h1> 3 <p>Bem-vindo ao meu site.</p> 4</body>
Se você vê na tela, normalmente está dentro do body.
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>Loja do João</title>
Aqui o texto Loja do João aparece na aba do navegador, enquanto o título e o parágrafo aparecem dentro da página.
Mesmo que a página ainda seja pequena, vale a pena montar a estrutura correta desde o início. Isso evita bagunça e já acostuma você a escrever HTML do jeito esperado pelos navegadores.