O novo HTML5
SEÇÃO elemento pode ser um pouco confuso. Se você criou documentos HTML antes do HTML5, provavelmente já está usando o elemento para criar divisões estruturais em suas páginas e, em seguida, estilizar as páginas com elas. Então, pode parecer uma coisa natural para simplesmente substituir o seu existente
DIV elementos com
SEÇÃO elementos. Mas isso é tecnicamente incorreto. Então, se você não apenas substituir
DIV elementos com
SEÇÃO elementos, como você os usa corretamente?
O elemento SECTION é um elemento semântico
A primeira coisa a entender é que o
SEÇÃO elemento é um elemento semântico. Isso significa que ele fornece significado para os agentes do usuário e para os humanos sobre o conteúdo incluído - especificamente uma seção do documento.
Isto pode parecer uma descrição semântica muito geral, e é porque é. Existem outros elementos HTML5 que fornecem mais distinções semânticas ao seu conteúdo que você deve usar antes de usar o
SEÇÃO elemento:
-
ARTIGO
-
A PARTE, DE LADO
-
NAV
Quando usar o elemento SECTION
Use o
ARTIGO elemento quando o conteúdo é uma parte independente do site que pode ser autônoma e ser distribuída como um artigo ou postagem de blog. Use o
A PARTE, DE LADO elemento quando o conteúdo está tangencialmente relacionado ao conteúdo da página ou do próprio site, como barras laterais, anotações, notas de rodapé ou informações do site associadas. Use o
NAV elemento para o conteúdo que é navegação.
o
SEÇÃO elemento é um elemento semântico genérico. Você o utiliza quando nenhum dos outros elementos de contêiner semântico é apropriado. Você o utiliza para combinar partes do seu documento em unidades discretas que você pode descrever como relacionadas de alguma forma. Se você não puder descrever os elementos na seção em uma ou duas frases, provavelmente não deverá usar o elemento.
Em vez disso, você deve usar o
DIV elemento. o
DIV elemento em HTML5 é um elemento contêiner não-semântico. Se o conteúdo que você está tentando combinar não tem um significado semântico, mas você ainda precisa combiná-lo para estilizar, então o
DIV elemento é o elemento apropriado a ser usado.
Como funciona o elemento SECTION
Uma seção do documento pode aparecer como o contêiner externo para artigos e
A PARTE, DE LADO elementos. Também pode conter conteúdo que não faz parte de um
ARTIGO ou
A PARTE, DE LADO. UMA
SEÇÃO elemento também pode ser encontrado dentro de um
ARTIGO,
NAVou
A PARTE, DE LADO. Você pode até aninhar seções para indicar que um grupo de conteúdo é uma seção de outro grupo de conteúdo que é uma seção de um artigo ou a página como um todo.
o
SEÇÃO elemento cria itens dentro de um esboço do documento. E como tal, você deve sempre ter um elemento de cabeçalho (
H1 através
H6) como parte da seção. Se você não pode chegar a um título para a seção, então novamente o
DIV elemento é provavelmente mais apropriado. Lembre-se, se você não quiser que o título da seção apareça na página, você sempre poderá mascará-lo com CSS.
Quando não usar o elemento SECTION
Além do conselho acima para usar os elementos semânticos mais específicos primeiro, há uma área definida que você não deve usar
SEÇÃO elemento: apenas para estilo.
Em outras palavras, se a única razão pela qual você está colocando um elemento nesse local é anexar propriedades de estilo CSS, você não deve usar um
SEÇÃO elemento. Encontre um elemento semântico ou use o
Em última análise, isso pode não importar
Uma dificuldade em escrever HTML semântico é que o que é semântico para mim pode ser totalmente sem sentido para você. Se você acha que pode justificar o uso do
SEÇÃO elemento em seus documentos, então você deve usá-lo. A maioria dos agentes de usuário não se importa e exibirá a página como você pode esperar
DIV ou um
SEÇÃO.
Para designers que gostam de estar semanticamente corretos, usando o
SEÇÃO elemento de uma forma semanticamente válida é importante. Para designers que querem apenas que suas páginas funcionem, isso não é tão importante. Acreditamos que escrever HTML semanticamente válido é uma boa prática e mantém as páginas mais à prova do futuro. Mas no final, depende de você.
