Qual a diferença entre as tags article, section e div

John Code / 23 de julho de 2020

Neste artigo vou mostrar qual a diferença entre as tags article, section e div.

Essas tags tem como principal função dividir os conteúdos de um site de maneira que os mecanismos de busca possam entender melhor o conteúdo do site. Dessa forma os buscadores vão ranquear-los de melhor forma.

 Como usar a tag <article>

Suas principais utilizações devem ser:

  • Para agrupar conteúdo que faz sentido juntos
    (conteúdo independente);
  • Para um grupo de elementos que tem um titulo
    (a tag article precisa de um título);
  • É um conteúdo independente. Não precisa do resto do site para contextualizar
    (article pode ser colocado em qualquer parte do site que ainda vai fazer sentido sozinho);

A tag <article> de ser utilizada em blogs, trabalhos, forum de posts, novos artigos, comentários.

Para uma abordagem melhor a documentação do w3schools, explica melhor sua utilização.

Como usar a tag <section>

Suas principais utilizações devem ser:

  • Para agrupar conteúdo relacionado entre si
    (conteúdo independente);
  • Grupo de conteúdo tem um título
    (section geralmente vem com um título);
  • Para definir uma seção da página ou seções gerais;
    (você pode aninha seções ou adicionar seções ao artigo);

Exemplos: na pagina inicial do site apple.com tem uma section para os produtos e outra para promoções antes do <footer>.

Outras definições e utilizações para a tag <section> podem ser encontradas no site da w3schools.

Como usar a tag <div>

Suas principais utilizações devem ser:

  • Para criar divisões entre tags
    (normalmente para fins de estilo ou js);
  • Para criar um contêiner/caixa de coisas aleatórias
    (coisas dentro do div não precisam fazer sentido juntas);

A tag <div> pode ser usada para cria dropdown, modal, sliders, accordions, informações como links de rede sociais, endereço, telefone, etc.

Outras funções da tag <div> podem ser vista no site da w3schools.

Conclusão

Neste artigo mostro as principais funções e como utilizar as tags <article>, <section> e <div>. Para que possam estruturar melhorar a estruturação dos sites e assim coloca-los em uma posição melhor em relação aos buscadores.