Balise non sémantique

Regrouper des éléments

Il arrive souvent que l'on veuille regrouper des éléments ensemble dans le HTML pour pouvoir mettre du CSS sur e groupe. Bien entendu, lorsque cela est possible, on peut utiliser les balises sémantiques pour arriver à nos besoins. Par exemple, nous pourrions utiliser une balise <section> pour regrouper des éléments et y appliquer du CSS. Toutefois, il arrive que les balises sémantiques n'ont pas leur place dans votre groupage d'éléments. Lorsque c'est le cas, nous utilisons plutôt les balises non sémantiques, soit le <div> et le <span>.

Span

Le <span> est une balise qui s'affiche avec le mode inline par défaut. Nous l'utilisons donc souvent pour regrouper des éléments inline ou textuel. Même s'il est possible de changer son mode d'affichage avec le CSS, nous l'utiliserons par convention uniquement en affichage inline.

Div

Le <div> est une balise qui s'affiche avec le mode block par défaut. On l'utilise donc généralement pour regrouper des éléments sous forme de boîtes. Même s'il est possible de changer son mode d'affichage avec le CSS, nous l'utiliserons par convention uniquement en affichage block, flex ou encore grid.

Cette balise est très pratique pour regrouper des éléments ensemble pour y mettre du CSS, comme de la façon suivante: