Elementos de Estrutura no HTML5

O Que São Elementos de Estrutura?

São elementos que definem a base do documento HTML, permitindo que navegadores, leitores de tela e mecanismos de busca compreendam melhor a página.

Elementos Essenciais

1. `<!DOCTYPE html>`

Informa ao navegador que o documento está utilizando HTML5.

2. `<html>`

Elemento raiz. Todo o conteúdo HTML deve estar dentro dele.
Atributo comum: lang="pt-br" define o idioma da página.

3. `<head>`

Contém informações que não são exibidas diretamente na página, como:
- title: Título da aba do navegador.
- meta: Dados sobre codificação, descrição, palavras-chave, responsividade.
- link: Importa arquivos externos como CSS e fontes.
- script: Carrega arquivos de JavaScript ou scripts internos.
- style: Permite escrever CSS diretamente no HTML (não recomendado para grandes projetos).

4. `<body>`

Tudo o que aparece visualmente na página está dentro do <body>: textos, imagens, menus, links, botões, formulários, etc.

Estrutura Visual e Código

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Minha Página</title>
</head>
<body>
  <h1>Bem-vindo ao HTML5</h1>
  <p>Essa é a estrutura básica de uma página web.</p>
</body>
</html>

Atributos Importantes do `<meta>`

Atributo	Função
`<meta charset="UTF-8">`	Define a codificação para caracteres (acentuação correta)
`<meta name="viewport"...>`	Torna o site responsivo em dispositivos móveis
`<meta name="description"...>`	Descrição da página (ajuda no SEO)
`<meta name="keywords"...>`	Palavras-chave da página (pouco usado hoje)
`<meta name="author"...>`	Define o autor do site

Hierarquia dos Elementos

<!DOCTYPE>
 └── html
     ├── head
     └── body

Resumo Prático

✔️ O navegador entende que está lidando com HTML5 por meio do <!DOCTYPE html>.
✔️ O <html> encapsula todo o conteúdo.
✔️ O <head> serve para dados técnicos e SEO.
✔️ O <body> entrega tudo que é visível ao usuário.

Próximo Passo:

Agora que você entende a estrutura, vamos aprender sobre os Elementos Semânticos, que ajudam a organizar melhor o conteúdo da página, tornando-a mais acessível, otimizada e fácil de entender tanto para usuários quanto para máquinas.