Quando usar o elemento SECTION HTML5

click fraud protection

O novo HTML5 seção elemento pode ser um pouco confuso. Se você construiu documentos HTML antes do HTML5, é provável que já esteja usando o elemento para criar divisões estruturais em suas páginas e, em seguida, estilizar as páginas com eles. Portanto, pode parecer uma coisa natural simplesmente substituir seu DIV elementos com seção elementos Mas isso é tecnicamente incorreto.

O elemento 'seção' é um elemento semântico

O SEÇÃO elemento é um semântico elemento; ele fornece significado para agentes de usuário e humanos sobre o que é o conteúdo incluído - especificamente, uma seção do documento.

Esta pode parecer uma descrição muito geral, e é porque é. Ha outro Elementos HTML5 que fornecem mais distinções semânticas ao seu conteúdo que você deve usar primeiro, antes de usar o seção elemento:

  • Artigo
  • Aparte
  • Nav

Quando usar o elemento 'seção'

Use o artigo elemento quando o conteúdo é uma parte independente do site que pode ser independente e ser distribuído como um artigo ou postagem de blog. Use o

instagram viewer
a parte, de lado elemento quando o conteúdo está tangencialmente relacionado ao conteúdo da página ou ao próprio site, como barras laterais, anotações, notas de rodapé ou informações do site associadas. Use o nav elemento para conteúdo que oferece suporte à navegação no site.

O seção element é um elemento semântico genérico. Use-o quando nenhum dos outros elementos do contêiner semântico for apropriado. Ele combina partes do seu documento em unidades discretas que você pode descrever como relacionadas de alguma forma. Se você não consegue descrever os elementos da seção em uma ou duas sentenças, provavelmente não deve usar o elemento.

Em vez disso, você deve usar o DIV elemento. O DIV elemento em HTML5 é um elemento de 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 estilização, então o DIV elemento é o elemento apropriado para usar.

Como funciona o elemento 'seção'

Uma seção do seu documento pode aparecer como o recipiente 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, nav, ou 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 contorno do documento. E, como tal, você deve sempre ter um elemento de cabeçalho (H1 Através dos H6) como parte da seção. Se você não conseguir criar um título para a seção, o DIV elemento é provavelmente mais apropriado.

Se você não quiser que o título da seção apareça na página, pode sempre mascará-lo com CSS.

Quando não usar o elemento 'section'

Há um propósito para o qual você não deve usar o seção elemento: apenas para estilo.

Em outras palavras, se a única razão pela qual você está colocando um elemento naquele lugar é anexar Estilo CSS propriedades, você não deve usar um seção elemento. Encontre um elemento semântico ou use o DIV elemento em vez disso.

Em última análise, pode não importar

Uma dificuldade em escrever HTML semântico é que o que é semântico para o navegador pode ser um total absurdo para você. Se você acha que pode justificar usando o 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ê poderia esperar se você estilizasse um DIV ou um seção.

Para designers que gostam de ser 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. Escrever HTML semanticamente válido é uma boa prática e mantém as páginas mais preparadas para o futuro. Mas no final, depende de você.

instagram story viewer