A quoi ressemble du beau HTML ?
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é.
Posted
by Cyril Nicodème
