Lorsque HTML5 a fait son apparition sur la scène il y a un certain nombre d'années, il a ajouté une série de nouveaux éléments de sectionnement à la langue, y compris leSECTION élément. La plupart des nouveaux éléments introduits par HTML5 ont des utilisations claires. Par exemple, l'élément est utilisé pour définir les articles et les parties principales d'une page Web, pour définir le contenu associé qui n'est pas critique pour le reste de la page, et l'en-tête, la navigation et le pied de page sont assez explicites. Le nouvellement ajoutéSECTION L'élément, cependant, est un peu moins clair.
Beaucoup de gens croient que les éléments HTML SECTION et sont vraiment la même chose - les éléments de conteneur génériques utilisés pour contenir le contenu sur une page Web. La réalité, cependant, est que ces deux éléments, tout en étant des éléments de conteneur, sont tout sauf génériques. Il y a des raisons spécifiques d'utiliser à la fois le SECTION élément et le DIV élément - et cet article expliquera ces différences.
Sections et Divs
le SECTION L'élément est défini comme une section sémantique d'une page Web ou d'un site qui n'est pas un autre type plus spécifique (comme article ou aparté). J'ai tendance à utiliser cet élément lorsque je marque une section distincte de la page - une section qui pourrait être en gros déplacée et utilisée sur d'autres pages ou parties du site. C'est un élément de contenu distinct, ou une "section" de contenu, si vous voulez.
En revanche, vous utilisez le DIV élément pour les parties de la page que vous souhaitez diviser, mais à des fins autres que la sémantique. J'embrasserais un domaine de contenu dans une division si je le faisais uniquement pour me donner un "crochet" à utiliser avec CSS. Ce n'est peut-être pas une section distincte du contenu basée sur la sémantique, mais c'est quelque chose que je dicte afin de réaliser la mise en page que je souhaite pour ma page.
Tout est question de sémantique
C’est un concept difficile à comprendre, mais la seule différence entre le DIV élément et le SECTION L'élément est la sémantique. En d'autres termes, c'est le sens de la section de code que vous divisez.
Tout contenu contenu dans un DIV L'élément n'a aucune signification inhérente. Il est préférable de l'utiliser pour des choses comme:
- Styles CSS et crochets pour les styles CSS
- Conteneurs de mise en page
- Crochets JavaScript
- Divisions pour le HTML pour faciliter la lecture
le DIV Cet élément était auparavant le seul élément que nous avions pour ajouter des crochets pour styliser nos documents et créer des colonnes et des mises en page sophistiquées. À cause de cela, nous avons fini avec du HTML qui était criblé de DIV éléments - ce que les concepteurs Web peuvent appeler «divitis». Il y avait même des éditeurs WYSIWYG qui utilisaient le DIV élément exclusivement. En fait, j'ai rencontré HTML qui utilise le DIV élément au lieu de pour les paragraphes!
Avec HTML5, nous pouvons commencer à utiliser des éléments de sectionnement pour créer des documents plus descriptifs (à l'aide de la navigation, des figures descriptives, etc.) et définir les styles de ces éléments.
Qu'en est-il de l'élément SPAN?
L’autre élément auquel la plupart des gens pensent quand ils pensent au DIV élément est l'élément. Cet élément, comme DIV, n'est pas un élément sémantique. C'est un élément en ligne que vous pouvez utiliser pour ajouter des points d'ancrage pour les styles et les scripts autour de blocs de contenu en ligne (généralement du texte). En ce sens, il est exactement comme le DIV élément, uniquement en ligne plutôt qu’un élément de bloc. À certains égards, il serait peut-être plus facile de penser à la DIV en tant que niveau de bloc ENVERGURE élément et l'utiliser de la même manière que vous le feriez ENVERGURE uniquement pour des blocs entiers de contenu HTML.
Il n'y a pas d'élément de sectionnement en ligne comparable dans HTML5.
Pour les anciennes versions d'Internet Explorer
Même si vous prenez en charge des versions beaucoup plus anciennes d'IE (comme IE 8 et versions antérieures) qui ne reconnaissent pas le HTML5 de manière fiable, vous ne devez pas avoir peur d'utiliser des balises HTML sémantiquement correctes. La sémantique vous aidera, ainsi que votre équipe, à gérer la page à l'avenir (car vous saurez que cette section correspond à l'article s'il est entouré du ARTICLE élément). De plus, les navigateurs qui reconnaissent ces balises les prendront mieux en charge.
Vous pouvez toujours utiliser des éléments de sectionnement sémantique HTML5 avec Internet Explorer, il vous suffit d’ajouter des scripts et éventuellement quelques DIV éléments pour les amener à reconnaître les balises au format HTML.
Utilisation d'éléments DIV et SECTION
Si vous les utilisez correctement, vous pouvez utiliser les deux DIV et SECTION éléments ensemble dans un document HTML5 valide. Comme vous l'avez vu dans cet article, vous utilisez le SECTION élément pour définir des parties sémantiquement discrètes du contenu, et vous utilisez le DIV élément en tant que points d'ancrage pour CSS et JavaScript, ainsi que pour définir un modèle sans signification sémantique.
Article original de Jennifer Krynin. Édité par Jeremy Girard le 15/03/17
