Tout d'abord, rappelons que le HTML 4.01 existe depuis bientôt 10 ans et qu'il serait temps d'écrire au moins du code HTML 4 correct, si vous ne codez toujours pas en XHTML 1.0 qui est plus jeune de quelques mois seulement.
Lorsque je dis "correct", c'est-à-dire du code qui tient un minimum compte des recommandations du W3C (responsable des travaux sur le HTML 4.01 et des styles CSS, faut-il le rappeler).
D'une manière générale, séparer le fond (HTML), de la forme (CSS) et du comportement (Javascript).
-
Déclarer un <!DOCTYPE (...)> pour chaque page, de préférence un <!DOCTYPE (...) STRICT (...)> (cf. w3school) pour notamment éviter les problèmes dus au "box model" de IE (w3architect) sans recourir aux "hacks" (cf. w3architect, about.com et 456bereastreet) ;
HTML 4.01 :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.0 :<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
Ne pas mettre de balise <style> en dehors de l'élément <head> (oui, ça paraît évident, mais si vous aviez vu ce que j'ai vu sur certains sites profesionnels...) cf. Y! css@top ;
-
De la même manière, éviter les balises <script type="text/javascript"> en dehors de la balise <head>.
Dans certains cas, les balises <script> peuvent se mettre tout à la fin du fichier html, en dehors même de la balise fermante </html> (oui, c'est sale). Ceci dans l'unique but de charger la page plus rapidement (cf. Y! js@bottom), car lorsque le user-agent (le navigateur, la plupart du temps) arrive sur une balise <script> ou <style>, les téléchargements parallèles sont stoppés ;
-
Encore plus généralement, éviter les déclarations CSS et les scripts javascript dans la page (inline), mais préférer les fichiers externes :
<head> <link href="css/main.css" type="text/css" rel="stylesheet" /> <script src="js/whatever.js" type="text/javascript"></script> </head>Les fichiers externes généreront certes des requêtes HTTP en plus, mais seront mis en cache par le navigateur, réduisant ainsi d'autant le chargement des autres pages du même site (du moins si elles utilisent les mêmes fichiers JS et CSS, ce qui est souvent le cas).
-
Eviter de coder :
<script src="whatever.js" language="javascript"></script> <script src="whatever.js" language="JavaScript"></script> <script src="whatever.js" LANGUAGE="JavaScript1.2"></script> <script src=whatever.js LANGUAGE=JavaScript></script> <script src="js/whatever.js" TYPE="text/javascript"></script> <script src="whatever.js"></script> <SCRIPT SRC="whatever.js"></SCRIPT>ou tout autre combinaison de ces mauvaises pratiques. mais bien :<script src="js/whatever.js" type="text/javascript"></script>Autrement dit :- pas de majuscule, ni dans le nom de la balise, ni dans les attributs ;
- toujours des guillemets (je conseille les doubles) autour des valeurs des attributs ;
- pas d'attribut "language" dont les valeurs n'ont jamais été standardisées et qui ne sert donc à rien ;
- et mettre l'attribut type valorisé à text/javascript.
-
Proscrire les attributs propriétaires et de manière générale les attributs de mise en page, pour préférer l'utilisation de style CSS. Ainsi, ne pas utiliser :
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">(...)</body> <div align="center">(...)</div> <td align="center">(...)</td> <td valign="top" bgcolor="#DDDDDD">(...)</td>
-
Utiliser des noms de classes informant sur le fond, et pas sur la forme : éviter par exemple les class="redBoldUnderline" mais préférer class="warning". Les styles CSS sont utilisés pour séparer le fond de la forme, donc mettre une information sur la forme dans le nom de la classe, c'est un peu... scier la branche sur laquelle on est assis.
-
Ne pas mettre de commentaire HTML autour des styles et des scripts (javascript.about.com).
Ne pas coder :<style type="text/css"> <!-- a {text-decoration: none} --> </style> <script type="text/javascript"> <!-- // Code Javascript --> </script>Le code ci-dessus se voit encore souvent aujourd'hui, c'est pourtant du code qui ne devrait plus se retrouver depuis au moins plusieurs années : il était fait pour les navigateurs que plus personne n'utilise aujourd'hui. Mais coder :<style type="text/css"> a {text-decoration: none} </style> <script type="text/javascript"> /* <![CDATA[ */ // Code Javascript /* ]]> */ </script> -
Proscrire les attributs de comportement inline (type onclick et autres onkeydown et préférer l'ajout d'écouteur :
Contenu :<html> <head> <script src="js/listeners.js" type="text/javascript"></script> <body> <p><a href="#action" id="action" <!-- Ceci est _mal_ et est donc commenté onclick="doAction(e);" --> >lien avec comportement</a></p> </body> </html>Comportement (contenu du fichier js/listeners.js) :// Fonction cross-browser pour ajouter un écouteur function addListener(element, eventName, handler) { if (element.addEventListener) { // W3C Compliant : Firefox, Opera, Safari element.addEventListener(eventName, handler, false); } else { // IE element.attachEvent("on" + eventName, handler); } } // Initialisation des 'onclick' function initialisation(e) { // Récupération de l'élément à partir de son attribut id var actionElement = document.getElementById('action'); addListener(actionElement, 'click', function (e) { doAction(e); }); } // Ajout d'un écouteur sur la fin du chargement de la page addListener(window, 'load', initialisation);Les nombreux (frameworks) Javascript/Ajax (Prototype, JQuery, Dojo, Mootools, ...) incluent d'une part une méthode cross-browser équivalente pour ajouter un écouteur sur un élément, et d'autre part contiennent aussi une meilleur méthode pour détecter que l'arbre DOM peut être manipulé même si toute la page (toutes les images, notamment) n'a pas été chargée :
Prototype :document.observe('dom:loaded', initialisation);Mootools :window.addEvent('domready', initialisation);JQuery :$(document).ready(initialisation);
Dojo :dojo.addOnLoad(initialisation);