Parce que beaucoup de personnes sont perdues entre les différentes normes possibles, ou bien les tutos qui n'existent qu'en anglais (ou qui sont parfois mal traduis), j'ai décidé de faire une petite liste des bonnes pratiques à suivre en HTML5 : ce qui regroupe les langages HTML5, CSS3 et ECMAScript (JavaScript pour les intimes) 2015 et supérieur.

Dans ce billet je parlerais surtout de bonnes pratiques à suivre en HTML/CSS et dans le suivant je me dédirais au JavaScript.

Il faut noter que la dernière version du HTML5 a été finalisé le 28 octobre 2014 mais il a fallu plusieurs années aux navigateurs pour s'adapter à toutes ces nouveautés et certains navigateurs n'implémentent pas encore tout à l'heure où est écrit cet article.

Règle d'or : La séparation du fond et de la forme

Règle qui est à la fois difficile à respecter quand on débute et indispensable quand on se relit, la séparation du fond et de la forme consiste à implementer dans des fichiers differents le CSS, l'HTML, le JS ou tout autre donnée utile dans une page web (JSON, XML, etc).

Cette regle parait un peu bête du point de vue d'un code qui ne depasse pas quelques dizaines de lignes, ou même pour des modifications mineures mais lors d'une mise à jour du design, il est toujours plus facile de chercher dans le CSS (encore plus lorsqu'il est bien commenté) avec un selecteur que de chercher dans le code HTML directement.

Une autre contrainte est celle du travail d'équipe, lorsqu'un developpeur back-end va generer l'HTML avec son code serveur, il ne doit pas s'amuser a devoir ecrire les regles CSS à l'arrache, pour coller à ce que le webdesigner a proposé comme maquette. Ou vu d'une autre maniere, le code JS ne doit pas "inonder" la structure de la page HTML ce qui rendrait le travail du webdesigner beaucoup plus long.

Enfin, derniere raison, c'est toujours plus agréable de voir un code bien organisé, même si on travail seul, le "soi" du futur preferera toujours lire un code clair (pour reproduction, modification ou tout autre action).

Résumé :

Ce qui est à éviter :
(HTML)

<div style="color: green; font-size: 1.2em">
    Lorem ipsum ....
</div>

Ce qui est à privilegier :
(CSS)

.green-amazing {
    color: green; 
    font-size: 1.2em;
}

(HTML)

<div class="green-amazing">
    Lorem ipsum ....
</div>

Respecter la structure du document

"Une phrase commence toujours par une majuscule et se termine par un point."

On a tous appris cette phrase dans nos premieres années d'école, et on pourrait faire une phrase semblable pour l'HTML:

"Un document HTML commence toujours par un doctype, puis une balise <html> qui se fermera avec le document."

Bon d'accord, c'est un peu plus long, mais l'idée est là. On peut aussi ajouter que cet element <html> possedera deux enfants: un <head> qui stocke les metas, et un <body> qui stocke la structure du site, et aucun autre enfant à <html> - même les balises <script> sont dans l'une des deux précedentes balises, de préférence avant le </body> pour eviter de ralentir le chargement de la page.

Resumé:
La structure a respecter est:

<!DOCTYPE html>
<html lang="fr">
    <head>
        Nos métas, fichiers css, etc
    </head>
    <body>
        Notre contenu
        ... et les possibles scripts
    </body>
</html>

Toujours utiliser des double quotes " " afin de definir les valeurs d'attributs

Et par extension toujours entourer les valeurs de quotes.
Il vaut donc mieux écrire :

<div class="green-amazing">
    Lorem ipsum ....
</div>

que (mais qui reste tout de meme relativement acceptable)

<div class='green-amazing'>
    Lorem ipsum ....
</div>

ou (celui là est à completement éviter)

<div class=green-amazing>
    Lorem ipsum ....
</div>

Ne pas oublier de fermer ses balises

Que ce soit les balises orphelines (Ex : <input type="text" />) ou bien les paires de balises (Ex : <p>Lorem ipsum ...</p>), il faut toujours les fermer, sinon des comportements inprévus pourraient arriver selon les navigateurs allant de problemes dans le style à des sites qui plantent dans leur chargement.

Note sur la balise <br/> : Elle peut etre écrite <br>, la version avec le / est la version compatible XHTML, je conseille tout de même par homogenité du code et compatibilité de spécifier le / à la fin.


Fonctionnalités avancées et compatibilité

Le dernier point concerne la compatibilité, en effet, certains anciens navigateurs (Exemple : Internet Explorer) ou certains navigateurs récents (Exemple : Safari) n'implémentent pas toutes les fonctionnalités où bien différemment. Le meilleur moyen d'éviter les mauvaises surprises est de verifier sur certains sites comme https://caniuse.com ou https://developer.mozilla.org/ la compatibilité d'une balise HTML ou d'une propriété CSS.


Conclusion

J'espère que cette liste de bonnes pratiques vous aura aidé ou conforté dans certaines idées, il faut garder à l'esprit que ce sont des règles génerales et qu'elles permettent une lisibilité accrue du code à celui qui ne le connait pas mais aussi une plus grande facilité de maintenance de celui-ci.

Merci d'avoir lu ce billet et à la prochaine !