tag html

Doctype --------- Le doctype utilisé est le doctype html 5 : ```html ``` Élement HTML -------------- ``` html ``` - 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 ------------- ```html ``` ### Charset Jeu de caractères UTF-8, à déclarer en premier lieu : ```html ``` ### Title La balise title du head est composée de deux parties `Nom de la page -séparateur- Nom du site` : ```html Nom de la page | Nom du site ``` ### Metas La description, brève, concerne le contenu de la page et non le site tout entier : ```html ``` On s'assure qu'Internet Explorer utilise le dernier moteur de rendu : ```html ``` Responsive : ```html ``` ### 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é](http://modernizr.com/download/). La version [livrée avec Scampi et Scampi-Twig](http://modernizr.com/download/?-fontface-svg-setclasses) 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. ```html ``` ### favicon & co source et outils : - http://favicon.il.ly/ - http://realfavicongenerator.net/ - https://github.com/audreyr/favicon-cheat-sheet 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 : ```html ``` (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. ```html ``` ``` html ``` É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 : ```html ``` 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. ```html ```