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 ils vont servir à quoi ? Et bien en fait ils vont servir tous les deux à apporter du style<>. Comprennez 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és 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.
