Div et span, différences d'usage pratique

Ces deux balises sont des conteneurs sont destinés à structurer le contenu, mais ils ont un rôle complémentaire et des règles de rendu différentes. Span sert surtout à associer un style à une partie d'un texte tandis que div sert à agencer le contenu de la page.

Les deux balises doivent avoir une balise de début et de fin, la forme réduite n'est pas reconnue évidemment.

N'est pas valide par exemple ceci:

<div class="xxx" /> // non valide

Le format seul valide est celui-ci:

<div class="xxx"></div>

La balise peut être vide.

Div

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>0000000<div>111111</div>222222</div>

s'affiche ainsi:

Span

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.

<span> n'a pas de saut de ligne et le texte suivant:

<p><span>0000000<span>111111</span>222222</span></p>

s'affiche donc ainsi:

0000000111111222222

Margin

On ne peut pas attribuer une marge externe avec l'attribut margin.

<p>
<span style="border:1px dotted black">0000000
<span style="margin:8px;background:green;">111111</span>
222222</span>
</p>

s'affiche ainsi:

0000000111111222222

Avec Internet Explorer (avant IE9), la marge est effective verticalement et horizontalement.
Avec Chrome et Firefox elle ne s'affiche pas, conformément au standard.

Sans la marge cela s'affiche ainsi:

0000000111111222222

Height et width

Les attributs de largeur et hauteur sont reconnus par IE avant la version 9 mais n'ont aucun effet avec Firefox et Chrome et doivent être oubliés:

<p>
<span style="border:1px dotted black">0000000
<span style="height:32px;width:100px;background:green;">111111</span>
222222</span>
</p>

0000000111111222222

Padding

<p><span style="border:1px dotted black">0000000
<span style="padding:8px;background:green;">111111</span>
222222</span></p> 

0000000111111222222

On voit que la marge interne est effective sur tous les navigateurs.

Plus d'information

• Specification W3C. HTML 4.01. Il n'y a pas de différence en HTML 5, mais div peut être remplacé par de nouvelle balises.