tag html

Doctype

Le doctype utilisé est le doctype html 5 :

<!DOCTYPE html>

Élement HTML

<!--[if lt IE 7 ]><html lang="fr" class="no-js ie ie6" dir="ltr">
<![endif]--><!--[if IE 7 ]><html lang="fr" class="no-js ie ie7" dir="ltr">
<![endif]--><!--[if IE 8 ]><html lang="fr" class="no-js ie ie8" dir="ltr">
<![endif]--><!--[if IE 9 ]><html lang="fr" class="no-js ie ie9" dir="ltr">
<![endif]--><!--[if (gt IE 9)|!(IE)]><!--><html lang="fr" class="no-js" dir="ltr"><!--<![endif]-->

Ajout de commentaires conditionnel pour ajouter une classe qui permet de cibler les vieux Internet Explorer

Indication de la langue du document lang="fr"

Indication du sens de lecture dir="ltr"

Ajout d'une classe no-js, voir plus loin au chapitre modernizr

Élement HEAD

<head>

Charset

Encoder et servir en UTF8, le déclarer en premier lieux

  <meta charset="UTF-8">

Title et meta-description

Titre de la page et sa description Format : nom de la page -séparateur- nom du site

  <title>nom de la page | nom-du-site.fr</title>
  <meta name="description" content="Description en moins de 160 caractères du contenu de la page">

Meta

S'assurer qu'Internet Explorer utilise le dernier moteur de rendu

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

Responsive

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

Modernizr

modernizr, permet teste la disponibilité dans le navigateur de certaines proprietés

En général on teste la disponibilité de javascript, du svg et des webfont

La classe no-js sur l'élément html est transformée en js si javascript est disponible

Ce script doit être inclut avant les styles

@todo : à adapter selon les projets,

version de scampi doc : http://modernizr.com/download/?-fontface-svg-setclasses

  <script src="assets/js/top/modernizr.js"></script>

favicon & co

source et outils :

favicon.ico doit être inclu à la racine de l'url

Styles

On sert une version spéciale pour les vieux IE

  <!-- Styles -->
  <!--[if lt IE 8]>
    <link href="/assets/css/styles-ie.css" rel="stylesheet">
  <![endif]-->
  <!--[if gte IE 8]><!-->
    <link href="/assets/css/styles.css" rel="stylesheet">
  <!--<![endif]-->

Styles pour le dev

Des fichiers utiles lors du développement des gabarits.

  <!-- pendant le developpement, une feuille de style pour aider au debugage -->
  <link href="/assets/css/debug.css" rel="stylesheet">
  <!-- pendant le developpement, si besoin, les dev peuvent ajouter des css dans ce fichier -->
  <link href="/assets/css/dev_tmp.css" rel="stylesheet">

Javascripts

Librairies js pour assurer la retro-compatbilité avec les vieux IE.

Ces scripts doivent être inclus après les styles.

Si du svg-inline est utilisé on ajoute son support.

  <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
  <!-- respond.js enable media query support -->
  <!--[if lt IE 9]>
      <script src="/assets/js/lib/ie/html5shiv.min.js"></script>
      <script src="/assets/js/lib/ie/respond.min.js"></script>
      <script>html5.addElements('svg');</script>
  <![endif]-->
</head>

Élément body

Directement après l'élément body, on ajoute les informations liées a certaine déficiences du navigateur :

  • absence de javascript
  • vieux IE

Ouverture du body

<body>

  <noscript>
    <p class="js-off">Javascript est desactivé dans votre navigateur.</p>
  </noscript>

  <!--[if lt IE 8]>
    <div class="browsehappy">
      <div class="container">
        <p>Savez-vous que votre navigateur est obsolète ?<p>
        <p> Pour naviguer de la manière la plus satisfaisante sur le Web, nous vous recommandons de procéder à une <a href="http://windows.microsoft.com/fr-fr/internet-explorer/download-ie">mise à jour de votre navigateur</a>.
        <br>Vous pouvez aussi <a href="http://browsehappy.com/">essayer d’autres navigateurs web populaires</a>.</p>
      </div>
    </div>
  <![endif]-->

Liens d'évitement

Les liens d’évitement sont ajoutés juste après, cf le module skip-link

Fermeture du body

Juste avant la fermeture de l'élément body on ajoute les appels vers les scripts.

    <script type="text/javascript" src="/assets/js/scripts.min.js"></script>
  </body>
</html>