Antes de começar a criar páginas web mais complexas, é fundamental compreender como um documento HTML é estruturado. Todas as páginas da internet seguem uma organização básica que permite aos navegadores interpretar corretamente o conteúdo e apresentá-lo ao usuário.
Essa estrutura funciona como o esqueleto da página. Ela define onde ficam as informações técnicas do documento, onde está o conteúdo visível e como os elementos são organizados dentro da página.
Mesmo os sites mais complexos da internet, com milhares de linhas de código, ainda utilizam essa mesma base estrutural. Portanto, compreender essa estrutura é um dos primeiros passos para qualquer pessoa que deseja aprender desenvolvimento web.
Nesta aula você aprenderá quais são os elementos fundamentais de um documento HTML e entenderá o papel de cada parte dessa estrutura.
Aula 004 — Estrutura básica de uma página HTML
1. Declaração do tipo de documento
Todo documento HTML moderno começa com a declaração abaixo.
<!DOCTYPE html>Essa declaração informa ao navegador que o documento utiliza o padrão HTML5. Sem essa declaração alguns navegadores podem interpretar o código utilizando modos antigos de compatibilidade.
Apesar de aparecer no início do documento, essa linha não é considerada uma tag HTML tradicional. Ela funciona como uma instrução para o navegador.
2. O elemento html
Logo após a declaração DOCTYPE aparece a tag principal do documento.
<html>Essa tag envolve todo o conteúdo da página e é conhecida como elemento raiz do documento.
Normalmente ela também possui um atributo que define o idioma da página.
<html lang="pt-BR">Esse atributo auxilia ferramentas de acessibilidade e mecanismos de busca a identificar corretamente o idioma do conteúdo.
3. A seção head
Dentro da estrutura HTML existe uma seção chamada head.
<head>
</head>Essa parte do documento contém informações sobre a página que normalmente não aparecem diretamente para o usuário.
Entre os elementos mais comuns dentro do head estão:
- definição de codificação de caracteres
- título da página
- metadados
- links para arquivos CSS
- scripts
4. A seção body
A seção body contém todo o conteúdo visível da página.
<body>
</body>Dentro dessa seção ficam elementos como títulos, parágrafos, imagens, vídeos, listas, links e formulários. Tudo o que aparece no navegador está dentro dessa área do documento.
5. Estrutura completa de um documento HTML5
A estrutura completa de um documento HTML5 pode ser representada da seguinte maneira.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Minha primeira página</title>
</head>
<body>
<h1>Olá mundo</h1>
<p>Esta é minha primeira página HTML.</p>
</body>
</html>
Essa estrutura é utilizada como base para praticamente todos os sites existentes na internet.
6. Organização do código
Manter o código HTML organizado é uma prática importante no desenvolvimento web. Isso facilita a leitura do código e torna futuras modificações muito mais simples.
- utilizar indentação
- manter a hierarquia correta das tags
- evitar códigos desnecessários
- comentar partes importantes do código
7. Criando sua primeira página HTML
Para praticar, siga os passos abaixo.
- Crie um arquivo chamado index.html
- Abra o arquivo em um editor de código
- Escreva a estrutura básica apresentada nesta aula
- Salve o arquivo
- Abra o arquivo no navegador
Se tudo estiver correto, o navegador exibirá o título e o parágrafo da página.
8. Importância dessa estrutura
Essa estrutura básica é utilizada em praticamente todas as páginas web. Mesmo aplicações web complexas utilizam essa mesma organização fundamental.
Dominar essa estrutura é essencial para continuar avançando no desenvolvimento web.
9. Resumo da aula
Nesta aula você aprendeu como começa um documento HTML, o papel da declaração DOCTYPE, a função da tag html, a função da seção head e da seção body.
Esses elementos formam a base de qualquer página web.
