Div et Span

L’utilisation faite sur le net des balises div et span a tendance à parfois faire penser qu’elles sont les mêmes. Mais si les balises div et span sont des conteneurs, elles ont des particularités qui font qu’elles ne sont pas forcément les mêmes.

La balise <div></div>

La balise div comme son nom le suggère je suppose est utile pour créer des divisions dans le document html. C’est un élément dont le contenu est traité comme un groupe compact distinct (block-level en anglais). Un div est comparable à une section d’un ouvrage qui peut contenir un paragraphe, une image, un tableau, une liste. Mais il est malheureux de voir que cette commande html de découpe est utilisée par certaines personnes comme un substitut de span ou de la balise p.
Exemple:

<div>
 <p>Ce paragraphe se trouve à l’intérieur d’un bloc div; de même que le tableau ci-dessous.
 </p>
 <table border=2 cellspacing=0>
  <caption>Livres</caption>
  <tbody>
   <tr>
    <th>Titre</th>
    <th>Édition</th>
   </tr>
   <tr>
    <td></td>
    <td></td>
   </tr>
  </tbody>
 </table>
</div>

Effet produit:

Ce paragraphe se trouve à l’intérieur d’un bloc div; de même que le tableau ci-dessous.

Livres

Titre	Édition

La balise <span></span>

Alors que la balise div est un bloc, l’élément span est une balise d’insertion dans l’alignement ou le prolongement de ce qui la précède (inline en anglais). Cet élément est d’une précieuse aide au marquage spécifique d’une portion de texte sans incidence sur le flux normal. Il est ainsi approprié pour mettre un morceau de texte en exergue, en lui appliquant particulièrement un style. Par contre il ne convient pas pour contenir des blocs comme div, p, table.
Exemple:

<table style="border: 1px solid #FF9900">
 <tbody>
  <tr>
   <td>Le HTML <span style="color: #6C3;"> pour les super nuls</span>. (Etc. etc.)</td>
  </tr>
 </tbody>
</table>

Effet produit:

Le HTML pour les super nuls. (Etc. etc.)

Le groupe de mots "pour les super nuls" a été mis dans une couleur verte.

Mot de fin: div n’est pas span mais à vous de décider.

On retiendra que la balise div convient à définir des sections dans la structure du modèle web (template en anglais). Quant à la balise span, dans une bonne logique de programmation, je recommande d’habitude aux débutants d’éviter son utilisation pour une portion de texte qui s’étend sur plus d’une ligne. Mais à voir les divers usages sur le web, c’est aujourd’hui plus devenu une question de point de vue qu’une question d’éthique de programmation. La voie est maintenant ouverte à votre propre feeling et à votre propre interprétation de la chose; l’essentiel étant que ça marche comme on veut. Amen! Alléluia!

© Copyright 2011-2012. United Kingdom of Love - Tous droits réservés.

Mots-clefs Technorati: DIV, SPAN, HTML