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
.
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.
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.
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.
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 ?
Bonjour,
Oui en effet le .noir est superflu ici. Je ne me rappelle plus ce que je voulais faire au départ, certainement mettre en span en noir dans un div puis j’ai dû changer d’idée en chemin.