Les éléments HTML Div et Span
#1
A quoi servent le Div et le Span ?
Ces deux éléments HTML div
et span
n'apporte pas de sens au contenu qu'ils balisent. Ca veut dire que <div>un contenu</div>
ou <span>un contenu</span>
n'ont pas de signification particulière au niveau du HTML. On dit qu'ils n'ont pas de sémantique. Contrairement par exemple à un <p>un contenu</p>
qui signifie qu'on a affaire à un paragraphe ou à un <h1>un contenu</h1>
qui signifie que l'on a affaire à un titre de niveau 1...je pourrais continuer avec plein d'autres éléments HTML.
Alors s'ils n'apportent pas de sémantique, à quoi vont-ils servir ? Hé bien en fait, ils vont servir tous les deux à apporter du style <>. Comprenez que l'on va les placer dans le HTML, pour pouvoir les cibler dans le CSS, de manière à placer des règles CSS.
#2
Comment utiliser le Div et le Span ?
On va implanter des éléments div
et span
dans le code HTML, puis les cibler en CSS, de manière à apporter du style.
Le div
a un rôle structurant. C'est un élément de type block
. Le plus souvent il est utilisé comme un conteneur pour encapsuler d'autres éléments.
Le span
est un élément de type inline
. Le plus souvent, vous vous en servirez pour apporter du style à une portion de texte.
#3
Deux colonnes avec des Div
Dans un exemple, on va se servir de deux div
pour construire la structure d'une page à deux colonnes. Les deux div sont placées, en display:inline-block
, avec une largeur de 50%. Il est nécessaire d'aligner verticalement les deux div avec un vertical-align:top;
Il y a bien sûr d'autres solutions modernes pour faire cela en utilisant les Flexbox ou CSS Grid. J'utilise cette technique assez ancienne à titre d'exemple d'utilisation de div
.