HTML Guideline

Formatting Rules

Programming

Programmez en anglais.

Indentation

Utilisez une indentation de 4 espaces.
N'utilisez pas de tabulations. 

<!-- Recommended -->
<div>
    <p>text</p>
</div>

Case

Tout le code html doit être en miniscule lowercase.
Cela s'applique aux balises HTML, attributs, valeurs d'attributs (excepté les text/CDATA). 

<!-- Not Recommended -->
<DIV CLASS=""></DIV> 

<!-- Recommended -->
<div class=""></div>

Quote

Chaque valeur d'attribut doit être entouré d'une double quote. 

<!-- Not Recommended -->
<div class=my-class></div> 
<div class='my-class'></div>

<!-- Recommended -->
<div class="my-class"></div>

Scaffold

Utilisez une nouvelle ligne pour chaque élément si celui-ci contient un élément enfant. 

<!-- Recommended -->
<div>
    <p></p>
</div>
<ul>
    <li></li>
    <li></li>
</ul>
<table>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

Tags

Toutes les balises sont écrites en lowercase. 

<!-- Not Recommended -->
<DIV></DIV>

<!-- Recommended -->
<div></div>

Toutes les balises doivent être fermées proprement. 

<!-- Not Recommended -->
<li>

<!-- Recommended -->
<li></li>

Les balises auto fermantes (self-closing) doivent avoir un espace avant le slash fermant. 

<!-- Not Recommended -->
<br/>

<!-- Recommended -->
<br />

Attributes

Tous les attributs sont écrits en lowercase.

Les valeurs d'attribut doivent être entourées par une double quote. 

<!-- Not Recommended -->
<div class=my-class></div> 
<div class='my-class'></div>

<!-- Recommended -->
<div class="my-class"></div>

Si la valeur d'attribut doit être interprété par la machine, la valeur doit être en lowercase. 

<!-- Recommended -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<a href="http://example.com/" title="Description Here">Example.com</a>

Id and name attribute

Les valeur de id et de name doivent être en lower camelCase. 

<!-- Not Recommended -->
<div id="IDNAME"></div> 
<div id="IdName"></div> 
<div id="id-name"></div>

<!-- Recommended -->
<div id="idName"></div>

Class attribute

Les noms des classes doivent être en lower spinal-case c'est-à-dire en minuscule séparée par des traits d'union. 

<!-- Not Recommended -->
<div class="CLASSNAME"></div>
<div class="className"></div>
<div class="class_name"></div> 

<!-- Recommended -->
<div class="class-name"></div>

Tags Valid

Les éléments suivant sont valides en HTML4 et en HTML5 : 

<!-- -->, <!DOCTYPE>, <a>, <abbr>, <address>, <area>, <b>, <base>, <bdo>, 
<blockquote>, <body>, <br>, <button>, <caption>, <cite>, <code>, <col>, 
<colgroup>, <dd>, <del>, <div>, <dfn>, <dl>, <dt>, <em>, <fieldset>, <form>, 
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <head>, <hr>, <html>, <i>, <iframe>, <img>, 
<input>, <ins>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <menu>, <meta>, 
<noscript>, <object>, <ol>, <optgroup>, <option>, <p>, <param>, <pre>, <q>, 
<samp>, <script>, <select>, <small>, <span>, <strong>, <style>, <sub>, <sup>, 
<table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <title>, <tr>, <ul>, <var>

Les éléments suivant sont dépréciés en HTML5 : 

<acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, 
<frameset>, <isindex>, <noframes>, <s>, <strike>, <tt>, <u>, <xmp>

Les éléments suivant sont nouveau en HTML5 : 

<article>, <aside>, <audio>, <canvas>, <command>, <datagrid>, <datalist>, 
<datatemplate>, <details>, <dialog>, <embed>, <eventsource>, <figure>, <footer>, 
<header>, <mark>, <meter>, <nav>, <nest>, <output>, <progress>, <ruby>, <rp>, 
<rt>, <rule>, <section>, <source>, <time>, <video>

Style Rules

Separation of Concerns

Séparez strictement la structure (html), le style (css), et le comportement (scripts) dans des fichiers distincts.
Essayez de garder l'intéraction entre les trois au minimum absolu.
C'est un point crucial à respecter pour des raisons de maintenance. 

<!-- Not Recommended -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bad example</title>
</head>
<body>
    <script>
        alert("message");
    </script>
    <div style="color: red; font-weight: bold;">
    </div>
</body>
</html>

<!-- Recommended -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Recommended example</title>
    <link rel="stylesheet" href="site.css">
</head>
<body>
    <div class="red-bold">
    </div>
    
    <script src="//path/script.js"></script>
</body>
</html>

Semantic

Utilisez les éléments HTML appropriés.
Par exemple, utilisez un élément d'entête (h1, h2, ...) pour les en-têtes, l'élément p pour les paragraphes, l'élément a pour les ancres, etc ...
C'est un point crucial pour la réutisabilité ainsi qu'un point important pour l'accessibilité.

Remarque: L'élément table ne doit servir que pour des données tabulaires ! *exception pour le template mailing

<!-- Not Recommended -->
<div>
    <div>header of paragraph</div> 
    <div>Content of paragraph</div>
</div>

<!-- Recommended -->
<article>
    <h2>header of paragraph</h2>
    <p>Content of paragraph</p>
</article>

Load Optimization

Limitez le nombre de chargement et le poids des fichiers ressources dans une page web.
Chargez les fichiers ressources non liés au rendu en fin de code. 

<!-- Not Recommended -->
<!DOCTYPE html>
<html>
    <head>
    ...
        <link rel="stylesheet" href="font.css" />
        <link rel="stylesheet" href="layout.css" />
        <link rel="stylesheet" href="table.css" /> 
        <link rel="stylesheet" href="color.css" />
        <script src="//example.com/path/jquery.js"></script>
        <script src="login.js"></script>
        <script src="grid.js"></script>
        <script src="index.js"></script>
    </head>
    <body>
        ...
        <img src="../images/logo.bmp" alt="logo" />
        ...
    </body>
</html>

<!-- Recommended -->
<!DOCTYPE html>
<html>
    <head>
    ...
        <link rel="stylesheet" href="site.css" />
    </head>
    <body>
        ...
        <img src="../images/logo.jpg" alt="logo" />
        ...
        <script src="//example.com/path/jquery.min.js"></script>
        <script src="site.min.js"></script>
    </body>
</html>

Scaffold Optimization

Evitez les éléments parents superflus. 

<!-- Not Recommended -->
<span class="avatar">
    <img src="//example.com/path/image.jpg">
</span>

<!-- Recommended -->
<img class="avatar" src="//example.com/path/image.jpg">

Comments

Commentez le code lorsque cela est nécessaire.
Utilisez les commentaires pour expliquer le code; lorsque celui-ci est complexe ou lorsque qu'une correction a dû être apportée.
Utilisez les commentaires pour marquer une action a faire; TODO, TOREMOVE, ...
Ajoutez un espace entre le délimiteur de commentaire et le texte du commentaire. 

<!-- Recommended -->
<!-- TODO translate(fr) -->
<div class="error">
    <p> An expected error has been occured.</p>
</div>

Doctype

Utilisez le doctype HTML5 pour toutes les vues. 

<!-- Recommended -->
<!DOCTYPE html>

Character Encoding

Utilisez l'encodage de caractères UTF-8 pour toutes les vues.
Specifiez l'encodage de caractère du document en utilisant l'élément meta <meta charset="utf-8">, qui doit être le tout premier élément enfant du <head>. 

<!-- Recommended -->
<head>
  <meta charset="utf-8">
  <title></title>
  ...
</head>

Language attribute

Définissez une valeur pour l'attribut lang sur le noeud racine du document. 

<!-- Not Recommended -->
<html>

<!-- Recommended -->
<html lang="en">

Embedded Resources

N'explicitez pas le protocol dans l'url pointant vers une ressource (image, multimedia, script, css, ...). 

<!-- Not Recommended -->
<script src="http://www.example.com/path/script.js"></script> 

<!-- Recommended -->
<script src="//www.example.com/path/script.js"></script>

<!-- Not Recommended -->
.example { background: url(http://www.example.com/path/image.jpg); }

<!-- Recommended -->
.example { background: url(//www.example.com/path/image.jpg); }

Type Embedded Resources

N'utilisez pas l'attribut type pour les feuilles de styles (.css) et les scripts javascripts (.js). 

<!-- Not Recommended -->
<link rel="stylesheet" href="//www.example.com/path/styleSheet.css" type="text/css" />

<!-- Recommended -->
<link rel="stylesheet" href="//www.example.com/path/styleSheet.css" />

<!-- Not Recommended -->
<script href="//www.example.com/path/script.js" type="text/javascript"></script>

<!-- Recommended -->
<script href="//www.example.com/path/script.js"></script>

Multimedia Fallback

Pour les objets multimédia (images, vidéos, ...), assurez vous de précisez une alternative d'accès.

  • Pour l'élément image, utilisez l'attribut alernative text.
  • Pour l'élément video et l'élément audio, ajoutez un text de disponibilité. 

<!-- Not Recommended -->
<img src="..." />

<!-- Recommended -->
<img src="..." alt="alternate text" />

<!-- Not Recommended -->
<audio controls>
    <source src="multimedia.mp3" type="audio/mpeg" />
</audio>

<!-- Recommended -->
<audio controls>
    <source src="multimedia.mp3" type="audio/mpeg" />
    Your browser doesn't support the audio embedded feature.
</audio>