Le nouveau HTML5 section élément peut être quelque peu déroutant. Si vous avez créé des documents HTML avant HTML5, il est probable que vous utilisiez déjà l'élément pour créer des divisions structurelles au sein de vos pages, puis stylisez les pages avec eux. Il peut donc sembler naturel de simplement remplacer votre DIV éléments avec section éléments. Mais c'est techniquement incorrect.
L'élément 'section' est un élément sémantique
le SECTION l'élément est un sémantique élément; il donne un sens à la fois aux agents utilisateurs et aux humains sur ce qu'est le contenu inclus - en particulier, une section du document.
Cela peut sembler une description très générale, et c'est parce que c'est le cas. Il y a d'autres Éléments HTML5 qui fournissent plus de distinctions sémantiques à votre contenu que vous devez d'abord utiliser avant d'utiliser le section élément:
- Article
- De côté
- Navigation
Quand utiliser l'élément 'section'
Utilisez le article élément lorsque le contenu est une partie indépendante du site qui peut être autonome et syndiquée comme un article ou un article de blog. Utilisez le
de côté élément lorsque le contenu est tangentiellement lié au contenu de la page ou au site lui-même, comme les barres latérales, les annotations, les notes de bas de page ou les informations de site associées. Utilisez le navigation élément pour le contenu qui prend en charge la navigation sur le site.le section element est un élément sémantique générique. Utilisez-le lorsqu'aucun des autres éléments du conteneur sémantique n'est approprié. Il combine des parties de votre document en unités discrètes que vous pouvez décrire comme liées d'une manière ou d'une autre. Si vous ne pouvez pas décrire les éléments de la section en une ou deux phrases, vous ne devriez probablement pas utiliser l'élément.
Au lieu de cela, vous devez utiliser le DIV élément. le DIV L'élément HTML5 est un élément conteneur non sémantique. Si le contenu que vous essayez de combiner n'a pas de signification sémantique, mais que vous devez quand même le combiner pour le style, alors le DIV element est l'élément approprié à utiliser.
Comment fonctionne l'élément 'section'
Une section de votre document peut apparaître comme le conteneur extérieur pour les articles et de côté éléments. Il peut également contenir du contenu qui ne fait pas partie d'un article ou alors de côté. UNE section élément peut également être trouvé à l'intérieur d'un article, navigation, ou alors de côté. Vous pouvez même imbriquer des sections pour indiquer qu'un groupe de contenu est une section d'un autre groupe de contenu qui est une section d'un article ou la page dans son ensemble.
le section élément crée des éléments à l'intérieur d'un plan du document. Et en tant que tel, vous devriez toujours avoir un élément d'en-tête (H1 à travers H6) dans le cadre de la section. Si vous n'arrivez pas à trouver un titre pour la section, le DIV élément est probablement plus approprié.
Si vous ne voulez pas que le titre de la section apparaisse sur la page, vous pouvez toujours le masquer avec CSS.
Quand ne pas utiliser l'élément 'section'
Il y a un but pour lequel vous ne devriez pas utiliser le section élément: pour le style uniquement.
En d'autres termes, si la seule raison pour laquelle vous placez un élément à cet endroit est d'attacher Style CSS propriétés, vous ne devez pas utiliser un section élément. Trouver un élément sémantique ou utilisez le DIV élément à la place.
En fin de compte, cela peut ne pas avoir d'importance
Une difficulté dans l'écriture de code HTML sémantique est que ce qui est sémantique pour le navigateur peut être pour vous une absurdité totale. Si vous pensez pouvoir justifier l'utilisation de la section élément dans vos documents, alors vous devriez l'utiliser. La plupart des agents utilisateurs ne s'en soucient pas et afficheront la page comme vous pouvez vous y attendre si vous stylisez un DIV ou un section.
Pour les concepteurs qui aiment être sémantiquement corrects, en utilisant le section élément d'une manière sémantiquement valide est important. Pour les concepteurs qui veulent juste que leurs pages fonctionnent, ce n'est pas aussi important. L'écriture de code HTML sémantiquement valide est une bonne pratique et maintient les pages plus à l'épreuve du temps. Mais à la fin, c'est à vous de décider.