Structure des documents HTML

Introduction

La structure des pages HTML a évolué avec les versions du HTML. Au début, les pages étaient bien simples, et au fur et à mesure que le HTML s'est complèté, les pages ont pris une structure certes toujours simple, mais plus subtile.

Ce qui suit va s'intéresser aux dernières recommandations HTML 4.

Point important : depuis le début, les spécifications HTML précisent qu'un navigateur qui ne reconnaît pas une balise doit tout simplement l'ignorer (et non pas afficher un message d'erreur). Ceci assure un minimum de compatibilité entre les versions. Il ne faut donc pas avoir "peur" de rajouter les metas tags et la balise <!DOCTYPE> de début (voir ci-après).

Structure élémentaire

Quelque soit la page HTML 4, la structure du code doit toujours être la même :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
    <HEAD>
        <TITLE>My first HTML document</TITLE>
    </HEAD>
    <BODY>
        <P>Hello world!
    </BODY>
</HTML>

Description

La page HTML classique s'articule autour de 2 parties principales : la première ligne (!!) et le reste du document (limité par les balises <HTML> et </HTML>) qui est lui-même découpé en 2 autres parties très importantes : l'en-tête et le corps de page.

<!DOCTYPE...>

La première ligne (<!DOCTYPE>) dit au navigateur à quelle version de HTML est utilisé dans ce document. Cette version est décrite de manière formelle par des DTD (Document Type Declaration). Cette première ligne ne fait que pointer vers un endroit où on est sur de trouver ces descriptions (en l'occurence, elles se trouvent sur le serveur de la W3C).

Il y a 3 DTDs :

HTML 4.01 Strict DTD : contient tous les éléments HTML purement conformes aux spécifications HTML 4 et qui ne figurent pas dans la Frameset DTD.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional DTD : contient tous les éléments de la Strict DTD plus ceux déclarés caducs. Cette DTD est la plus générale et permet d'utiliser toutes les balises, y compris celles définies dans les anciennes versions de HTML. C'est certainement la DTD la plus simple à utiliser et qui posera le moins de problèmes.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset DTD : contient tous les éléments de la Transitional DTD plus ceux permettant d'utiliser les frames.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Dans tous les cas, cette balise doit être la première. Par défaut, en cas de doute, il vaut mieux utiliser la HTML 4.01 Transitional DTD pour les pages conventionnelles, et la HTML 4.01 Frameset DTD pour les pages décrivant des frames.

Les versions de HTML antérieures à la version 3 n'utilisaient cette première ligne. La page HTML était alors limité à la partie définie par <HTML>...</HTML>. Il est toujours possible d'omettre cette ligne et d'utiliser les balises de HTML 4 (les navigateurs sont transigeants) mais dans ce cas, la page n'est plus conforme aux spécifications de la W3C.

En-tête (<HEAD>)

L'en-tête de la page HTML, située juste après la balise <!DOCTYPE...>, est limitée par les balises <HEAD> et </HEAD>. Cette partie contient principalement ce qu'on appelle des métas informations : ce sont des informations sur les informations contenues plus loin dans la page. On y indique par exemple l'auteur de la page, la date d'écriture, des mots-clé ou une description de la page (utile pour le référencement dans les moteurs de recherche), mais on peut aussi y mettre des directives HTTP qui seront utilisées lors de l'acheminement de la page. Cette partie contient également le titre de la page, et éventuellement d'autres éléments comme les feuilles de style ou du code JavaScript.

Cette partie est en fait une sorte de foure-tout où on place tout ce qui n'est pas directement du contenu à afficher.

La balise <HEAD> comme la balise <HTML> n'acceptent pas d'attributs.

Corps de page (<BODY>)

Cette partie est limitée par les balises <BODY> et </BODY>. Elle contient le contenu de la page HTML, c'est-à-dir ce qui doit être affiché par le navigateur. A quelques exceptions (balises <HEAD>, <HTML> et <META> entre autres), c'est dans cette partie que l'on utilise les balises HTML pour formater le document.

On peut toutefois y définir du code JavaScript mais ce n'est pas la meilleure place pour le faire (certains navigateurs peuvent ne pas executer correctement le code).

Cette balise, dans les versions précédentes utilisait un certain nombres d'attributs (background, text...). Ces attributs ont été déclarés caducs et ont été remplacés par les feuilles de style.

Rappel des élément vitaux

nom	description
<!DOCTYPE...>	dit quelle version de HTML est utilisée dans la page
<HTML> ... </HTML>	limite le contenu décrit en HTML
<HEAD> ... </HEAD>	limite l'en-tête de la page (pour les métas tags, le titre...)
<BODY> ... </BODY>	limite le corps de page. Contient toute la partie information de la page.

format imprimable