Estrutura Básica do HTML
Tags: html, webdev, beginners, braziliandevs
Published: 2022-11-02 20:02:20

O documento HTML possui algumas tags que são consideradas como tags estruturais, importantes para que seu HTML funcione e haja um bom desempenho com o navegador. Iremos passar por algumas definições e convenções básicas.

## Entendendo as tags

O HTML5 há em torno 8 grupos de tags:

- estruturais 
- metadados
- formulário
- formatação
- lista
- tabela
- script
- conteúdo embutido

As tags são formadas por uma estrutura única, iniciam com o sinal de "menor que" (<) e se encerram com o sinal de "maior que" (>) `<h1>Olá!</h1>`. É importante destacar que há tags que é opcional haver uma tag de fechamento para si, elas são chamadas de _optional closing tag_ `<html>`, enquanto há tags que podem fechar em si mesmas ou haver uma tag de fechamento, as _self closing tags_ `<br />`

As tags podem ser definidas como **block-level** ou **inline**. Respectivamente, uma tag block-level ocupa toda a largura do seu elemento pai, criando assim um bloco, enquanto a tag inline ela se posiciona em linha. sem alterar sua largura.

## Tags Estruturais Básicas

Existe ao menos 19 tags estruturais no HTML5, mas nem todas elas são realmente utilizadas. Você pode tentar decorá-las, mas não há muita necessidade de depositar tanta energia assim. As mais importantes que você deveria saber além das `<html>`, `<head>`, `<body>` são as:

- **cabeçalho**: `<header>`
- **barra de navegação**: `<nav>`
- **conteúdo principal**: `<main>`, com elementros filhos representados por `<article>`, `<section>`, `<div>`
- **barra do canto**: `<aside>`; geralmente inserido dentro do elemento `<main>`
- **rodapé**: `<footer>`

**Vamos para suas definições**
- `<header>` Representa um conteúdo introdutório. Pode conter elementos de título, mas também logos, uma barra de pesquisa, nome do autor, etc.
- `<nav>` Representa uma seção da página cujo objetivo é prover navegação de links. Podendo ser links internos (dentro da página) ou externos (fora da página)
- `<main>` Reresenta o conteúdo dominante dentro do `<body>`. Consiste no elemento que está diretamente relacionado com o tópico central do site.
- `<article>` Representa uma composição independente, destribuitiva e reusável. Exemplos: uma postagem, um artigo, um comentário de um usuário.
- `<section>` Representa uma seção genérica de um site. Seções devem sempre possuir um título (heading), com poucas exceções.
- `<div>` Elemento genérico. Não possui nenhum efeito no conteúdo ou layout até que seja estilizado com algum CSS. Geralmente usado com flexbox.
- `<aside>` Representa uma porção do documento que está indiretamente relacionado com o conteúdo principal da página. Geralmente são representadas por barras laterais.
- `<footer>` Representa um rodapé. Normalmente possui informação sobre o autor, dados de copyright e links para documentos relacionados.

Referências
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer