Explicação detalhada das diferenças entre div, seção e artigo em html5

Este artigo apresenta principalmente os detalhes da diferença entre div, seção e artigo no HTML5. É citado no W3C e listado com exemplos de código. Amigos que precisam podem se referir a ele.

Quando comecei a entrar em contato com o HTML5, fiquei muito desconfortável com suas tags e até senti um pouco enojado em um ponto. Especialmente para as tags de Div, Seção, Artigo, eu realmente não consigo descobrir quais ocasiões usar.

Especificação html:

O elemento div não tem nenhum significado especial.

Esta tag é a tag mais usada que vemos e usamos mais. Ele não tem semântica em si e é usada como um gancho para layout, estilo ou script.

Especial HTML: O elemento de seção representa uma seção genérica de um documento ou aplicativo. Uma seção, neste contexto, é um agrupamento temático de conteúdo, normalmente com um título.

Em contraste com a semântica da div, simplesmente a seção é uma div com semântica, mas não pense que é realmente tão simples. A seção representa uma seção de conteúdo tópico, geralmente com um título. Depois de ver isso, podemos pensar que uma postagem no blog ou um comentário separado seria justo para usar a seção? Próximo olhar:

Os autores são incentivados a usar o elemento do artigo em vez do elemento de seção quando faria sentido sindicicar o conteúdo do elemento.

Quando o conteúdo dos elementos é mais interessante, o artigo deve ser usado para substituir a seção.

Então, quando a seção deve ser usada? Vamos continuar a ver:

Exemplos de seções seriam capítulos, as várias páginas com guias em uma caixa de diálogo com guias ou nas seções numeradas de uma tese. A página inicial de um site pode ser dividida em seções para uma introdução, itens de notícias e informações de contato.

Os cenários típicos da seção Aplicação incluem capítulos de artigos, páginas de guias em caixas de diálogo de tag ou peças numeradas nos papéis. A página inicial de um site pode ser dividida em várias partes, como introdução, notícias e informações de contato. Na verdade, estou muito interessado em transmitir as informações aqui, porque sinto que a seção e a Artilce a serem introduzidas abaixo são mais adequadas para aplicações modulares. Este tópico será discutido no futuro, e eu o ignorarei aqui por enquanto.

Esteja ciente de que o W3C também alerta:

O elemento de seção não é um elemento genérico de contêiner. Quando um elemento é necessário para fins de estilo ou como uma conveniência para scripts, os autores são incentivados a usar o elemento div. Uma regra geral é que o elemento da seção é apropriado apenas se o conteúdo do elemento for listado explicitamente no esboço do documento.

A seção é mais do que apenas uma tag de contêiner normal. Quando uma tag é apenas para estilo ou fácil de usar nos scripts, o DIV deve ser usado. De um modo geral, a seção se aplica quando o conteúdo do elemento aparece explicitamente no esboço do documento.