L'élément SECTION 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 tel que ARTICLE ou ASIDE. Les concepteurs utilisent fréquemment cet élément lors du balisage d'une section distincte de la page, une section entière qui pourrait être déplacée et utilisée sur d'autres pages ou parties du site. C'est un contenu distinct.
En revanche, l'élément DIV est approprié pour les parties de la page que vous souhaitez diviser à des fins autres que sémantique. Par exemple, vous pouvez envelopper du contenu dans un DIV pour lui donner un "crochet" pour le style avec CSS. Ce n'est peut-être pas une section de contenu distincte du point de vue sémantique, mais elle est mise à part afin que vous puissiez obtenir la mise en page ou la sensation souhaitée.
Tout est question de sémantique
La seule différence entre les éléments DIV et SECTION est la sémantique - le sens du contenu que vous divisez.
Tout contenu contenu dans un élément DIV n'a aucune signification inhérente. Il est mieux utilisé pour des choses comme:
- Styles CSS et des crochets pour les styles CSS
- Conteneurs de mise en page
- Crochets JavaScript
- Divisions qui facilitent la lecture du contenu ou du HTML
L'élément DIV était le seul élément disponible pour ajouter des crochets aux documents de style et aux mises en page. Avant HTML5, la page Web typique était criblée d'éléments DIV. En fait, certains éditeurs WYSIWYG utilisaient exclusivement l'élément DIV, parfois à la place des paragraphes.
HTML5 a introduit des éléments de sectionnement qui ont créé des documents plus sémantiquement descriptifs et ont aidé à définir des styles sur ces éléments.
Qu'en est-il de l'élément SPAN?
Un autre élément non sémantique courant est SPAN. C'est utilisé en ligne pour ajouter des crochets pour les styles et les scripts autour des blocs de contenu (généralement du texte). En ce sens, c'est exactement comme le DIV, mais ce n'est pas un élément de bloc. Considérez le DIV comme un SPAN au niveau du bloc et utilisez-le de la même manière, mais pour des blocs entiers de contenu HTML.
HTML n'a pas d'élément de sectionnement en ligne comparable.
Pour les anciennes versions d'Internet Explorer
Même si vous prenez en charge des versions nettement plus anciennes d'Internet Explorer de Microsoft qui ne reconnaissent pas de manière fiable HTML5, vous devez utiliser des balises HTML sémantiquement correctes. La sémantique vous aidera, vous et votre équipe, à gérer la page à l'avenir. Les dernières versions d'Internet Explorer, ainsi que son remplaçant, Microsoft Edge, reconnaissent HTML5.
Utilisation des éléments DIV et SECTION
Vous pouvez utiliser les éléments DIV et SECTION ensemble dans un document HTML5 valide—SECTION, pour définir des portions sémantiquement discrètes du contenu, et DIV, pour définir des crochets pour CSS, JavaScript et la mise en page fins.
Article original de Jennifer Krynin. Edité par Jeremy Girard le 15/03/17.