Codex

Astuces et codes à emporter.

Templating HTML

Les bonnes pratiques pour un code épuré et respectueux des standards W3C.

Mise en page

La syntaxe de HTML peut être très flexible et les navigateurs essaieront de traiter les erreurs en silence. Pour rendre notre code plus robuste et cohérent, suivez ces règles :

  • Code HTML valide (validator.nu)
  • Attributs et noms de balises en minuscules
  • Toujours citer les valeurs d'attribut, avec des guillemets doubles
  • Ordre des attributs: class, id, puis le reste.
<p class="Form-field">
  <label class="Form-label" for="f-color">
    What is your favourite colour?
  </label>
  <input class="Form-textbox" id="f-color" name="color" required>
  <a class="modalLink" href="/help/276b6de1">
    <img src="question-mark.svg" alt="Help">
  </a>
</p>

Commentaires

Écrivez le moins de commentaires HTML ( <!-- Comment --> ) possible :

  • Ils ne doivent pas contenir d'informations techniques
  • ils ne doivent pas faire référence aux exigences du client

Indentation

  • Utiliser 2 espaces
  • Indenter les éléments de contenu (sauf s'il est court)
<div class="container-fluid">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <p>Un texte...<p>
      </div>
    </div>
  </divp>
</divp>

Document structure

La structure de base d'une page HTML doit avoir :

  • Le doctype HTML5 de référence : <!DOCTYPE html>
  • L'élément racine : <html>
  • Avec 2 éléments enfants : <head>, <body>
  • Ajouter l'attribut lang à l'élément racine
  • Déclarez dans le head, la déclaration d'encodage <meta charset="UTF-8">
  • Déclarez la balise liée au responsive <meta name="viewport" content="mobile-device-width">

Idéalement, la structure de base devrait ressembler à ceci :

<!DOCTYPE html>
<html lang="...">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="mobile-device-width">
    <title>...</title>
  </head>
  <body>
    <nav>
    </nav>

    <header>
    </header>

    <main>
    </main>

    <footer>
    </footer>
  </body>
</html>

Les styles

L'appel des feuilles de styles se fait directement dans le <head>.

  • Limiter les appels aux feuilles de styles car cela nécessite une requête HTTP pour chacune d'elle et bloquera le rendu en attendant de tout charger.
  • Créer une feuille de style app.css qui surcharge les feuilles de styes de mise en forme (appels bootstrap...)
  • Idéalement minifier le code CSS (minifier CSS)
  • Appels de styles en ligne se fait sous la forme : <style>...</style>
  • Commenter pour expliquer pourquoi on a eu recours à des styles en ligne (performances web ou préférences utilisateurs)

Idéalement, la structure de base devrait ressembler à ceci :

<head>
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="/dist/main.css">
  <style>.frameloaded{width:100vh;height:100vh}</style>
</head>

Les appels JS

Les appels js se font toujours en bas de page juste avant la balise </body>. Il est recommandé de faire des appels à des fichiers externes.

  • Limiter le nombre de fichiers JS pour éviter de bloquer le chargement de la page.
  • Idéalement faire une minification des codes JS (minifier JS)
  • Faire des exceptions pour ne charger que les styles nécessaires à chaque page.
    • <script src="/js/script.js"></script> 

<body>
  <-- Content -->
  
  <-- Les scripts inline : execution rapide -->
  <script>document.ready(function(){...});</script>
  
  <-- Appel des scripts externes a executer -->
  <script src="/js/vendor.js"></script>
  <script src="/js/main.js"></script>
  
  <-- Chargement des scripts qui ne dependent pas des precedents -->
  <script async src="/dist/something.js" async></script>
</body>

La sémantique HTML

Utiliser le bon attribut pour chaque élément HTML (Htmlreference).

Bouton ou liens ?

  • Si ça va ailleurs, c'est un élément de type : <a href="url">...</a></li>
  • Le lien est toujours mieux pour l'accessibilité, le référencement, le bookmarking et le partage.
  • S'il exécute une action JS personnalisée, c'est un élément de type : <button>...</button>

Les groupes d'objets

Comme vu précédemment, il faut conserver une présentation sémantique propre au travers des éléments important qui servent à présenter les informations.

La <nav>...</nav> peut bien entendu être avant, après ou dans le header. Les cas sont nombreux.

Le formulaire de recherche

  • Il doit être unique sur chaque page
  • Ajouter le search rôle Aria
<!DOCTYPE html>
<html lang="...">
  <head>...</head>
  <body>
    <nav>...</nav>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </body>
</html>
<form role="search" action="/site-search">
...
</form>

Accessibilité

Etiquettes pour les images

La majorité des images doivent contenir un alt="...". Certains cas exceptionnels feront exception.

Intitulé de liens

  • Les liens doivent contenir un title="...".
  • Seulement si le contexte du lien est déjà présent et explicite, le alt n'est pas obligatoire.

Elements de formulaires

Un label doit toujours être lié à son input.

<a href="..." title="...">
  <img src="..." alt="Nos partenaires">
</a>
<a href="..." aria-label="Commenter">
  <i data-icon="letter"></i>
</a>
<a href="...">
  <img src="..." alt="">
  Nos partenaires
</a>
<label for="user-name">My Name</label>
<input type="text" id="user-name">

Syntaxes obsolètes

Les éléments suivants sont aujourd'hui inutiles ou obsolètes.
Il faut les supprimer du code HTML.

Doctype :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">

à remplacer par :

<!DOCTYPE html>
<html lang="fr">

Les styles

<script type="text/javascript" src="url"></script>
<script type="text/javascript" language="Javascript">...</script>

à remplacer par :

<link rel="stylesheet" href="url">
<style>/* code */</style>

Les commentaires IE

Les commentaires conditionnels ont été supprimés dans IE 10. Ils peuvent être utilisés si vous avez vraiment besoin de cibler IE 8–9, mais pour la plupart des projets, ils ne sont probablement que du code inutile provenant d'un ancien passe-partout.

<!--[if IE 8]><![endif]-->
<!--[if IE 9]<html class="ie9" lang="fr"><![endif]-->
<!--[if gt IE 9]--><html lang="fr"><!--![endif]-->

à remplacer par :

<html lang="fr">