close

Les éléments HTML Div et Span

#1 A quoi servent le Div et le Span ? open

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 ? open

On va implanter des éléments div et span dans le code HTML, puis les cibler en CSS, de manière à apporter du style.

Tester le code

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 open

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.

Tester le code