Curso de HTML / Estrutura básica de um documento HTML

Um documento HTML começa com uma declaração <!doctype html>, seguida pelo elemento raiz html. Dentro de html, head contém os metadados do documento enquanto body contém o conteúdo principal da página. Você pode salvar o exemplo abaixo como um arquivo HTML e abri-lo em um navegador.

A forma básica de um documento HTML

Comece examinando o exemplo completo. O elemento externo html contém tanto head quanto body.

<!doctype html>

<html lang="pt-BR">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Meu primeiro documento HTML</title>

  </head>

  <body>

    <h1>Olá</h1>

    <p>Este é o corpo do documento.</p>

  </body>

</html>

A indentação facilita a visualização de elementos aninhados uns dentro dos outros. O navegador interpreta as tags para construir a estrutura do documento; o título e o parágrafo dentro de body constituem o conteúdo que você vê principalmente na página.

O que cada parte faz?

• <!doctype html>: Declara o documento como HTML. Não é um elemento HTML. Colocá-lo no início ajuda o navegador a usar o modo de padrões (standards mode).
• <html lang="pt-BR">: O elemento raiz do documento. lang="pt-BR" identifica o português do Brasil como idioma principal, o que ajuda ferramentas como leitores de tela a escolher a pronúncia apropriada.
• <head>: Contém metadados como o título do documento, a codificação de caracteres e as configurações da janela de exibição. Seu conteúdo não aparece totalmente no corpo da página.
• <body>: Contém o conteúdo principal da página, incluindo títulos, parágrafos, imagens e links.

A norma HTML permite omitir algumas tags de início e fim, mas escrever html, head e body explicitamente torna a estrutura mais fácil de seguir quando você está aprendendo. As descrições dos elementos do documento da norma WHATWG HTML fornecem as definições detalhadas. As regras para tags e atributos são explicadas em Sintaxe.

Três configurações dentro do head

O head do exemplo contém três configurações úteis para reconhecer em um primeiro documento HTML. Compare os locais e verificações para cada elemento de metadados em Definir o título da página, a descrição, o idioma e a codificação.

• meta charset="utf-8": Declara UTF-8 como a codificação de caracteres do documento. Também salve o arquivo em UTF-8 para que seus caracteres sejam exibidos corretamente. Coloque a declaração de codificação perto do início do documento.
• meta name="viewport": Define a largura da janela de exibição para a largura do dispositivo em navegadores móveis. Esta tag sozinha não torna um design responsivo.
• title: Define o título do documento, que aparece em locais como a aba do navegador. Ele tem um objetivo diferente de um h1 exibido no corpo da página.

Observe a diferença entre title e h1 no exemplo: a aba do navegador mostra "Meu primeiro documento HTML", enquanto o título visível na página mostra "Olá".

Salve o arquivo HTML e abra-o em um navegador.

Use o primeiro bloco de código para criar um arquivo real e verificar o resultado. Você só precisa de um editor de texto simples e de um navegador web; salve o código como texto simples, e não como documento formatado.

1. Crie uma pasta de trabalho, abra um novo arquivo em um editor de texto e cole todo o primeiro bloco de código.
2. Salve o arquivo nesta pasta com o nome index.html. Escolha UTF-8 se o editor solicitar uma codificação. index.html é um nome comum para a primeira página de um site, mas outro nome de arquivo terminando com .html também funciona para este exercício.
3. Clique duas vezes em index.html no seu gerenciador de arquivos. Se outro aplicativo abrir, use "Abrir com" para escolher um navegador web, ou arraste o arquivo para uma janela de navegador.
4. Verifique se a aba do navegador indica "Meu primeiro documento HTML" e se a página exibe "Olá" acima de "Este é o corpo do documento." A barra de endereços mostra uma URL file:// para o arquivo local.
5. Modifique o texto dentro de title e h1 no editor, salve o arquivo e atualize o navegador. Compare o título da aba atualizado com o título na página.

Abrir uma URL file:// lê um arquivo no seu próprio computador. Enviar essa URL para outra pessoa não dá acesso à sua cópia; para compartilhar a página na web, você precisa enviar seus arquivos para um servidor web ou um serviço de hospedagem.

Se o resultado não for o que você esperava

• O navegador exibe as tags como texto: Verifique se o nome real do arquivo termina com .txt, por exemplo index.html.txt. Alguns editores adicionam essa extensão ao salvar um documento de texto. Se necessário, selecione "Todos os arquivos" ou o equivalente na caixa de diálogo Salvar e salve como index.html. Mostrar as extensões de arquivo no gerenciador de arquivos ajuda a verificar o nome.
• Suas alterações não aparecem: Salve o arquivo no editor e atualize o navegador. Se várias pastas contêm um arquivo com o mesmo nome, compare o caminho do arquivo no navegador com a pasta onde você salvou suas alterações.
• Os caracteres parecem embaralhados: Verifique se você salvou o arquivo em UTF-8 e se manteve a declaração <meta charset="utf-8"> no documento.
• A página está vazia: Certifique-se de ter aberto o arquivo desejado e que o título e o parágrafo ainda estão dentro de body.

Para saber mais sobre abertura e organização de arquivos HTML locais, consulte o guia da MDN para gerenciamento de arquivos.