Code HTML de base

Structure de base d'une page HTML valide selon le W3C et les critères d'accessibilité numérique.

Présentation générale d’une page HTML

Une page web HTML comporte plusieurs éléments :

Un doctype pour indiquer qu’il s’agit d’une page HTML 5 ; Le doctype HTML 5 s’écrit <!DOCTYPE html> ;
le doctype sera suivi par l’élément html. La balise ouvrante html aura un attribut de langue pour indiquer la langue principale du document. L’indication de la langue principale du document est au format ISO 639-1 (exemple : <html lang="fr">) ;
Entre les balises html, on trouve :
- L’élément HTML décrivant l’entête du document, balisé par <head>...</head>. L’entête contient des meta informations comme le titre de la page (qui apparaitra dans l’onglet du navigateur) et diverses déclarations comme l’encodage de la page, les liens vers des feuilles de style…
- L’élément HTML décrivant le corps du document, balisé par <body>...</body>. C’est cette partie du code qui sera affichée dans le navigateur. Le corps du document contient des balises sémantiques qui permettent de structurer la page.

Le code HTML minimum se présentera donc comme suit (pour une page écrite en français):

<!DOCTYPE html>
<html lang="fr">
    <head>
        [...]
    </head>
    <body>
       [...]
    </body>
</html>

À propos de l’attribut `lang`

L’attribut lang permet d’indiquer la langue principale du document. Il est aussi utilisé par :

Les logiciels de synthèse vocale pour choisir la prononciation et l’accent avec lesquels vocaliser la page ;
Les moteurs de recherche pour afficher les résultats de recherche selon les préférences linguistiques de l’utilisateur.

À l’intérieur d’un document, l’attribut lang permet aussi d’afficher la portion de texte ainsi identifiée avec un style spécifique. Exemple une portion de texte écrite en japonais (lang="jp") pourra recourir via CSS à une police de caractère spécifique.

attention

Dans le cas d'un site multilangue, il faudra bien veiller à mettre à jour le code ISO 639-1 de la langue du document :
<html lang="fr">, pour un site en français ;
<html lang="en">, pour un site en anglais...

Contenu de l’entête HTML (élément `head`)

Déclaration de l’encodage du document (élément `<meta charset`)

La norme UTF-8 sera privilégiée afin d’éviter les problèmes de caractères accentués. La déclaration de fait de cette manière :
<meta charset="UTF-8">

Titre de page (élément `title`)

Le titre de page doit :

Donner a minima le nom de la page en cours et le nom du site
S’afficher de manière cohérente sur l’ensemble des pages
Afficher les informations du plus précis au plus général (nom de la page, nom de la rubrique pour finir par le nom du site)
S’actualiser à chaque modification de page ou de contexte (on entend par changement de contexte lorsque la page affiche un message d’erreur, le résultat d’un système de pagination…).

Exemples

<title>Rubrique - Chapitre - Nom du site</title>

<title>Page en cours - Rubrique - Chapitre - Nom du site</title>

<title>Erreur - Rubrique - Chapitre - Nom du site</title>

<title>Confirmation - Nous Contacter - Nom du site</title>

<title>Résultat de la recherche (page 1/3) - Rechercher dans le site - Nom du site</title>

<title>Blog (page 2/10) - Nom du site</title>

Déclaration pour gérer l’affichage adaptatif du site (élément `<meta name="viewport"`)

La déclaration d’affichage adaptatif permet de concevoir un site “responsive” qui s’adaptera au différentes configurations d’écran et périphériques de sorties prévus en CSS.
On insérera donc la balise meta name="viewport" avec l’attribut content pour lequel on déclarera les propriétés :

height et/ou width : taille de l’écran on déclarera respectivement device-height ou device-width comme valeur de référence.
initial-scale : niveau de zoom initial la valeur “1” correspond à un zoom de départ de 100% valeur à privilégier.
user-scalable : zoomer dans la page (valeur “yes” par défaut il n’est donc pas nécessaire de le préciser et c’est cette valeur qui sera choisie) ou non (no).

Exemple

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

Liens vers les feuilles de style externes

C’est dans cette partie du document HTML, qu’on posera les liens vers les feuilles de style externes du site qui permettront d’homogénéiser la présentation des différentes pages.

Règles d’accessibilité pour les feuilles de style

Les règles d’accessibilité sont les suivantes :

Les feuilles de styles CSS sont utilisées pour contrôler la présentation de l’information.
L’information doit rester compréhensible quand les feuilles de style CSS sont désactivées :
Pour cela, utiliser l’extension “Web Developper” préalablement ajoutée à votre navigateur et choisissez “Disabled All Styles” dans l’onglet “styles”.
Les déclarations CSS de couleurs de fond d’élément et de police sont bien déclarées : chaque déclaration CSS de couleurs de police (color) ou d’un élément susceptible de contenir du texte est accompagnée d’une déclaration de couleur de fond (background, background-color) de l’élément qui le reçoit. Autrement dit, une bonne pratique consiste à toujours déclarer les valeurs des deux propriétés color et background-color dans une même déclaration.

Bonus : bonne pratique d’écoconception

Il existe plusieurs bonnes pratiques d’écoconception web relatives aux styles :

Proposer une feuille de style spécifique pour l’impression. Le plus souvent, cette feuille de style est nommée print.css. L’idée est que, lorsque l’utilisateur voudra imprimer cette page, les éléments non pertinents (la plupart du temps, le bandeau général du site, le menu de navigation…) ne seront pas imprimés.
Développer son site en version « Mobile first ». Il s’agit de prévoir la mise en forme de son site pour un affichage sur smartphone, puis d’adapter la feuille de style pour un affichage sur des supports plus grands (tablettes, écrans d’ordinateur).
Minifier les feuilles de style. La minification consiste à supprimer les espaces et les sauts de ligne dans la feuille de style. Par convention, la feuille de style aura alors l’extension .min.css.

Exemple

<link href="/css/print.min.css" rel="stylesheet" media="print">

Contenu du corps du document HTML (élément `body`)

Lien d’accès rapide

Une règle obligatoire d’accessibilité numérique consiste à proposer au minimum un lien d’accès rapide au contenu. Ce lien doit être le premier élément atteignable au clavier.

Dan le cas où le lien d’accès rapide est caché visuellement, une bonne pratique consiste à le proposer immédiatement après la balise <body>.
Pour plus d’informations, voir la rubrique Coder accessible - Navigation - Lien d’accès rapide.

Région d’entête principale (élément `header` avec le role aria `banner`)

La région d’entête principale sera balisée avec : <header role="banner">...</header>.
Si la balise <header> peut être utilisée plusieurs fois dans une page web, la balise avec le role="banner" ne doit être employée qu’une seule fois. Cette région d’entête principale propose la pluplart du temps le logo du site, le menu de navigation principale et parfois la région de recherche dans tout le site.

Région de navigation principale (élément `nav` avec le role aria `navigation`)

Le menu de navigation principal permettatn de naviguer de pages en pages dans le site doit être balisés avec <nav role="navigation">...</nav>.

remarque

La balise <nav role="navigation"> sert uniquement pour proposer des liens internes au site : menu principal ou secondaire, fil d'ariane, pagination, processus par étape. En aucun cas, donc, elle ne sera utilisé pour présenter une liste de liens pointant sur d'autres sites.
De même, les liens proposés dans la région footer role="contentinfo ne seront pas encapsulés dans un élément nav role="navigation".

Région de contenu principal (élément `main` avec le role aria `main`)

La région de contenu principal des pages sera balisée avec <main role="main">...</main>.
Si la balise <main> peut être utilisée plusieurs fois dans une page web, la balise avec le role="main" ne doit être employée qu’une seule fois.

Région de pied de page principal (élément `footer` avec le role aria `contentinfo`)

La région de pied de page principal des pages sera balisée avec <footer role="contentinfo">...</footer>.
Si la balise <footer> peut être utilisée plusieurs fois dans une page web, la balise avec le role="contentinfo" ne doit être employée qu’une seule fois.
La plupart du temps, cette région recevra les informations relatives au site (copyright, Mentions légales, Crédits, Condition Générales d’Utilisation, Accessibilité, version de l’application…).

attention

Dans le cas où une liste de liens est proposé dans le footer, ceux-ci ne seront pas encadrés par l'élément nav.

En résumé : structure de base d’une page HTML

Une page web aura une structure HTML similaire à celle indiquée ci-après :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title>Titre de la page - Nom du site</title>
        <link href="/css/print.min.css" rel="stylesheet" media="print">
        <link href="/css/monStyle.min.css" rel="stylesheet" media="screen">
        [...]
    </head>
    <body>
	<nav role="navigation" aria-label="Accès rapide">[Lien(s) d'accès rapide - voir la rubrique « Navigation - Lien d'accès rapide »]</nav>
    <header role="banner"> 
    [La bannière d'entête : logo, titre du site...]
    <nav role="navigation" id="navigation" aria-label="navigation principale">[Le menu de navigation principale du site - voir la rubrique « Navigation - Menu de navigation »]</nav>
    </header>
     
    <main role="main" id="contenu">
    [Le corps de la page]
    </main>

    <footer role="contentinfo" id="piedDePage">
    [Le pied de page]
    </footer>
  
    </body>
</html>

Règles d’accessibilité à vérifier sur la présentation des pages

La présentation des pages (menu de navigation, contenu) doit rester cohérente d’une page à l’autre.
Les pages sont bien structurées
- La zone d’en-tête de la page est structurée via une balise header role="banner" ;
- Les zones de navigation principale et secondaire sont structurées via une balise nav role="navigation" ;
- La balise nav est réservée à la structuration des zones de navigation principales et secondaires ;
- La zone de contenu principal est structurée via une balise main role="main", visible et unique ;
- La zone de pied de page est structurée via une balise footer role="contentinfo".
Les contenus sont visibles sans avoir recours à un défilement horizontal pour une fenêtre ayant une largeur de 320px ou à un défilement vertical pour une fenêtre ayant une hauteur de 256px.
Les contenus cachés (via l’attribut hidden ou l’attribut aria aria-hidden="true" ) sont bien ignorés par les logiciels de synthèse vocale.

Code HTML de base

Présentation générale d’une page HTML

À propos de l’attribut lang

Contenu de l’entête HTML (élément head)

Déclaration de l’encodage du document (élément <meta charset)

Titre de page (élément title)

Déclaration pour gérer l’affichage adaptatif du site (élément <meta name="viewport")