Sua primeira página HTML

Agora você vai montar uma página HTML completa. Uma página real tem algumas partes básicas que ajudam o navegador a entender o documento.

A estrutura principal

Uma página HTML comum começa com <!doctype html> e usa as tags <html>, <head> e <body>.

<!doctype html> informa que o documento usa HTML moderno.
<html> envolve toda a página.
<head> guarda informações sobre a página.
<body> guarda o conteúdo visível.

Primeiro exemplo

Editável

<!doctype html>
<html>
  <head>
    <title>Minha página</title>
  </head>
  <body>
    <h1>Olá, HTML!</h1>
    <p>Esta é minha primeira página completa.</p>
  </body>
</html>

O que aparece no resultado?

O conteúdo dentro de <body> aparece na página. O conteúdo dentro de <head> ajuda o navegador, mas normalmente não aparece como texto principal.

Mini tarefa

Troque o título visível dentro de <h1> e escreva um novo parágrafo. Clique em Executar para ver a página atualizada.

Pequeno quiz

Pergunta: Onde fica o conteúdo visível da página?

A) Dentro de <head>. B) Dentro de <body>. C) Dentro de <!doctype html>.

Resposta: B. O conteúdo visível fica dentro de <body>.

Pequeno desafio

Crie uma página completa com:

Um título da página em <title>.
Um título principal em <h1>.
Dois parágrafos em <p>.

Editável

<!-- coloque seu código abaixo -->

Resumo

Uma página HTML completa tem uma estrutura básica.
<head> guarda informações sobre o documento.
<body> guarda o conteúdo visível.
Começar com uma estrutura clara facilita aprender HTML.