Auteur: Jérôme Forget. Publié le 11 février 2007.
Les éléments DIV et SPAN, en conjonction avec les attributs id et class, offrent un mécanisme générique qui rajoute de la structure aux documents. Ces éléments définissent le contenu comme étant en-ligne (SPAN) ou de bloc (DIV) mais n'imposent aucune autre expression de présentation sur le contenu. Ainsi, les auteurs peuvent utiliser ceux-ci en conjonction avec les feuilles de style, l'attribut lang, etc., pour exploiter HTML selon leurs besoins et leurs goûts propres.
spécification HTML 4.01
Les éléments <div> et <span> sont extrêmement utiles en conjonction avec les feuilles de style CSS. Ce sont des éléments neutres qui peuvent servir d'élément conteneur à tout type de balises.
La balise <div> définit des divisions logiques dans un document XHTML. Elle agit comme un paragraphe, mais permet de regrouper de plus grandes sections d'une page.
Ces divisions vont vous permettre d'appliquer des styles CSS à toute une section d'un document. Ainsi, deux sections du document pourrait avoir un look totalement différent. Les divisions peuvent être nommées, pour vous permettre de manipuler des groupes d'éléments avec CSS ou JavaScript.
<div id="contenu">
<div id="contenu_principal"></div>
<div id="contenu_secondaire"></div>
</div>
On utilise la balise <div> pour positionner un bloc de contenu dans une page; par exemple, pour centrer un bloc de texte ou pour attribuer une couleur d'arrière-plan à un bloc de contenu.
La balise <span> est totalement neutre et s'insère en ligne, c'est à dire qu'elle s'insère dans le texte en l'incluant. Sans styles CSS, la balise <span> ne produit aucun effet.
La principale différence entre <div> et <span> tient dans leur structure de bloc ou en ligne. La balise <span> s'insère sur une ligne de texte, alors que la balise <div> commence généralement sur une nouvelle ligne.
Avec CSS, la balise <span> peut servir à différencier des éléments textuels en leur donnant une signification particulière. Par exemple, le titre d'un billet dans un blogue comprend le titre et la date de publication. Comme aucune balise n'existe pour représenter une date, on peut utiliser la balise neutre <span> en lui assignant une classe nommée date-publication :
<h3>Un titre de billet sur un blogue
<span class="date-publication">2007.02.11</span>
</h3>
Règle générale, on utilise la balise <span> lorsqu'aucun autre élément n'est approprié, pour différencier une partie de texte, un mot dans une phrase. Avec un attribut lang, id ou class, le <span> peut être utile à toutes les sauces.