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.
