Structure d'une page HTML 5

Quels sont les éléments indispensables à une page HTML dans la spécification de la version 5?

La structure de base est celle-ci:

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="description" content="">
  </head>
<body>
</body>
</html>

Ce qui change avec HTML 5? Le format est nettement simplifié par rapport aux standards précédents avec notamment un doctype minimaliste.

Le DOCTYPE

Le type de document a été introduit pour marquer la différence entre les anciens navigateurs qui suivaient le format usuel dans les années 90 et les navigateurs plus récents qui suivent la spécification HTML 3 puis 4 et 5.

Sur la plupart des navigateurs, un DOCTYPE absent induit une compatibilité avec les anciens formats.

Le langage et l'attribut lang

L'attribut lang ne s'adresse pas aux navigateurs, mais plutôt aux outils de traitement automatique qui doivent comprendre les contenus selon leur langue.
Et parmi ces outils, on n'inclut pas les moteurs de recherche qui ignorent cet attribut et préfèrent se baser sur le contenu pour juger de la langue.

On peut donc le considérer comme optionnel. Même si l'attribut lang s'utilise généralement pour le document entier, il peut être assigné à un élément particulier, par exemple:

<p lang="en">English quotes</p>

Head

La balise contient plusieurs types d'élements:

L'encodage

La balise la plus commune a la forme suivante:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Elle définit le type de contenu, son format généralement text/html et son encodage, généralement le charset utf8.
Cette balise s'adresse au serveur qui informe le navigateur. On peut l'omettre si le serveur est configuré, par exemple dans .htaccess, pour attribuer ce format aux pages d'une extension donnée, comme .html.

Cette balise doit aussi être la première dans le section HEAD, car le serveur va traiter ce qui précède comme du text ASCII sans format précis, lequel format n'étant connu qu'une fois le balise analysée.

Ce format de base suffit généralement à toutes les situations. Il existe d'autres charsets, comme le format iso-8859-1, mais ils n'apportent rien de plus dans le monde latin. Pour les pages en chinois ou japonais, un autre codage est nécessaire.

Il faut prendre garde cependant si on inclut dynamiquement du contenu qu'il soit encodé selon le charset indiqué.

HTML 5 peut simplifier l'encodage:

<meta charset="utf-8">

Cela a été en fait implémenté antérieurement à HTML 5 mais ne faisait pas auparavant partie de la spécification. Les guillements sont inutiles.

Le format HTML est supposé par défaut, aussi n'a t-on besoin que de préciser le charset. Il reste a vérifier que le code de la page est bien dans ce format, qui n'est pas forcément automatique avec tous les éditeurs HTML.

Les liens

De nombreux liens peuvent être spécifiés dans le header. Certains sont indispensables au navigateur, comme le lien sur une feuille de style ou le flux RSS, ou l'icône du site.

D'autres sont optionnels comme la valeur pre-fetch qui permet de charger une page en tâche de fond, et accélérer l'affichage.

Exemples de liens

Favicon

<link rel="icon" type="image/gif" href="/favicon.gif" />

Feuille de style

<link rel="stylesheet"  type="text/css" href="style.css">

Flux RSS ou Atom 

<link rel="alternate" type="application/rss+xml" href="" title="">

D'autres attributs communs sont nofollow qui indique aux moteurs de recherche de ne pas suivre les liens de la page.

La structure du contenu

En HTML 4 il n'y a pas de balises de structuration spécialisées, le contenu est structuré avec des <div>, <span> et autres conteneurs.
HTML 5 introduit plusieurs balises pour aider à représenter la structure usuelle des documents.

<header>
Contient une introduction pour une partie de la page ou la page entière.
<footer>
Contient des informations qui se placent à la fin d'une section. On peut le placer en bas d'une section ou de la page, mais aussi n'importe où dans la section.
Par exemple cela contient un lien sur l'index, qui l'on peut placer sous le titre.
<section>
Les sections délimitent les parties du contenu. Il appartient alors au webmaster de leur associer une feuille de style ou de les utiliser dynamiquement dans des scripts.
Très basiquement, on peut encadrer une section par une bordure, ou la séparer de ce qui précède par un espace.
<hgroup>
Représente l'en-tête d'une section. La balise <header> peut contenir au début une balise <hgroup>.
<nav>
Ce conteneur est destiné à enclôre un groupe de liens.
<article>
Désigne un contenu typique que l'on peut retrouver sur différentes pages, ou même différents sites. Cela peut être un billet de forum, un article de presse et cela s'adresse à des outils qui pourront les extraire plus facilement (en les séparant du contenu inutile tel que menus de navigation).
<aside>
Représente un contenu annexe au contenu proprement dit et peut définir une barre latérale.
<address>
Contient des information de contact, par exemple le nom de l'auteur.
<mark>
Permet de marquer une partie d'un texte, le mettre en relief, comme les anciennes balises <strong> mais en plus général.

Il existe de nombreuses autres balises sémantiques, dont on trouvera la description dans les documents en référence.

Voir aussi

Références

© 2010-2022 Xul.fr