Structure générale d'une page
Attention mise à jour importante de la rubrique "Ranger son code" ! - Haut de page
Eléments obligatoires - Haut de page
Certains éléments doivent être présents sur toutes les pages d'un site Internet. Nous allons voir l'ensemble de ces éléments.
Le type de document - Haut de page
Cela sert à indiquer au navigateur le type de document qu'il doit lire. En l'absence de cette déclaration, le navigateur va utiliser un type par défaut et cela peut entraîner des erreurs d'affichage.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Ce doctype correspond à la grammaire formelle (strict) pour la version 4 du HTML.
Pour chaque version du HTML (et maintenant du XHTML) il existe également une version transitionelle, cette version ne doit pas être utilisée car elle est faite uniquement pour assurer la transition entre 2 versions et qu'elle est beaucoup trop permissive ce qui entraîne de nombreux problèmes d'accessibilité.
Pour en savoir plus lire Toi comprendre moi.
La langue utilisée - Haut de page
<html lang="fr">
ou :
<html>
<meta http-equiv='content-language' content='fr'>
Afin que le navigateur sache quel langage informatique est utilisé et dans quelle langue est rédigé le document.
Cet élément est important car sans celui-ci les logiciels vocaux ou encore les plages braille utilisés par les personnes aveugles ou mal-voyantes ne sauront pas quel dictionnaire utiliser.
Les changements de langue - Haut de page
Si au sein d'une page vous utilisez une autre langue que celle déclarée initialement, vous devez le signaler. C'est important pour ceux qui utilisent des navigateurs vocaux ou en braille. Ces logiciels peuvent ainsi s'adapter et utiliser le bon accent ou le bon jeu de caractère (accents, contraction...)
Après qu'elle lui eut demandé l'heure, il répondit <span lang="en">Sorry, I don't speak French !</span>
Faites de même pour vos liens, pensez à indiquer dans quelle langue est rédigée la page visée.
<a href="http://www.w3.org/" hreflang="en"
title="Le site du W3C, en anglais">http://www.w3.org/</a>
Le jeu de caractères utilisé - Haut de page
Cela sert à définir quel est le jeu de caractère utilisé sur la page.
Nous vous conseillons d'utiliser la définition suivante qui prend en compte l'euro ou d'utiliser l'UTF8 si votre page comporte des parties rédigées dans une langue "exotique".
<meta http-equiv="content-type" content="text/html; charset=iso-8859-15">
Le titre de la page - Haut de page
Chaque page doit être identifiée par un nom unique.
<title>Vérifiez l'accessibilité de vos pages</title>
L'appel de la feuille de style - Haut de page
Afin d'assurer la meilleure compatibilité avec les différents types de navigateurs existants ou à venir, vous devez séparer le contenant du contenu. Vous devez pour cela utiliser une feuille de style externe.
<link rel="stylesheet" href="feuillecss.css" media="screen" title="Feuille CSS principale">
De plus la feuille de style étant commune à plusieurs pages de votre site vous gagnerez beaucoup de temps et de souplesse pour les modifications futures, chaque changement effectué sur la feuille de style étant répercuté sur toutes les pages appelant cette feuille de style.
Les liens d'évitement - Haut de page
Accessibilité - Aller au menu - Aller au contenu...
Ces liens doivent se trouver en premier dans votre code HTML.
Le premier lien "Accessibilité" permet à ceux qui en ont le besoin de trouver immédiatement la page leur donnant des informations importantes pour le confort de leur visite.
Le lien "Aller au contenu" permet à ceux qui utilisent un logiciel qui lit le contenu de la page d'une manière linéaire (plage braille ou lecteur d'écran) de ne pas re-parcourir l'intégralité du menu sur chaque page.
Le lien "Aller au menu" permet d'atteindre directement le menu principal en évitant ce qu'il y a avant.
Si vous avez un moteur de recherche interne sur votre page et que celui-ci ne suit pas immédiatement les liens d'évitement, il peut être judicieux d'ajouter un lien direct vers le formulaire de recherche.
Si vous ne voulez pas que ces liens soient visibles, mettez-les en petite taille et d'une couleur proche de celle du fond (si vous avez un fond uni). Par contre n'utilisez pas de div caché par display:none ou visibility:hidden, il y a un gros risque à ce que ces liens soient aussi cachés aux logiciels lecteurs d'écran.
Ranger son code - Haut de page
Schéma d'une page avec un entête, un menu à gauche, le corps de page et un pied de page
Une fois que vous aurez trouvé le schéma le mieux adapté à votre site, tenez-vous en et reproduisez le sur toutes les pages de votre site.