O elemento SECTION é definido como uma seção semântica de uma página da web ou site que não é outro tipo mais específico, como ARTICLE ou ASIDE. Os designers costumam usar esse elemento ao marcar uma seção distinta da página - uma seção inteira que pode ser movida e usada em outras páginas ou partes do site. É um conteúdo distinto.
Em contraste, o elemento DIV é apropriado para partes da página que você deseja dividir para finalidades diferentes semântica. Por exemplo, você pode envolver algum conteúdo em um DIV para dar a ele um "gancho" para estilizar com CSS. Pode não ser uma seção distinta de conteúdo semanticamente, mas é separada para que você possa obter o layout ou sensação desejada.
É tudo sobre semântica
A única diferença entre os elementos DIV e SECTION é a semântica - o significado do conteúdo que você está dividindo.
Qualquer conteúdo contido em um elemento DIV não tem nenhum significado inerente. É melhor usado para coisas como:
- Estilos CSS e ganchos para estilos CSS
- Layout de contêineres
- Ganchos de JavaScript
- Divisões que tornam o conteúdo ou HTML mais fácil de ler
O elemento DIV costumava ser o único elemento disponível para adicionar ganchos a documentos de estilo e layouts. Antes do HTML5, a página da web típica estava repleta de elementos DIV. Na verdade, alguns editores WYSIWYG usaram o elemento DIV exclusivamente, às vezes no lugar de parágrafos.
O HTML5 introduziu elementos de seccionamento que criaram documentos descritivos semanticamente e ajudaram a definir estilos nesses elementos.
E o elemento SPAN?
Outro elemento não semântico comum é o SPAN. É usado em linha para adicionar ganchos para estilos e scripts em torno de blocos de conteúdo (geralmente texto). Nesse sentido, é exatamente como o DIV, mas não é um elemento de bloco. Pense no DIV como um SPAN em nível de bloco e use-o da mesma maneira, mas para blocos inteiros de conteúdo HTML.
HTML não tem elemento de corte inline comparável.
Para versões anteriores do Internet Explorer
Mesmo se você estiver oferecendo suporte a versões muito mais antigas do Internet Explorer da Microsoft que não reconhecem HTML5 de forma confiável, você deve usar tags HTML semanticamente corretas. A semântica ajudará você e sua equipe a gerenciar a página no futuro. As versões mais recentes do Internet Explorer, bem como seu substituto, o Microsoft Edge, reconhecem HTML5.
Usando os elementos DIV e SECTION
Você pode usar os elementos DIV e SECTION juntos em um documento HTML5 válido — SECTION, para definir partes semanticamente discretas do conteúdo, e DIV, para definir ganchos para CSS, JavaScript e layout finalidades.
Artigo original de Jennifer Krynin. Editado por Jeremy Girard em 15/03/17.