Les 20 pratiques HTML de base
17 août 2010vu 996 fois2 commentaires
La plupart des pages web sur lesquelles vous surfez à l’heure actuelle sont en HTML, c’est le langage du web ! Dans cet article, je vais partager avec vous 20 pratiques de base qui vous permettront de tendre vers un code HTML propre et conforme.
1. Déclarez toujours votre doctype
La déclaration du doctype doit être la première chose présente dans tous vos documents HTML. Elle indique au navigateur quelle norme HTML votre page utilise et lui permet de lire et d’interpréter vos balises correctement.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Je vous conseille d’utiliser le doctype XHTML 1.0 Strict. Certains développeurs considèrent ce doctype comme compliqué du fait que cette norme soit moins tolérante que l’XHTML Transitional, mais d’un autre côté sachez qu’il garantit le respect des standards les plus récents !
2. Utilisez la balise <title> pour donner du sens à vos pages
La balise <title> est très importante aux yeux des moteurs de recherche car elle caractérise l’information que le visiteur va pouvoir trouver sur votre page. C’est aussi une balise très importante pour vos visiteurs parce qu’elle sera visible dans les résultats des moteurs. Par exemple le titre suivant :
<title>Australian Immigration | Australian Visa</title>
Apparaitra comme ceci dans les résultats d’un moteur de recherche (ici, Google.fr) :
3. Utilisez les tags <meta>
Bien que leur prise en compte soit minime (voire nulle pour certains moteurs de recherche), ces balises contribuent tout de même à donner du sens à vos pages.
La balise meta « description »
La balise meta « description » décrit le sujet de votre page. Pour chacune de vos pages, placez dans cette balise un résumé pertinent de votre page web, qui donnera au visiteur l’envie d’entrer dans votre site. Par exemple :
<meta name="description" content="Recherchez des commerces et des services de proximité, affichez des plans et calculez des itinéraires routiers." />
Inutile de spammer des mots ou phrases clés. Essayez plutôt de faire simple en expliquant clairement le but de votre page.
La balise meta « keywords »
La plupart des experts SEO s’accordent à dire que cette balise n’est plus prise en compte par Google depuis longtemps, la remplir ne doit pas vous prendre plus de quelques secondes. La balise meta « keywords » contient une liste de mots et expressions clés se rapportant à votre page web. Ces mots clés doivent être séparés par des virgules. Encore une fois, il est inutile de répéter plusieurs fois les mêmes mots clés : une occurrence par keywords suffit.
4. Utilisez les balises <div> pour découper votre design
Les balises <div> doivent vous servir à scinder votre design en plusieurs divisions logiques. Il ne s’agit pas de parsemer votre site d’un nombre incalculable de <div>, mais au moins de séparer les grandes parties (haute de page, contenu, barre latérale, pied de page,…). Vous ne devez pas utiliser <div> pour englober des éléments de contenu seuls, d’autres balises seront surement mieux adaptées (<span>, <p>, <li>, par exemple).
<div id="header"></div> <div id="content"></div> <div id="footer"></div>
Les <div> doivent vous aider à organiser votre design, si vous les utilisez correctement, vous verrez qu’elles vous verrons gagner de précieuses minutes lors de la création de vos sites internet.
5. Séparez le contenu et la présentation
Le code HTML représente votre contenu. Le CSS est uniquement là pour vous permettre de mettre en forme ce contenu. Il ne faut jamais mélanger les deux !
Vous ne devez pas utiliser les styles directement dans votre code HTML, mais préférer plutôt l’utilisation d’un fichier CSS externe. Pourquoi ? Pour plusieurs raisons. La première est la simplicité de maintenance du code et la seconde raison est que cela ne pourra faire qu’améliorer le ratio contenu/code de votre page, favorisant grandement le référencement de vos pages par les moteurs.
6. Utilisez Minify et fusionnez vos CSS
Chacun des fichiers CSS contenus dans votre page nécessite une requête HTTP. Qui dit « requête HTTP », dit augmentation du temps de chargement de votre site internet.
Une des solutions à ce problème consiste à Minify-er votre code (supprimer les caractères inutiles tels que les espaces, retours à la ligne, …) puis d’essayer de fusionner les fichiers qui peuvent l’être, en un seul fichier.
Cependant, un problème persiste avec cette approche. Vous devrez désassembler, puis re-fusionner, à chaque fois que vous voudrez mettre à jour votre code. Vous avez donc tout intérêt à fusionner vos CSS qu’une fois votre processus de production terminé.
Vous trouverez en ligne de nombreux outils qui vous permettront de d’optimiser vos CSS (Comme par exemple : CSS Optimizer, Clean CSS, CSS Compressor, …)
7. Minify-iez, fusionnez, et regroupez vos JavaScript en fin de fichier
Je ne vais pas m’attarder sur ce point que j’ai déjà abordé dans mon article sur l’optimisation du temps de chargement de votre site internet.
Le principe est quasiment le même que pour vos CSS. Néanmoins un point diffère : Dans la mesure du possible, il est toujours mieux d’inclure ses fichiers JavaScript en fin de fichier. En effet, les navigateurs ne permettent pas de télécharger plusieurs fichiers en parallèle. Autrement dit, pendant que votre navigateur télécharge un fichier JavaScript, le chargement de votre page est bloqué. La meilleure stratégie est donc de charger l’intégralité de ses scripts en fin de page, juste avant de fermer son <body>.
8. Utilisez correctement les balises de titres
Prenez l’habitude d’utiliser ces balises pour hiérarchiser votre contenu. Lorsque vous écrivez du contenu (pas forcément pour le web), il est d’usage d’utiliser un titre pour la page, un sous titre pour un paragraphe, et pourquoi pas des sous-titres de second niveau pour des paragraphes qui seraient un peu long. Vous verrez que votre contenu gagnera fortement en lisibilité. Le lecteur cherchant une information pourra s’y retrouver en un coup d’œil.
Sachez également que les robots des moteurs de recherche attribuent une grande importance à ces balises, que ce soit pour les moteurs ou pour vos visiteurs, ne les négligez pas.
9. Utilisez la bonne balise HTML, au bon endroit
Apprenez la signification des différentes balises, leur rôle, leur emploi, et utilisez-les correctement.
On utilise par exemple <em> ou <strong>pour insister sur un point, plutôt que les balises <i> ou <b> qui sont désormais obsolètes.
Utilisez la balise <p> pour vos paragraphes. Évitez d’utiliser les <br/> pour sauter des lignes. Préférez plutôt les propriétés CSS margin et padding.
Pour les ensembles d’éléments, utilisez :
<ul>lorsque l’ordre des items de la liste n’est pas important<ol>lorsque l’ordre des items de la liste est important<dl>lorsque vous souhaitez mettre un item suivi de sa définition (en utilisant<dt>et<dd>)
Utilisez <blockquote> uniquement pour faire des citations, et non pas pour indenter votre texte.
10. N’utilisez pas des <div> pour tout et n’importe quoi
Souvent les développeurs ont tendance à entourer des <div> par d’autres <div>, contenants elles-mêmes d’autres <div>, ce qui à pour conséquence de créer de véritables montagnes de <div>.
Dans le cadre du dernier projet de spécification HTML (W3C), il s’est dit qu’une <div> doit être utilisée, je cite : « comme un élément de dernier recours, seulement lorsqu’aucun autre élément est susceptible de convenir ».
Autrement dit : n’utilisez pas les <div> juste pour transformer vos éléments inline en élément block : il existe la propriété CSS display: block; pour cela.
11. Utilisez des listes non-ordonnées (ul) pour vos menus
La navigation est un aspect très important dans la conception d’un site web. Et les <ul> combinés au CSS ajoutent une fois de plus de la sémantique à votre page. Car après tout, une menu n’est rien de plus qu’une liste de liens organisée ! Un exemple :
<ul id="menu"> <li><a href="#" class="active">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Services</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact Us</a></li> </ul>
12. N’oubliez pas de fermer vos balises
La fermeture de toutes les balises HTML est une des spécifications du W3C. Certains navigateurs peuvent afficher vos pages correctement même si vos balises ne sont pas correctement fermées, mais ne pas fermer ses balises ce n’est pas « W3C Valid ».
13. Écrivez vos balises en minuscule
Tout comme fermer ses balises, écrire ses balises en minuscule fait partie des standards. Les écrire en majuscule n’affectera pas le fonctionnement du site, mais il affectera la lisibilité de votre code.
14. Utilisez l’attribut « alt » sur vos images
L’utilisation de l’attribut alt pour vos images <img> fait aussi partie des spécifications W3C. L’utilisation de cet attribut est indispensable pour une bonne sémantique.
Vos attributs alt doivent avoir du sens. Voici ce qu’il ne faut pas faire :
<img id="logo" src="images/logo.gif"/> <!-- pas d'attribut alt, donc pas valide --> <img id="logo" src="images/logo.gif" alt="logo.gif" /> <!-- valide, mais l'attribut alt n'a aucun sens... -->
Ce qu’il faut faire :
<img id="logo" src="images/logo.gif" alt="Logo du blog de l'agence web mikii.fr" />
15. Utilisez l’attribut « title » sur vos liens (si nécessaire)
L’utilisation de l’attribut title améliore l’accessibilité (WCAG), à condition qu’il soit utilisé correctement. Il est important de comprendre que l’attribut title doit être utilisé pour ajouter du sens à l’ancre du lien.
Ce qu’il ne faut pas faire :
<a href="http://www.mon-site.com/categories.php" title="Voir tout"> Voir tout</a>
Dans cet exemple, lorsqu’un lecteur d’écran (pour déficient visuel) lit votre balise <a>, l’auditeur entendra successivement deux fois la même information alors que l’attribut title était censé lui fournir un complément d’information sur le lien pointé.
Ce qu’il faut faire :
<a href="http://www.mon-site.com/categories.php" title="La liste des catégories">Voir tout</a>
16. Utilisez des <fieldset> et des <label> dans vos formulaires
Utilisez des <label> pour qualifier vos champs de saisies (<input>) et divisez vos champs de saisie en ensembles logiques, en utilisant <fieldset>. Si vous avez besoin de nommer un <fieldset>, vous pouvez utiliser la balise <legend>.
Exemple :
<fieldset>
<legend>Informations personnelles</legend>
<label for="nom">Nom</label><input type="text" id="nom" name="nom" />
<label for="email">E-mail</label><input type="text" id="email" name="email" />
<label for="sujet">Sujet</label><input type="text" id="sujet" name="sujet" />
<label for="message" >Message</label><textarea id="message" name="message" ></textarea>
</fieldset>
17. Utilisez les commentaires conditionnels
Lorsque vous rencontrez un problème d’affichage sur Internet Explorer, vous avez la possibilité d’utiliser les commentaires conditionnels pour régler cela. Ces commentaires permettent de faire en sorte qu’une partie de votre code ne soit interprétée que par Internet Explorer, voire même que par une version particulière de ce navigateur.
Exemple :
<!--[if IE 7]> <link rel="stylesheet" href="css/ie.css" media="all"> <![endif]-->
Ici, la feuille de style ie.css ne sera chargée uniquement si le navigateur du visiteur est Internet Explorer 7.
Pour plus d’informations sur ces commentaires conditionnels, vous pouvez vous référerez à cet article rédigé chez alsacréations : Les commentaires conditionnels pour Internet Explorer.
18. Utilisez le Validateur W3C
La validation de votre code n’est pas le test ultime qui décidera si votre page est correctement codée ou non. Tout simplement parce qu’une page valide, n’est pas forcément une page bien codée, et inversement. Un site bien conçu ne respecte pas toujours à 100% les normes du W3C, si vous en voulez la preuve, passez au validateur les pages d’accueil de Google et Yahoo par exemple.
Mais la validation de votre page grâce à des services comme le W3C Makup validation) peut vous être utile pour identifier des erreurs d’affichage, par exemple.
Lorsque vous concevez votre site, prenez l’habitude de le passer au validateur assez régulièrement, cela vous évitera de tout déboguer en une seule fois lorsqu’il sera terminé.
19. Mettez votre code en forme
Un code propre et bien indenté montre, en un sens, votre professionnalisme ainsi que votre considération pour les personnes qui pourraient être amenées à modifier votre code.
Écrire un code source propre dès le début augmentera la lisibilité de votre travail et la productivité de ceux qui seront amenés à le relire ou à lui apporter des modifications (c’est à dire surement vous !).
20. Évitez les commentaires trop long
Le but des commentaires est de documenter votre code. C’est une très bonne chose pour les langages évoluées comme PHP, C# ou Java. Mais en HTML, les balises sont déjà très explicites. Commenter chaque ligne de code n’a donc pas beaucoup de sens.
Conclusion
Si vous voulez aller plus loin dans les sujets que nous avons abordés dans cet article je vous conseille ces deux ouvrages disponibles sur internet :
- Maîtrise des CSS
de Andy Budd (février 2010) – Un très bon ouvrage avec de nombreux exemples pour connaître le CSS sur le bout des doigts.
- Réussir son site web avec XHTML et CSS
de Mathieu Nebra (janvier 2010) – Le livre indispensable, autant pour les débutants que pour les plus confirmés d’entre vous.
Voilà, c’est terminé pour cette liste des 20 pratiques de base en HTML ! Merci pour votre lecture, n’hésitez pas à poser vos questions ou faire vos remarques en commentant cet article, à très bientôt !
Il y a 2 commentaires
Article très intéressant, c’est toujours bien de rappeler les bases. Et puis il y en a souvent qu’on ne connaissait même pas.
RT @guerrier: Les 20 pratiques #HTML de base http://bit.ly/aSpH4F #WebDesign