Qual é a diferença entre DIV e SECTION?

click fraud protection

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
instagram viewer

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.

instagram story viewer