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:
Carregando...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.
Carregando...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.
Carregando...<head>Guarda informações sobre a página que não aparecem diretamente no conteúdo principal.
Carregando...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.
Carregando...Se você vê na tela, normalmente está dentro do body.
Carregando...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.