HTML5 – section ou article?

Nos blogs que acompanho as discussões mais polvorosas que eu vi acerca do HTML5 eram a respeito da semântica e confusão quanto ao uso do article e do section. A definição dos elementos pela W3C realmente é bastante rasa e permite diversas interpretações:

Article tag

O <article> define conteúdo externo.
O conteúdo externo pode ser um artigo de notícias a partir de um provedor externo, um texto de um blog, um texto de um fórum ou qualquer outro conteúdo de uma fonte externa.

W3C (EN)

Depois de ler algumas outras definições externas minha compreensão foi que o source do conteúdo não precisa ser uma fonte externa, mas o article é um conteúdo independente, o conteúdo que teria no feed daquela página, ou como o @elcio bem definiu: o "filézinho do conteúdo".

Section tag

O <section> define as seções em um documento.
Tal como capítulos, cabeçalhos, rodapés ou outras seções do documento.

W3C (EN)

São as seções genéricas do documento, podem estar dentro de um article (dividido em capítulos, por exemplo) ou para separar seções na home do site, por exemplo.

Percebam que a definição oficial é um pouco confusa – e foi o que causou um pouco de pânico enquanto a documentação do HTML5 era escrita. Agora a comunidade está um pouco mais calma acerca do assunto e resolvi dar meus pitacos, já que esclareci algumas dúvidas no curso da W3C de HTML5.

 

A maioria parte das tags html tem uma nomenclatura "técnica", um dos pontos que percebi nas leituras (em inglês a maioria) era que o nome com palavras que existem no idioma (inglês) causam confusão na hora de definir onde a tag será usada. 

Um texto interessante sobre o assunto é o Article vs. Section: We"ve Finally Gone Mad (EN) que dá uma brincada com algumas questões destas dúvidas, e este também fala sobre o assunto e exemplifica o uso de article e section.

Quando usar article e quando usar section?

Você já deve ter entendido, o article é seu conteúdo principal – aquilo que o usuário entrou para ler. O post no seu blog, a notícia, a seção de fotos (?), vídeo (?). Article é o conteúdo que seu usuário gostaria de ter no feed.

Eu li sobre o uso de article para os comentários, porém seguindo esta definição acima não é o correto (e eu jamais faria isso pensando em SEO).  Comentários normalmente não são conteúdo principal – é um conteúdo tangencial – e está relacionado ao conteúdo, portanto faz sentido utilizar o <aside>.

O section é um elemento genérico, "a nova div" como foi comentado no curso. Não é exatamente a "nova div", divs devem continuar existindo para quando for necessário alguma formatação específica para layout apenas (sem peso semântico), porém quando esta formatação for de uma seção da página a div deve ser trocada pelo <section>! 🙂

Uso errado do section

Um exemplo de uso errado do section seria  como a div "principal" da página, normalmente  usada para centralização de todo o site. Não é correto pois semânticamente trata o site como uma "seção", neste caso o correto é o uso de div – dica do próprio @diegoeis, que disse que <div> é coisa do passado e rebeldia no twitter.

 

Leia mais sobre HTML5:

 

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *