tag html

Doctype

Le doctype utilisé est le doctype html 5 :

<!DOCTYPE html>

Élement HTML

<html lang="fr" class="no-js ie ie6" dir="ltr">
  • Indication de la langue du document lang="fr"
  • Indication du sens de lecture dir="ltr"
  • Ajout d'une classe no-js, qui sera dynamiquement modifiée si besoin (voir plus loin au chapitre modernizr).

Élément HEAD

<head>

Charset

Jeu de caractères UTF-8, à déclarer en premier lieu :

  <meta charset="UTF-8">

Title

La balise title du head est composée de deux parties Nom de la page -séparateur- Nom du site :

  <title>Nom de la page | Nom du site</title>

Metas

La description, brève, concerne le contenu de la page et non le site tout entier :

  <meta name="description" content="Description en moins de 160 caractères du contenu de la page">

On s'assure 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, teste la disponibilité dans le navigateur de certaines proprietés. Ce script doit être importé avant les styles. Il est configurable sur le site qui lui est dédié. La version livrée avec Scampi et Scampi-Twig teste la disponibilité de javascript, du svg et des fontes web.

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

  <script src="assets/scripts/vendors/modernizr.js"></script>

favicon & co

source et outils :

Un fichier favicon.ico doit être placé à la racine de l'url. Les autres formats peuvent être rangés dans les assets puis importés dans le head :

<link rel="icon" sizes="16x16 32x32 48x48 64x64" href="assets/favicon/favicon.ico"/>
<!--[if IE]>
<link rel="shortcut icon" href="favicon.ico"/>
<![endif]-->
<!-- Optional: Android & iPhone-->
<link rel="icon apple-touch-icon-precomposed" href="assets/favicon/favicon-152.png"/>
<!-- Optional: IE10 Tile.-->
<meta name="msapplication-TileColor" content="#FFFFFF"/>
<meta name="msapplication-TileImage" content="assets/favicon/favicon-144.png"/>
<!-- Optional: ipads, androids, iphones, ...-->
<link rel="apple-touch-icon" sizes="152x152" href="assets/favicon/favicon-152.png"/>
<link rel="apple-touch-icon" sizes="144x144" href="assets/favicon/favicon-144.png"/>
<link rel="apple-touch-icon" sizes="120x120" href="assets/favicon/favicon-120.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="assets/favicon/favicon-114.png"/>
<link rel="apple-touch-icon" sizes="72x72" href="assets/favicon/favicon-72.png"/>
<link rel="apple-touch-icon" href="assets/favicon/favicon-57.png"/>

(Cf. le module fragment templates/inc/favicon.twig de Scampi-Twig.)

Scripts javascript

Sauf cas particulier (modernizr par exemple), on importe les scripts en bas de page, juste avant la fermeture du body.

Styles

On n'oublie pas d'importer les styles dans le head, quelque part après le script modernizr.

    <link href="/assets/css/styles.css" rel="stylesheet">
</head>

Élément body

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

  • absence de javascript
  • versions obsolètes d'Internet Explorer

Ouverture du body

Après l'ouverture du body on commence par les messages d'avertissement adaptés aux cas de figure détectés :

<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]-->

Le message d'avertissement pour les anciennes versions d'internet explorer existe sous forme de module ("Browsehappy") Scampi.

Liens d'évitement

Les liens d’évitement sont ajoutés juste après. Ils doivent offrir un accès au contenu principal, au menu, au bloc de recherche générale s'il existe.

Une bonne pratique est de les laisser toujours visibles. Si ça n'est pas possible on prendra soin au moins de les faire apparaître à la tabulation clavier (cf. le module skip-link de Scampi).

Fermeture du body

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

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