Dans cette partie, nous allons nous intéresser à deux éléments HTML très spéciaux qui sont les éléments div et span .
Ces éléments vont simplement nous servir de conteneurs génériques en HTML.
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 puis appliquer les styles CSS directement au div.
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.
<div> </div> : définition de blocs, regroupement d'élements de type block
<span> </span> : habillage d'éléments de manière inline
Ces deux balises sont des conteneurs qui sont destinés à structurer le contenu, mais ils ont un rôle complémentaire et des règles de rendu différentes.
Extrait de l'article de xul.fr sur "Div et span, différences d'usage pratique"
La balise <div> est un bloc, donc un objet rectangulaire qui ne peut être réparti sur plusieurs lignes.
Elle possède les attributs margin, padding, width, height.
Elle est précédée et suivie d'un saut de ligne.
Par exemple, le texte suivant:
<div> Cet exemple <div> est constitué </div> de div </div>
s'affiche ainsi:
La balise <span> est inline, elle s'inscrit dans le flux du contenu, peut être répartie sur plusieurs lignes.
On ne peut lui spécifier une hauteur ni une largeur ni l'entourer d'une marge.
Elle peut être placée à l'intérieur d'un paragraphe pour délimiter une partie de celui-ci sans affecter en soi l'apparence du texte.
Par exemple, le texte suivant:
<span> Cet exemple <span> est constitué </span> de span </span>
s'affiche ainsi:
Cet exemple est constitué de span