Intégration HTML et référencement (SEO)
Ce document est un exemple de recommandations proposées par Google.
L’idée est d’utiliser un référentiel de règles simples permettant d’améliorer la collaboration entre développeurs/intégrateur, cela me semble être beaucoup plus efficace que d’inventer de fausses règles. Au final, nous créons un code de qualité en phase avec l’industrie informatique.
GOOGLE HTML/CSS STYLE GUIDE
| Capitalisation | Ne pas utiliser de lettre en capital pour son code, que ce soit en HTML ou CSS excepté pour les textes rédactionnels ( texte de la balise alt par exemple). |
|---|---|
| Commentaires | Explique le code dès que besoin et si possible ( quel sont les objectifs du code, à quoi il sert…). |
| TODO | Ne pas hésiter à noter des infos pour les développeurs avec l’item TODO. |
| Document type | HTML5 est à privilégier. |
| Validation HTML | Valider le code HTML dès que possible afin d’en vérifier la qualité. |
| Sémantique | La sémantique va jouer un rôle de plus en plus important, il convient de vérifier que les balises HTML sont utilisées pour ce qu’elles sont et non pour ce qu’on aimerait qu’elles soient. |
| Un code HTML épuré | Le code HTML doit être facilement parcouru par les moteurs de recherches. On évitera l’utilisation abusive de balises et de mélanger le HTML avec du JavaScript et/ou du CSS. |
| Fournir une alternative aux médias | |
| Pour les images, les vidéos, les audios, les animations via canvas, on doit fournir une alternative généralement textuelle. | |
| Note : les images utilisées pour de la décoration doivent comporter un attribut « alt » vide. | |
| Séparer les codes | Séparer la structure ( Code HTML), le code de présentation (feuilles de styles) et le code des comportements (JavaScript). |
| Entity references | Il n’est pas nécessaire d’utiliser les caractères spéciaux lorsque l’on est eu utf-8. |
| L’exception concerne les caractères qui sont utilisés en HTML comme < ou &, les caractères de contrôle ou invisible. | |
| Attribut TYPE | En HTML5, ne pas les déclarer les attributs « type » dans le header du document. |
| Formatage de code | Utiliser une ligne pour chaque ligne de code, pour chaque liste, pour chaque élément d’une table et indenter les éléments enfants. |
| Valider le code CSS | Valider le code CSS dès que possible afin d’en vérifier la qualité et le bon usage. Dans le cas d’utilisation de CSS3 non standardisé, avoir une méthode permettant de valider le maximum de code. |
| Bien nommer les classes et ID | Les noms des classes et des ID doivent être compréhensibles et refléter le but de leurs utilisations tout en restant génériques. |
| De même, il est recommandé de séparer les préfixes des classes et ID avec un trait d’union. | |
| Ordonner les CSS | Il est recommandé de déclarer les CSS par ordre alphabétique afin qu’il soit facilement mémorisable et maintenable ( le préfixe vendeur est ignoré pour marquer l’ordre). |
| Raccourcis en CSS | L’utilisation des raccourcis en CSS est préférable. |
| De même qu’une valeur égale à 0, n’a pas besoin d’avoir une unité de mesure déclarée. | |
| De même, ne pas noter le 0 des décimales si ce dernier en est l’unité principale.font-size: .8em; | |
| De même qu’il est recommandé de coder les couleurs en hexadécimal et plus particulièrement à 3 caractères lorsque c’est possible. | |
| Points virgules | Toute déclaration de CSS se termine par un point virgule, même la dernière déclaration. |
| Déclaration des CSS | Chaque déclaration de CSS se fait avec un retour à la ligne. |
| CSS commentaire | Les CSS sont regroupés à l’aide de commentaires, chaque regroupement est séparé par une ligne. |
| … |
