Quando o HTML5 entra no cenário há alguns anos, ele adiciona vários novos elementos de corte ao langauge, incluindo oSEÇÃO elemento. A maioria dos novos elementos que o HTML5 introduz tem usos claros. Por exemplo, o elemento é usado para definir artigos e partes principais de uma página da Web, o elemento é usado para definir conteúdo relacionado que não é crítico para o restante da página, e cabeçalho, navegação e rodapé são bastante autoexplicativos. O recém-adicionadoSEÇÃO elemento, no entanto, é um pouco menos claro.
Muitas pessoas acreditam que os elementos HTML SEÇÃO e são realmente a mesma coisa - elementos genéricos de contêiner usados para conter conteúdo em uma página da web. A realidade, no entanto, é que esses dois elementos, enquanto ambos são elementos de contêiner, são tudo menos genéricos. Existem razões específicas para usar tanto o SEÇÃO elemento e o DIV elemento - e este artigo explicará essas diferenças.
Seções e Divs
o SEÇÃO elemento é definido como uma seção semântica de uma página da web ou site que não é outro tipo mais específico (como artigo ou de lado). Eu costumo usar este elemento quando estou marcando uma seção distinta da página - uma seção que poderia ser movida por atacado e usada em outras páginas ou partes do site. É uma parte distinta de conteúdo, ou uma "seção" de conteúdo, se você quiser.
Em contraste, você usa o DIV elemento para partes da página que você deseja dividir, mas para finalidades diferentes da semântica. Eu iria envolver uma área de conteúdo em uma divisão se eu estivesse fazendo isso apenas para me dar um "gancho" para usar com CSS. Pode não ser uma seção distinta de conteúdo baseada na semântica, mas é algo que estou ditando para obter o layout que quero para a minha página.
É tudo sobre semântica
Este é um conceito difícil de entender, mas a única diferença entre o DIV elemento e o SEÇÃO elemento é semântica. Em outras palavras, é o significado da seção de código que você está dividindo.
Qualquer conteúdo contido dentro de um DIV elemento não tem nenhum significado inerente. É melhor usado para coisas como:
- Estilos CSS e ganchos para estilos CSS
- Recipientes de layout
- Ganchos de JavaScript
- Divisões para o HTML para facilitar a leitura
o DIV O elemento costumava ser o único elemento que tínhamos para adicionar ganchos para estilizar nossos documentos e criar colunas e layouts sofisticados. Por causa disso, acabamos com HTML que estava cheio de DIV elementos - o que os web designers chamam de “divitis”. Havia até editores WYSIWYG que usavam DIV elemento exclusivamente. Eu realmente corri em HTML que usa o DIV elemento em vez de parágrafos!
Com o HTML5, podemos começar a usar elementos de corte para criar mais documentos semanticamente descritivos (usando para navegação e para figuras descritivas e assim por diante) e também definir os estilos nesses elementos.
O que acontece com o elemento SPAN?
O outro elemento que a maioria das pessoas pensa quando pensa no DIV elemento é o elemento. Esse elemento, como DIV, não é um elemento semântico. É um elemento embutido que você pode usar para adicionar ganchos para estilos e scripts em torno de blocos in-line de conteúdo (geralmente texto). Nesse sentido, é exatamente como o DIV elemento, apenas inline, em vez de um elemento de bloco. De certa forma, pode ser mais fácil pensar no DIV como um nível de bloco PERÍODO elemento e usá-lo da mesma maneira que você faria PERÍODO apenas para blocos inteiros de conteúdo HTML.
Não há elemento de seção in-line comparável no HTML5.
Para versões mais antigas do Internet Explorer
Mesmo se você estiver suportando versões muito antigas do IE (como o IE 8 e inferior) que não reconhecem HTML5 de forma confiável, você não deve ter medo de usar tags HTML semanticamente corretas. A semântica ajudará você e sua equipe a gerenciar a página no futuro (porque você saberá que essa seção é o artigo se estiver cercada pelo ARTIGO elemento). Além disso, os navegadores que reconhecem essas tags oferecem suporte a eles.
Você ainda pode usar elementos de corte semântico HTML5 com o Internet Explorer, você só precisa adicionar scripts e possivelmente alguns DIV elementos para que eles reconheçam as tags como HTML.
Usando elementos DIV e SECTION
Se você os estiver usando corretamente, você pode usar ambos DIV e SEÇÃO elementos juntos em um documento HTML5 válido. Como você viu aqui neste artigo, você usa o SEÇÃO elemento para definir porções semanticamente discretas do conteúdo, e você usa o DIV elemento como ganchos para CSS e JavaScript, bem como definição de layout que não tem um significado semântico.
Artigo original de Jennifer Krynin. Editado por Jeremy Girard em 15/03/17
