Thread by @lixeletto

Geral fala pra não usar div em tudo, pra usar 'containers semânticos', mas quais são eles e quando utilizá-los?

Nessa thread você vai aprender a usar:
- address
- article
- aside
- header
- footer
- main
- menu
- nav
- section

*vai ser um conteúdo avançado, façam perguntas!

O HTML foi criado inicialmente pra divulgação de documentos científicos na web. Diferente de um artigo escrito em word, não seguimos convenções como a norma ABNT pra separar sessões ou definir hierarquias, usamos contêineres HTML

Todo elemento tem uma finalidade e utilizá-los de forma correta facilita o trabalho de todos os mecanismos que interpretam nossa página pra oferecer a mesma experiência de conteúdo pra todo tipo de usuário e para crawlers buscarem seu conteúdo.

Primeiro vamos falar dos contêineres que possuem a categoria 'sectioning content'.
Esses elementos são:
- article
- aside
- nav
- section

Ser um sectioning content é quase como criar um capítulo dentro de um livro. Todos os títulos e informações são encapsulados dentro desse +

capítulo, se referindo apenas a ele. Uma section, por exemplo, pode ter seu próprio header, footer e seus próprios headings (h1~h6). Quando o HTML é interpretado, essas informações são associadas as suas respectivas sessões que por sua vez serão associadas ao body.

Mas pra além disso, cada elemento desses tem contextos apropriados pra serem utilizados:

- Article
Um article cria uma sessão pra um conteúdo independente do conteúdo principal do site. Pode ser uma referência externa, uma postagem de blog, um comentário de usuário ou um widget

Caso vá utilizar como uma postagem de blog, as informações sobre o autor podem ficar dentro de uma tag address. As informações dessa tag então estarão associadas apenas a esse artigo e não ao site todo (graças ao sectioning content).

- Aside
Esse elemento se refere a conteúdo de referência que costuma ficar na lateral. Ele pode ser usado pra agrupar menus, receber anúncios, aqueles 'mapas de palavras', qualquer conteúdo não diretamente associado ao conteúdo principal da página.

Muitos desses casos de uso não são praticados mais na web atual, mas pense sempre nele quando precisar abrigar 'conteúdo relacionado' ou conteúdo que não tem referencia direta com o principal do site

- Nav
Se refere a navegação principal do site, recebendo listas links que se referenciam pra outras páginas e trechos do site. Não tem problema ter mais de um nav em um site, você pode diferenciá-los com o atributo 'title'.

- Setion
É um grupo de conteúdo que está dentro do mesmo tema. Se você tiver fazendo um site de portfólio, as seções 'sobre mim', 'experiências profissionais' e 'contato' podem ser abrigados em diferentes sections.

Nota: Não usem elementos de sessão pra qualquer coisa que não sejam esses fins, caso você só queira agrupar certo conteúdo em um container pra estilizá-los e só isso, você pode (só nesse caso) usar div

Agora vamos para os contêineres 'flow-content'. Esses elementos podem receber qualquer tipo de conteúdo e texto corrido:

- Address
Esse elemento geralmente fica dentro do footer com informações de contato. Quando no footer diretamente no body, ele contém as informações de +

endereço DO SITE, ou seja, informações de contato como logradouro ou email, redes sociais, etc. Dentro de um contêiner de seção (sectioning content) são as informações referentes a aquele contexto (autor, data de publicação, referência externa, etc)

- Header
Recebe os títulos, índices, logos e formulários de busca. Geralmente abriga também o banner onde fica um botão call-to-action. Semanticamente ele foi feito pra agrupar headings (h1 ~ h6) ou um hgroup, mas seu uso foi expandido.

- Footer
O rodapé do site ou da seção. Representa notas de rodapé, apêndices, mapas do site, índices e textos de licenciamento e copyright ™. Lembrem-se, cada sectioning content pode ter seu próprio footer (se fizer sentido).

- Main
O main abriga o conteúdo principal do documento e geralmente fica diretamente no body. Pode existir apenas UM main dentro de um documento de HTML.
Uma estrutura comum é
body
| - header
| - main
| - footer

- Menu
Você tem uma lista de controles ou botões que emitem ações? Pensa em um site que tem templates de botões e você tem controles que você pode alterar a cor e tamanho do botão e e copiar o código. Isso cabe dentro de um menu.

Menu é bem complexo e não funciona em navegadores muito antigos, mas vale muito a pena ser utilizado nesse caso de uso. Pra não me prolongar, links de referência:
- developer.mozilla.org/en-US/docs/Web…
- w3docs.com/learn-html/htm…

- Sobre div e span
Na documentação oficial é desencorajado utilizar esses elementos, eu não tirei do cu.

Mas quando usar div?
- Já criou uma seção pro seu conteúdo mas precisa de mais um container pra meter um flex ou um background? Usa div.

- Precisa 'recriar' um elemento html pq o original não suporta o estilo que você precisa? (select, input:date, table, etc), usa div (mas busque por formas acessíveis de usar!).

Quando usar span?
- APENAS dentro de elementos textuais, lista abaixo
developer.mozilla.org/en-US/docs/Web…

- apenas pra estilizar um elemento e tags de 'inline text semantics' como strong, i, u, etc não fazem sentido pro seu caso. Lista dessas tags:
developer.mozilla.org/en-US/docs/Web…

Não entendeu algo? Caguei no pau? Quer acrescentar algo? Comenta ai, me chama DM, me mande um pix de R$1 real falando sobre.

Se eu ver que você deu like nesse post e ainda não usa esses elementos corretamente no seu dia-a-dia eu vou te assombrar

Eu li a porra da W3 por horas pra escrever isso aqui, quem ler acho bom ler tudinho caralho