Je vous propose à travers cet article de mettre en avant les bonnes pratiques du WEB et plus particulièrement lors de la rédaction de notre code HTML. Que vous soyez débutant ou non, il est important de respecter de normes de développement, ceci ne rendra votre travail que plus facile – Relecture du Code, modification, passassions de projets, etc.
1°) Fermez vos balises
La fermeture des balises est une chose essentielle ! Même si vos balises ne l’imposent pas, faites le !
Pas bon
<li>Element 1 <li>Element 2 <li>Element 3
Bon
<ul> <li>Element 1</li> <li>Element 2</li> <li>Element 3</li> </ul>
La fermeture des balises est essentielle, ceci vous évitera des problèmes de validation.
2°) Choisir et renseigner le DOCTYPE
La Document Type Definition (DTD), ou Définition de Type de Document, est un document permettant de décrire un modèle de document SGML ou XML. Le modèle est décrit comme une grammaire de classe de documents : grammaire parce qu’il décrit la position des termes les uns par rapport aux autres, classe parce qu’il forme une généralisation d’un domaine particulier, et document parce que on peut former avec un texte complet.
Source Wikipedia.
Pour faire court, si votre DOCTYPE n’est pas correctement renseigné, voir, pas renseigné du tout, il en résultera des problèmes de lecture de vos pages WEB ; On peut cité entre autre des mauvaises interprétations CSS qui on pour effet l’effet inverse de ce que vous attendez…
La plupart d’entre nous vont choisir entre quatre différents doctypes lors de la création de nouveaux sites Web.
- <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
- <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
- <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
- <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
Reste à savoir quel DOCTYPE utiliser… beaucoup de développeurs vous dirons qu’il faut utiliser un DOCTYPE XHTML 1.0 Strict mais ceci n’est pas sans poser de problèmes ; en effet, tous les navigateurs ne réagissent pas encore de la même façon et comme nous créons des IHM (Interfaces Utilisateur), nous devons avant tout penser à l’utilisateur…
L’utilisation d’un DOCTYPE 4.01 Strict peut s’avérer la bonne solution de transition. A vous de faire vos test et de vous forger votre propre opinion en fonction de ce que vous attendez. Je vous renvoi vers le site du W3C et celui de « POMPAGE.NET » afin que vous puissiez étudier par vous même la situation :
http://www.pompage.net/pompe/doctype/
http://www.w3.org/QA/2002/04/valid-dtd-list.html
3°) Pas de CSS dans vos balises WEB
Ceci peut être tentant d’ajouter dans vos balises des informations de style :
<p style="color: blue; font-size: 1em;"><strong style="color: red;">Information importante : </strong>Il est important de ne pas intégrer des informations de style dans vos balise !</p>
Voici quelques raisons du pourquoi…
Ne jamais penser au style dans un premier temps, pensez structure.
Pensez aux futures modifications ; ne serait il pas plus aiser de regrouper toutes vos informations de styles dans un même document ?
Mieux vaut référencer vos balises à l’aide d’une feuille de style :
Code document HTML
<p><strong>Information importante : </strong>Il est important de ne pas intégrer des informations de style dans vos balise !</p>
Code document CSS
p.blue{
color:blue;
}
p.medium{
font-size:1em;
}
.red{
color:red;
}
4°) Placez toutes les feuilles de styles dans le header de votre index
Techniquement, vous pouvez placer les feuilles de style où vous voulez. Toutefois, la spécification HTML recommande qu’ils soient placés dans la balise HEAD du document. Le principal avantage est que vos pages se chargent plus rapidement et sont stockées en mémoire.
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>slDesign - Bonnes pratiques HTML</title> <link href="design/style.css" rel="stylesheet" type="text/css" /> <link href="js/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" /> </head>
5°) Insérez vos fichiers javascript en bas
JavaScript est un langage interprété par votre navigateur et non pas côté serveur. Afin d’être sur et certain que vos fonctions JavaScript soient interprétées, il faut s’assurer avant tout que l’ensemble du document soit chargé. Ceci peut paraitre basique, mais vos pages sont lues de bas en haut par votre navigateur et si votre navigateur inspecte une fonction JavaScript qui port sur un élément non encore chargé, cette dernière ne pourra s’exécuter.
Il existe avec jQuery la fonction « $(document).ready(funcion(){}) » qui s’assure que la page soit totalement chargé avant l’exécution de toute autre fonction. Mais si vous ne travaillez pas avec jQuery et que vous avez développé vous même des foncions JavaScript, il est préférable de les lancer en bas de votre document HTML.
6°) Ne pas utiliser JavaScript en ligne
Il y a quelques années de cela, la pratique voulait que l’on insère directement le code JavaScript dans les balises HTML ; Les événement « onClick » était suivi de toutes les actions…
Vous ne devez jamais faire cela. Au lieu de cela, le transfert de ce code à un fichier externe JS et l’utilisation « addEventListener / attachEvent » à « écouter » pour votre événement désiré. Ou, si vous utilisez un framework comme jQuery , il suffit d’utiliser le «clic» méthode.
// Exemple avec jQuery
$(document).ready(function() {
$("a").click(function() {
//Ma fonction
});
});
7°) Valider votre code
Cette étape est très importante. Je vous conseille de la réaliser tout au long de l’avancement de vos projets et non pas une fois que tout est terminé…
Des outils présents dans les navigateurs vous permettent de réaliser ce type d’opération, pour ne citer que l’add-on de mozilla, il y a la barre d’outil du développeur qui intègre un module de validation HTML et CSS
Barre d'outils développeur Mozilla
Menu de validation de la barre d'outils développeurs
8°) Téléchargez et installer Firebug
Ce module complémentaire vous permettra de débugger en temps réel vos applications WEB. Cet outil est indispensable, notamment par le fait qu’il interprète et lit le code généré par JavaScript et Ajax.
Vous trouverez ce module à l’adresse suivante : https://addons.mozilla.org/fr/firefox/addon/1843
Firebug vous permettra entre autre :
- Inspectez HTML et modifier le style et la présentation en temps réel
- Utiliser le débogueur JavaScript le plus avancé disponible pour n’importe quel navigateur
- Analyser avec précision l’utilisation du réseau et la performance
- Explorer le DOM
- Exécuter JavaScript à la volée
Copie d'écran Firebug
Ce n’est pas le tout de l’installer, encore faudra t-il l’utiliser…
Voici une liste de tutoriels portant sur cet outil :
http://www.siteduzero.com/tutoriel-3-31228-firebug-une-merveille-de-plus-pour-firefox.html
http://eric-pommereau.developpez.com/tutoriels/outil-web/firebug/
9°) Editez vos balises HTML en minuscule
Il n’y a aucun intérêt à capitaliser vos balises HTML. Dans un souci de relecture veillez à utiliser des minuscules pour vos balises. De même, il n’est pas interdit d’utiliser des majuscules dans vos attributs mais pensez avant tout à respecter une logique
Mauvaise pratique
<DIV id="BLOCDROIT"> <!-- Contenu --> </DIV>
Bonne pratique
<div id="blocDroit"> <!-- Contenu --> </div>
10°) Utilisez les balises ‘H’
Il existe 6 types de ‘Headers’ HTML et il est important de tous les utiliser… je l’avoue, j’utilise essentiellement le 4 premiers 
Cela dit, pour des raisons sémantiques et SEO, forcez vous à utiliser ces balises ; chacune d’entre elle sera interprétée selon leur importance.
Balises de titres
