Divitis
Un article de Wikipédia, l'encyclopédie libre.
Vous avez de Divitis (terme obtenu en concaténant l'élément HTML « <div/> » et le suffixe « -itis » employé, en anglais, dans de nombreux noms de maladies) désigne une pratique, en création de pages web, qui consiste à employer à tort les éléments HTML génériques « <span/> » et « <div/> », lesquels n'ont aucun rôle sémantique particulier, pour structurer le texte. Ce terme est apparu en 2003 dans l'ouvrage de Jeffrey Zeldman, « Design web : utiliser les standards » (ISBN 2-212-11548-2).
Sommaire |
[modifier] Origines du problème
Ce symptôme résulte d'une mauvaise application du principe de séparation stricte entre le fond (HTML) et la forme, c'est-à-dire la présentation, l'aspect (CSS), tel que décrit et souhaité dès le standard HTML 4.0 en 1997. Celui-ci décriait notamment l'emploi de la balise « <table/> » pour autre chose que l'affichage de données tabulaires, ou de la balise « <blockquote/> » autrement que pour encadrer une citation longue. De nombreux concepteurs de site ont alors pris l'habitude de structurer le contenu à l'aide des éléments génériques « <div/> » (pour les éléments composés de plusieurs blocs de texte) et « <span/> » (pour les contenus censés s'intégrer de façon fluide dans le corps du texte), afin de pouvoir appliquer à ces portions individuelles des règles CSS de formatage.
Le problème est que cette façon de faire agit au mépris du balisage sémantique, qui veut qu'un contenu soit encadré par une balise dont le sens est approprié à la nature du contenu. Par exemple, les balises « <h1/> » à « <h6/> » représentent des niveaux de titre dans un document, et sont plus appropriés qu'une série de « <div/> » dotés d'attributs class ou id spécifiques. On trouve également des documents qui mélangent inutilement balisage sémantique et éléments « <div/> » ou « <span/> » inutiles ! En effet, les balises sémantiques sont tout aussi sujettes à des règles CSS que les balises génériques, ce qui rend ces dernières souvent superflues, et utiles principalement à des fins de groupement de contenus.
Vous trouverez ci-dessous un exemple de document souffrant de Divitis, et son équivalent sémantique.
[modifier] Exemple typique de « Divitis »
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Résultat typique d'une « Divitis »</title>
</head>
<body>
<div id="Titre1">Titre de premier niveau</div>
<div class="Paragraphe">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismodtincidunt
ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="Titre2">Navigation</div>
<div id="Liste">
<span class="Ligne"><a href="/foo">Lien 1</a></span><br>
<span class="Ligne"><a href="/bar">Lien 2</a></span><br>
<span class="Ligne"><a href="/baz">Lien 3</a></span>
</div>
<div class="Titre2">Titre de deuxième niveau</div>
<div class="Paragraphe">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismodtincidunt
ut laoreet dolore magna aliquam erat volutpat.</div>
</body>
</html>
[modifier] Équivalent sémantique du même document
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML correctement structuré</title>
</head>
<body>
<h1>Titre de premier niveau</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismodtincidunt ut laoreet
dolore magna aliquam erat volutpat.</p>
<h2>Navigation</h2>
<ol>
<li><a href="/foo">Lien 1</a></li>
<li><a href="/bar">Lien 2</a></li>
<li><a href="/baz">Lien 3</a></li>
</ol>
<h2>Titre de deuxième niveau</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismodtincidunt ut laoreet
dolore magna aliquam erat volutpat.</p>
</body>
</html>
