J'était déjà tombé sur cet article et déjà à l'époque il m'avait beaucoup plus.
Chris Coyier, de Css-Tricks propose une mise à jour de son article parlant de la beauté du code HTML.
Voici une traduction pour les non anglophones des différents points.
-
HTML5 - HTML5 et ses nouveaux éléments rendent le HTML encore plus beau que jamais.
-
DOCTYPE - HTML5 a le meilleur doctype !
-
Indentation - Le code est indenté de façon a montrer la relation père/fils des différents noeuds et mettre en valeur cette hiérarchie
-
Charset - Déclaré en tout premier dans la partie head, avant tout contenu.
-
Title - Le titre du site est simple et propre. Le but de la page apparaît en premier, suivi d'un séparateur et finis par le titre du site.
-
CSS - Un seul style est utilisé (les différents types de médias sont déclarés dans la feuille de style) et appliqués uniquement aux bons navigateurs. IE 6 et les versions précédentes ont une feuille de style universelle.
-
Body - ID appliqué au body afin de proposer un style unique de page sans ajouter de tags superflus.
- Javascript - jQuery est chargé depuis les serveurs Google. Un seul fichier javascript est chargé. Les scripts sont indiqués à la fin de la page.
-
Chemin vers les fichiers - Les ressources chargés utilisent des chemins relatifs pour être plus efficaces. Le chemin vers des contenus est quant à lui absolu, afin de pouvoir le proposer à travers d'autres plateforme (lecteur de flux rss par exemple).
-
Attribut des images - Les images possède un texte alternatif, principalement pour les personnes utilisant des navigateurs adaptés mais aussi pour la validation. Hauteur et largeur sont indiquées afin d'améliorer le rendu.
-
Le contenu principal en premier - Le contenu principal de la page arrive après les éléments principaux (titres, menus, etc) mais avant les contenus secondaires (sidebar).
-
Utilisation des éléments descriptif appropriés - Header, Nav, Section, Article, Aside ... toutes ces propriétés décrivent le contenu qu'elles contiennent de façon plus efficace que l'utilisation de divs.
-
Hierarchie - le tag Title est réservé pour du contenu concret, et suis une hiérarchie claire.
-
Description appropriée des Tags - Les listes sont marquées comme des listes, dépendants du type de liste : ordonnée, non ordonnée, et la liste de définitions
-
Contenu récurrent est inclus - Les éléments qui sont utilisés dans plusieurs pages sont incluses via un traitement côté serveur.
-
Classes sémantiques - Utilisation de nom, classes, ids appropriés sémantiquement : Elle décrive ce qu'elle font et pas comment ("col" au lieu de "leftbar")
-
Classes - Elles sont utilisées à chaque fois qu'un style doit être appliquée plusieurs fois.
-
IDs - Ils sont utilisés à chaque fois qu'un élément apparait qu'une seule fois.
-
Element dynamique - Ce qui doit être dynamique est dynamique.
-
Encodage des caractères - Si c'est une caractère spécial, il sera encodé.
-
Liberté de rendu - Aucun point dans la page applique un style visuel et aucun ne doit le faire. Tout dans la page doit être contextuel.
-
Commentaires - Les commentaires présents ne peuvent pas avoir l'air évident au premier abord, mais pourrons aider lors d'une prochaine relecture.
-
Valide - Le code doit respecter les recommandations W3C. Les tags doivent être clos, les attributs requis utilisés et aucun élément ne doit être déprécié.
