Niveau Niveau débutant

Quelle est la différence entre un <div> et un «calque» ?

Articledesign

Publié par le , mis à jour le (48577 lectures)

calque div design

Les logiciels WYSIWYG automatiques, comme Macromedia Dreamweaver (jusqu'aux versions très récentes), continuent de véhiculer les concepts et termes obsolètes de «calques». En mode Création de Dreamweaver, il est possible de concevoir sa mise en page soit grâce aux tableaux, soit grâce aux «calques», c'est à dire — selon lui — les balises <layer>, <div> ou <span>. Or, cet abus de langage est malheureusement demeuré très ancré et induit de nombreux amalgames.

Un peu d'histoire

Le terme de "calque" est apparu en 1997. Les "layers" (ou calques) sont des éléments du langage HTML que Netscape a ajouté dans la version Version 4.0 de son navigateur. La balise <layer> constituait en un bloc transparent dans lequel on pouvait inclure du texte, des images, des animations, et même d'autres calques.

L'avantage était que les calques (contrairement aux tableaux qui ne permettent pas toujours un positionnement précis car ils ne sont pas prévus pour ça) pouvaient être placés exactement au pixel près dans la page. Les calques pouvaient aussi se chevaucher complètement ou partiellement. Un peu comme des feuilles transparentes l'une au-dessus de l'autre.

calques

La balise <layer> a disparu rapidement tout simplement parce qu'elle n'était pas reconnue par Internet Explorer, mais aussi parce qu'elle est arrivée un peu tard. Le consortium W3C avait déjà prévu d'ancrer la possibilité du positionnement non pas en HTML mais dans les feuilles de style CSS. C'est pour cette raison que la balise <layer> n'est jamais apparue dans le standard de langage HTML 4.0. Par contre, le terme de "calque" est resté... et souvent mal compris.

Les logiciels comme Dreamweaver ont repris le principe en créant leurs propres "calques" d'abord avec la balise <layer> puis avec la balise <div> (qui est une balise de bloc générique) à laquelle ils rajoutent automatiquement une multitude de propriétés contraignantes et souvent inutiles (positionnement absolu, z-index, name...) Dreamweaver a même longtemps utilisé la balise <span> comme calque alors que c'est une balise inline pas du tout faite pour faire des blocs ! (précisions sur les termes de bloc/inline).

Tout est "calque"

Si on considère le fait que les nouvelles propriétés CSS pour positionner des éléments font partie du standard officiel et sont interprétées aussi bien par Netscape que par Internet Explorer, la technique des "calques" en HTML doit être mise à l'écart.

En fait, le terme de "calque" ne veut plus rien dire puisque chaque balise de bloc peut servir de calque (<div>, mais aussi <p>, <h1>,...). Les styles CSS permettent de positionner n'importe quelle balise et de lui indiquer n'importe quel comportement (couleur, taille de texte, position, chevauchement,...), il n'existe donc plus de "balise attitrée" pour les calques, même si <div> est encore confondue avec la notion de calque.

Quand parler de "calque" alors ?

La seule utilisation plus ou moins valable du terme "calque" de nos jours serait la désignation de conteneurs qui se superposent (utilisation de la propriété z-index). En conclusion : un <div> n'est pas un calque et un calque n'est pas un <div>. Mettons-nous ça dans le crâne : tous les éléments HTML peuvent être positionnés et superposés en CSS.

Comme l'explique très bien un article de Pompage :

Une source énorme de confusion a pour origine un composant de Dreamweaver appelé "calques", qui permet aux éléments d'une page d'être placés au-dessus d'autres. Ces calques sont structurés dans le code en tant que "div". En conséquence, beaucoup croient que les div sont des calques, mais ce n'est pas le cas.

Un <div> est l'abréviation de division, et c'est un élément créé par le W3C pour servir d'élément bloc générique quand il n'est pas souhaitable d'utiliser un des éléments blocs plus anciens, comme <h1> ou <p>. Ceux-là et les autres éléments sémantiques transmettent du sens à leurs contenus, en déclarant à la face du monde "Voici un titre" ou "Voici un paragraphe"...