Les éléments HTML div et span (conteneurs génériques)

Télécharger le PDF du cours


Livret PDF du cours
Dans cette nouvelle leçon, nous allons nous intéresser à deux éléments HTML très spéciaux qui sont les éléments div et span.

Ces éléments sont très particuliers puisqu’ils ne servent pas à préciser la nature d’un contenu mais vont simplement nous servir de conteneurs génériques en HTML.

Nous allons ici comprendre l’intérêt de ces deux éléments et en particulier leur intérêt pour l’application de styles CSS et les cas d’utilisation de ces éléments.

 

Le HTML et la valeur sémantique des éléments

Il est toujours bon de commencer par rappeler le rôle du HTML : le HTML a pour but de structurer du contenu et de lui donner du sens.

Les éléments HTML vont nous servir à marquer les différents contenus et donc à indiquer aux navigateurs et moteurs de recherche de quoi est composé une page. On va ainsi pouvoir dire grâce au HTML que tel contenu doit être considéré et traité comme un paragraphe, que tel autre contenu est un titre, que tel texte est plus important qu’un autre, que ceci est une liste, que cet objet est une image, etc.

A ce titre, les éléments HTML div et span sont très spéciaux puisque ce sont deux éléments HTML qui ne possèdent aucune valeur sémantique, c’est-à-dire qu’ils ne servent pas à préciser la nature d’un contenu.

Ces deux éléments sont en effet des conteneurs génériques qui ont été créés pour nous permettre d’ordonner nos pages plus simplement ensuite en CSS.

 

Quels usages pour les éléments div et span ?

Le fait que les éléments div et span ne possèdent aucune valeur sémantique peut faire penser qu’ils vont à l’encontre même du rôle du HTML. C’est tout à fait vrai en soi, et c’est la raison pour laquelle on essaiera idéalement de n’utiliser ces éléments qu’en dernier recours et si nous n’avons aucun autre choix crédible.

Les éléments HTML div et span ont été créés principalement pour simplifier la mise en page de nos pages HTML en CSS c’est-à-dire pour simplifier l’application de certains styles CSS.

 

Exemple d’utilisation de l’élément div

Nous allons utiliser l’élément div comme conteneur pour différents éléments afin de pouvoir ensuite facilement appliquer les mêmes styles CSS à tous les éléments contenus dans notre div par héritage ou pour les mettre en forme en appliquant un style spécifique au div

Ici, le terme de « conteneur » est l’équivalent du terme « parent » : nous allons simplement placer nos différents éléments à l’intérieur de nos balises <div> et </div> puis appliquer les styles CSS directement au div.

Exemple d'utilisation d'un élément div en HTML

Ajout de styles à un élément div en CSS

Résultat de l'utilisation d'un élément HTML div

See the Pen Cours HTML CSS 3.7.1 by Pierre (@pierregiraud) on CodePen.

On peut ici penser qu’on peut arriver au même résultat en utilisant plusieurs attributs class possédant la même valeur pour les différents éléments. Ce n’est pas tout à fait vrai.

Tout d’abord, ce n’est pas normalement exactement le rôle de base des attributs class : les sélecteurs .class sont censés être liés à un style CSS particulier et chaque élément doit pouvoir utiliser la class adaptée pour appliquer ce style. Ici, nous utilisons plutôt le sélecteur .class de manière exclusive en définissant de nombreux styles pour un groupe d’éléments en particulier. La logique de code est donc inversée.

En dehors de cette considération sur le rôle des class, il est beaucoup plus simple et rapide dans le cas présent d’utiliser un div que de renseigner un attribut class à chaque fois.

De plus, dans certaines situations, nous allons vouloir pour des raisons de mise en page appliquer des styles spécifiquement au conteneur et nos pas à chaque élément contenu comme par exemple des marges externes.

 

Exemple d’utilisation de l’élément span

L’élément span va lui servir de conteneur à un autre niveau : il va servir de conteneur interne à un élément plutôt que de conteneur pour plusieurs éléments.

On va par exemple pouvoir placer une certaine partie du texte d’un titre ou d’un paragraphe dans un élément span pour ensuite pouvoir lui appliquer un style CSS particulier, chose qu’il nous était impossible de faire jusqu’à présent.

Exemple d'utilisation d'un élément span en HTML

Ajout de styles à un élément span en CSS

Résultat de l'utilisation d'un élément HTML span

See the Pen Cours HTML CSS 3.7.2 by Pierre (@pierregiraud) on CodePen.

 

Les éléments div et span et les attribut class et id

Les attributs class et id sont des attributs universels ce qui signifie qu’on va pouvoir les utiliser avec n’importe quel élément HTML, et notamment avec les éléments div et span.

En pratique, il va être très courant de préciser des attributs class et id pour nos éléments div et span pour pouvoir appliquer des styles à un div (ou span) ou à un groupe d’éléments div ou span) définis.

Utilisation d'attributs class et id avec des éléments div et span

Application de styles CSS aux attributs class et id des éléments div et span

Résultat de l'utilisation des éléments HTML div et span avec des attributs class et id

See the Pen Cours HTML CSS 3.7.3 by Pierre (@pierregiraud) on CodePen.

Avec ce qu’on a appris dans la dernière leçon, vous devriez être capable de comprendre les styles appliqués ici en vous concentrant. Je vous laisse donc essayer, ça vous fera un bon exercice !

 

Quelles différences entre les éléments div et span et quand utiliser l’un plutôt que l’autre ?

La grande différence entre les éléments div et span va concerner ce qu’ils vont pouvoir contenir : un élément div va pouvoir conteneur plusieurs éléments et va donc nous servir de conteneurs d’éléments tandis que l’élément span va nous servir de conteneur pour une partie du contenu d’un élément et va donc être utilisé à l’intérieur d’un élément.

Cette différence est due au fait que les éléments div et span sont de niveau ou au « type » différents : l’élément div est un élément de niveau block tandis que l’élément span est un élément de niveau inline.

Nous découvrirons plus tard dans ce cours ce que ces différents « niveaux » ou « types » d’éléments signifient et les différences entre eux.

2 réflexions au sujet de “Les éléments HTML div et span (conteneurs génériques)”

  1. Salut,

    Il y a un truc que je ne comprends pas.

    Pour le dernier exemple. Tu mets un .noir dans le CSS. Seulement, il n’y a aucune class noir dans le code html.

    Est-ce que pour le dernier paragraphe du code html tu ne voulais pas mettre :

    Un dernier paragraphe

    Pour mettre le texte en noir sous fond violet du div ?

Laisser un commentaire