DIV

Syntaxe

Paramètres

Description

Cette balise permet d'indiquer qu'il s'agit d'un bloc de division ayant une orientation d'affichage indépendante.

Remarques

• Il est recommandé d'utiliser autant que possible cette balise plutôt que la balise «TABLE» car elle provoque un affichage plus rapide sur certains navigateurs comme IE et FireFox par exemple. Toutefois, le temps économisé est beaucoup plus négligeable sur des navigateurs comme Opera toutefois. Cependant, si vous développez une page HTML inférieur à la version 4, les comportements d'affichages avec la balise DIV sont plutôt imprévisible et mal supporté par de nombreux navigateurs.
• Div Mania : Lors de l'ère du HTML4 et du XHTML 1.0, on voyait uniquement les balises «div» au détriment des autres balises HTML. Cette période est révolue ! La raison est simple, les moteurs de recherches ne comprennent pas vos pages avec uniquement des «div» partout. Ainsi, à partir du HTML5, il faut donc utiliser toutes les balises significatives comme «ARTICLE» par exemple, la balise «FOOTER» pour le bas de page des listes, lorsqu'il s'agit de liste et toutes les autres balises permettant une meilleure compréhension.
• Conflit : Dans la plupart des navigateurs, le paramètre «style» est prioritaire sur le paramètre «class» ou «id». Ainsi, si vous définissez aux deux endroits, des valeurs différentes, par exemple «style="color:red;"» et «color:green» dans la classe, c'est le paramètre «style» avec son «color:red» qui sera utilisé par le navigateur Web. Il est à noter qu'il est préférable de ne pas mettre des informations contradictoires comme celle-ci (deux paramètres identiques avec des valeurs différentes) car le résultat peut malgré tout demeurer imprévisible.
• Ancienne pratiques : Au début du HTML, la bande passante était très limitée, par exemple, le modem avec un taux de transfert de quelques centaines d'octets par secondes. Le chargement des pages était très lent, et pour accélérer le processus beaucoup de développeurs enlevaient délibérément les guillemets «"» au paramètre de leur balise afin de réduire la taille de leur page HTML. Par la suite, à cause des résultats souvent imprévisible que cela causait par à un IE versus les autres navigateurs, les idées de la norme du w3c se sont imposées et le retour des guillemets au paramètres de balises est revenue.
• Les paramètres peuvent être indiqué dans l'ordre que vous le souhaitez. Il n'existe pas d'obligation de les mettre dans un ordre précis pour les navigateurs Web.

Bonnes pratiques

En HTML, il existe les paramètres «id» et «class» permettant de reconnaitre une ou des balises en particulier au travers de tous les autres balises du même nom. Étant donné la grande flexibilité des moteurs de rendu des navigateurs Web (Elektra, Gecko, KHTML, Presto, Tasman, Trident,...), on a malheureusement constater un mélange de la fonctionnalité de chacun. Bien que les classes étaient à l'origine l'ingrédient magique pour reconnaitre les feuilles de styles et que les jQuery ont grandement facilité l'application de comportement ou d'affichage sur l'un comme sur l'autre et quand presque tous les cas, on obtient le résultat que l'on souhaite, le rôle de chacun devrait être établit selon le critères suivant : Lorsqu'il y a en un seul, on devrait utiliser un identificateur («id») et lorsqu'il y a en plusieurs, ce devrait être une classe («class»). Voici un exemple d'une mauvaise pratique :

Voici un exemple d'une bonne pratique :

Exemples

Voici un exemple montrant comment afficher deux divisions sur une même ligne :

on obtiendra le résultat suivant :

L'exemple suivant permet de changer le message du «div» nommé «CurrentZone» lorsque la souris passe au dessus d'une des 3 zones (équivalent d'un jQuery.mouseOver) :

on obtiendra le résultat suivant :

Références

HTML - The Definitive Guide, 3rd Edition, Edition O'Reilly, Chuck Musciano, Bill Kennedy, 1998, ISBN: 1-56592-492-4, page 509
La Bible Micro Application HTML & Développement Web, Edition Micro Application, Stefan Munz, Wolfgang Nefzger, 2003, ISBN: 2-7429-2898-7, page 603