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 fins diferentes da 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.
DIV e SECTION: É 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 porções semanticamente discretas do conteúdo, e DIV, para definir ganchos para CSS, JavaScript e fins de layout.