La version française de cette traduction est :
http://www.la-grange.net/w3c/html4.01/
Traducteur : J.J.Solari dans le cadre de l'effort de la liste de discussion w3c-translators.fr@w3.org
La version française peut contenir des erreurs. La version anglaise de cette note est l'unique version
normative. Version originale : http://www.w3.org/TR/1999/REC-html401-19991224
Sommaire
Un document HTML 4 se compose de trois parties :
Les blancs (les espaces, les sauts de ligne, les tabulations et les commentaires) peuvent survenir avant ou après chaque section. Les sections 2 et 3 ci-dessus devraient être encloses par l'élément HTML.
Voici un exemple de document HTML simple :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Mon premier document HTML</TITLE>
</HEAD>
<BODY>
<P>Bonjour tout le monde !
</BODY>
</HTML>
Un document HTML valide déclare la version HTML qui est utilisée dans le document. La déclaration de type de document indique la définition de type de document (DTD) en vigueur pour le document (voir [ISO8879]).
HTML 4.01 spécifie trois DTD et les auteurs doivent donc inclure l'une des déclarations de type de document suivantes dans leurs documents. Les DTD varient selon les éléments qui y sont gérés.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
L'URI, dans chacune des déclarations de type de document, permet à l'agent utilisateur de télécharger le DTD et tous les jeux d'entités qui seraient nécessaires. Les URI (relatifs) suivants se rapportent aux DTD et aux jeux d'entités de HTML 4 :
On peut spécifier la corrélation entre les identifiants publics et les fichiers de DTD, en utilisant un fichier catalogue obéissant au format recommandé par l'organisme Oasis Open Consortium (voir [OASISOPEN]). Un exemple de fichier catalogue pour HTML 4.01 est inclus au début de la section sur les informations de référence SGML pour HTML. Les deux dernières lettres de la déclaration indiquent la langue du DTD. Pour HTML, c'est toujours l'anglais (« EN »).
Remarque : Pour la version HTML 4.01 du 24 décembre, le groupe de travail HTML a arrêté la politique suivante :
Cela signifie que, dans la déclaration du type de document, les auteurs peuvent utiliser en toute sécurité un identifiant de système qui se rapporte à la dernière version d'un DTD HTML 4. Les auteurs peuvent aussi choisir d'utiliser un identifiant de système qui se rapporte à une version spécifique (datée) d'un DTD HTML 4, quand une validation par rapport à ce DTD particulier est requise. Le W3C prendra toutes les dispositions nécessaires pour que les documents d'archives soit indéfiniment disponibles à leur adresse et dans leur forme originales.
<!ENTITY % html.content "HEAD, BODY"> <!ELEMENT HTML O O (%html.content;) -- élément racine du document --> <!ATTLIST HTML %i18n; -- lang, dir -- >
Balise ouvrante : optionnelle, balise fermante : optionnelle
Définition des attributs
Attributs définis ailleurs
Suivant en cela la déclaration de type de document, le restant du document HTML est contenu dans l'élément HTML. Ainsi, un document HTML typique a la structure suivante :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> ...L'en-tête, le corps, etc. viennent ici... </HTML>
<!-- %head.misc; définie précédemment comme "SCRIPT|STYLE|META|LINK|OBJECT" --> <!ENTITY % head.content "TITLE & BASE?"> <!ELEMENT HEAD O O (%head.content;) +(%head.misc;) -- document head --> <!ATTLIST HEAD %i18n; -- lang, dir -- profile %URI; #IMPLIED -- dictonnaire de métainformations nommé -- >
Balise ouvrante : optionnelle, balise fermante : optionnelle
Définition des attributs
Attributs définis ailleurs
L'élément HEAD contient des informations sur le document courant, tels que son titre, des mots-clés que les moteurs de recherche peuvent exploiter et d'autres données qui ne sont pas considérées comme faisant partie du contenu du document. Les agents utilisateurs ne restituent généralement pas les éléléments qui apparaissent comme contenu de l'élément HEAD. Il peuvent cependant rendre les informations contenues par l'élément HEAD disponibles aux utilisateurs au moyen d'autres mécanismes.
<!-- L'élément TITLE n'est pas considéré faire partie du flux de texte.
Il devrait, par exemple, être affiché comme titre de la page ou
de la fenêtre. Il faut exactement un seul titre par document.
-->
<!ELEMENT TITLE - - (#PCDATA) -(%head.misc;) -- titre du document -->
<!ATTLIST TITLE %i18n>
Balise ouvrante : obligatoire, balise fermante : obligatoire
Attributs définis ailleurs
Chaque document HTML doit avoir un élément TITLE dans la section HEAD.
Les auteurs devraient utiliser l'élément TITLE pour identifier le contenu d'un document. Étant donné que les utilisateurs consultent souvent les documents hors de leur contexte, les auteurs devraient fournir des titres en fonction du contexte. Ainsi, au lieu d'un titre comme « Introduction », qui n'apporte aucune information sur le contexte, l'auteur devrait plutôt produire un titre tel que « Introduction à l'apiculture au Moyen-Âge ».
Pour des questions d'accessibilité, les agents utilisateurs doivent toujours rendre le contenu de l'élément TITLE disponible aux utilisateurs (y compris les éléments TITLE qui apparaissent dans les cadres). Les mécanismes pour ce faire dépendent de l'agent utilisateur (par exemple, une légende, un titre sonore).
Les titres peuvent contenir des entités de caractères (pour les caractères accentués, les caractères spéciaux, etc.), mais aucun balisage (y compris les commentaires). Voici un exemple de titre de document :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>Une étude sur la dynamique des populations</TITLE> ... autres éléments d'en-tête... </HEAD> <BODY> ... corps du document... </BODY> </HTML>
Définition des attributs
À a différence de l'élément TITLE, qui produit une information concernant un document entier et qui ne peut apparaître qu'une fois, l'attribut title peut annoter un nombre quelconque d'éléments. Veuillez consulter la définition de l'élément pour vérifier si celui-ci gère cet attribut.
Les agents utilisateurs peuvent restituer les valeurs des attributs title de diverses façons. Les navigateurs visuels peuvent, par exemple, afficher leur valeur sous la forme d'une « infobulle » [ndt. tool tip] (un bref message qui apparaît quand le dispositif de pointage reste au-dessus d'un objet). Dans le même ordre d'idée, les agents utilisateurs sonores peuvent vocaliser les informations de titre. Par exemple, le placement de l'attribut sur un lien permet aux agents utilisateurs (visuels et non-visuels) d'indiquer à l'utilisateur la nature de la ressource reliée :
...un texte... Voici une photo <A href="http://quelquepart.com/trucsuper.gif" title="Moi faisant de la plongée"> de moi faisant de la plongée l'été dernier </A> ...un autre texte...
L'attribut title joue un rôle supplémentaire quand on l'utilise avec l'élément LINK pour désigner une feuille de style externe. Veuillez consulter la section sur les liens et les feuilles de style pour les détails.
Remarque : Pour améliorer la qualité de la synthèse de la parole dans les cas mal gérés par les techniques standards, les futures versions de HTML pourront rajouter un attribut pour le codage d'informations phonémiques et prosodiques.
Remarque : Le cadre de description des ressources (RDF) du W3C (voir [RDF10]) est devenu une recommandation en février 1999. RDF permet aux auteurs de définir des métadonnées, lisibles par une machine, sur les documents HTML et les autres ressources accessibles sur un réseau.
HTML autorise les auteurs à spécifier des métadonnées (des informations sur le document plutôt que sur le contenu du document) de diverses manières.
Par exemple, pour spécifier l'auteur du document, on peut utiliser l'élément META comme suit :
<META name="Author" content="Dave Raggett">
L'élément META définit une propriété (ici "Author") et lui assigne une valeur (ici "Dave Raggett").
Cette spécification ne définit aucun ensemble de propriétés de métadonnées légales. La signification d'une propriété et le jeu des valeurs légales pour celle-ci devraient être définis dans un lexique de référence, appelé profil. Par exemple, un profil conçu pour aider les moteurs de recherche à indexer les documents pourrait définir des propriétés telles que "author", "copyright", "keywords", etc.
La spécification des métadonnées implique en général deux étapes :
Remarquez, comme le profil est défini sur l'élément HEAD, que celui-ci s'applique à tous les éléments META et LINK dans l'en-tête du document.
Les agents utilisateurs ne sont pas tenus de gérer les mécanismes de métadonnées. Pour ceux qui le ferait, cette spécification ne définit pas la manière dont ces métadonnées devraient être interprétées.
<!ELEMENT META - O EMPTY -- méta-information générique --> <!ATTLIST META %i18n; -- lang, dir, à utiliser avec le contenu -- http-equiv NAME #IMPLIED -- nom de l'en-tête de réponse HTTP -- name NAME #IMPLIED -- nom de la méta-information -- content CDATA #REQUIRED -- information associée -- scheme CDATA #IMPLIED -- selection de la forme du contenu -- >
Balise ouvrante : obligatoire, balise fermante : interdite
Définition des attributs
Pour les attributs suivants, les valeurs admises et leur interpétation dépendent du profil donné :
Attributs définis ailleurs
On peut utiliser l'élément META pour identifier les propriétés d'un document (par exemple, l'auteur, la date d'expiration, une liste de mots-clés, etc.) et assigner des valeurs à ces propriétés. Cette spécification ne définit aucun jeu de propriétés normatif.
Chaque élément META spécifie un couple propriété/valeur. L'attribut name identifie la propriété et l'attribut content en spécifie la valeur.
Par exemple, la déclaration suivante fixe une valeur à la propriété « Auteur » :
<META name="Auteur" content="Dave Raggett">
On peut utiliser l'attribut lang avec l'élément META pour spécifier la langue de la valeur de l'attribut content. Ceci permet aux synthétiseurs de parole d'appliquer des règles de prononciation en fonction de la langue.
Dans cet exemple, le nom de l'auteur est annoncé comme étant en français :
<META name="Auteur" lang="fr" content="Arnaud Le Hors">
Remarque : L'élément META représente un mécanisme générique pour spécifier des métadonnées. Cependant, quelques éléments et attributs HTML, qui gèrent déjà certains bouts de métadonnées, peuvent être utilisés par les auteurs au lieu de l'élément META pour spécifier ces bouts : les éléments TITLE, ADDRESS, INS et DEL ainsi que les attributs title et cite.
Remarque : Quand une propriété spécifiée par un élément META prend comme valeur un URI, certains auteurs préfèrent spécifier les métadonnés au travers de l'élément LINK. Ainsi, la déclaration de métadonnées suivante :
<META name="DC.identifier"
content="http://www.ietf.org/rfc/rfc1866.txt">
celle-ci pourrait aussi s'écrire :
<LINK rel="DC.identifier"
type="text/plain"
href="http://www.ietf.org/rfc/rfc1866.txt">
L'attribut http-equiv, qui peut s'utiliser à la place de l'attribut name, a un sens particulier quand les documents sont ramenés via le protocole de transfert hypertexte HTTP. Les serveurs HTTP peuvent utiliser le nom de propriété spécifié par l'attribut http-equiv pour créer un en-tête de style [RFC822] dans la réponse HTTP. Veuillez consulter la spécification HTTP ([RFC2616]) pour des informations détaillées sur les en-têtes HTTP valides.
L'exemple suivant de déclaration META :
<META http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT">
celle-ci donnera l'en-tête HTTP :
Expires: Tue, 20 Aug 1996 14:25:27 GMT
Cette faculté peut être utilisée par les caches pour déterminer quand aller chercher une nouvelle copie du document en question.
Remarque : Certains agents utilisateurs peuvent utiliser l'élément META pour rafraîchir la page courante après un nombre de secondes spécifié, avec une option de remplacement de la page par un URI différent. Les auteurs ne devraient pas employer cette technique pour orienter les utilisateurs vers une autre page, car celle-ci peut rendre cette page inaccessible pour certains utilisateurs. La redirection de page automatique devrait avoir lieu en utilisant plutôt des redirections côté serveur.
Une utilisation courante de l'élément META consiste à spécifier des mots-clés qu'un moteur de recherche peut utiliser pour améliorer la pertinence du résultat d'une recherche. Quand des éléments META fournissent des informations en plusieurs langues sur un document, les moteurs de recherche peuvent opérer un filtrage, en fonction de l'attribut lang, pour afficher le résultat de la recherche selon les préférences de langue de l'utilisateur. Par exemple :
<!-- Pour les américanophones -->
<META name="keywords" lang="en-us"
content="vacation, Greece, sunshine">
<!-- Pour les anglophones-->
<META name="keywords" lang="en"
content="holiday, Greece, sunshine">
<!-- Pour les francophones -->
<META name="keywords" lang="fr"
content="vacances, Grèce, soleil">
On peut également accroître l'efficacité des moteurs de recherche en utilisant l'élément LINK pour spécifier des liens vers les traductions du document en d'autres langues, des liens vers les versions du document pour d'autres médias (par exemple, un fichier PDF) et, si le document fait partie d'une collection de documents, des liens vers le point de départ adéquat à partir duquel se déplacer dans la collection.
On donne d'autres renseignements dans la section expliquant comment aider les moteurs de recherche à indexer son site Web.
Cet exemple montre comment on peut utiliser une déclaration META pour inclure un label PICS 1.1 :
<HEAD>
<META http-equiv="PICS-Label" content='
(PICS-1.1 "http://www.gcf.org/v2.5"
labels on "1994.11.05T08:15-0500"
until "1995.12.31T23:59-0000"
for "http://w3.org/PICS/Overview.html"
ratings (suds 0.5 density 0 color/hue 1))
'>
<TITLE>... document title ...</TITLE>
</HEAD>
On peut utiliser l'élément META pour spécifier les informations par défaut sur un document dans les cas suivants :
L'exemple suivant spécifie l'encodage de caractères du document comme étant "ISO-8859-5" :
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-5">
Cet exemple se réfère à un profil hypothétique qui définit des propriétés utiles pour l'indexation des documents. Les propriétés, définies par ce profil (qui comprend les propriétés "auteur", "copyright", "mots-cles" et "date"), ont toutes leurs valeurs fixées par les déclarations META suivantes.
<HEAD profile="http://www.bidule.com/profils/base"> <TITLE>Comment remplir la page de garde d'un memorandum</TITLE> <META name="auteur" content="Jean BON"> <META name="copyright" content="© 1997 Société Bidule."> <META name="mots-cles" content="entreprise,mode d'emploi,catalogage"> <META name="date" content="1994-11-06T08:49:37+00:00"> </HEAD>
Au moment de la rédaction de cette spécification, il est d'usage courant d'utiliser les formats de date décrit dans le document [RFC2616], section 3.3. Comme ces formats sont relativement difficiles à traiter, nous recommandons aux auteurs d'utiliser le format de date [ISO8601]. Pour plus d'informations, veuillez consulter les sections sur les éléments INS et DEL.
L'attribut scheme permet aux auteurs de donner plus de contexte aux agents utilisateurs pour l'interprétation exacte des métadonnées. Parfois, ces informations supplémentaires peuvent être critiques, comme lorsque les métadonnées peuvent être spécifiées dans des formats différents. Par exemple, un auteur pourrrait spécifier une date dans le format (ambigu) "10-9-97" ; cela veut-il dire le 9 octobre 1997 ou bien le 10 septembre 1997 ? La valeur "Month-Day-Year" de l'attribut scheme rendrait cette date non équivoque.
En d'autres occasions, l'attribut scheme peut fournir des informations utiles non critiques aux agents utilisateurs.
Par exemple, la déclaration scheme suivante peut aider l'agent utilisateur à déterminer que la valeur de la propriété "identifiant" est un numéro de code ISBN :
<META scheme="ISBN" name="identifiant" content="0-8230-2355-9">
Les valeurs de l'attribut scheme dépendent de la propriété name et du profil qui lui est associé.
Remarque : Un exemple de profil est représenté par le profil Dublin Core (voir [DCORE]). Ce profil, qui définit un ensemble de propriétés recommandées pour les descriptions bibliographiques électroniques, est destiné à promouvoir une certaine interopérabilité entre des modèles de description disparates.
<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- corps du document --> <!ATTLIST BODY %attrs; -- %coreattrs, %i18n, %events -- onload %Script; #IMPLIED -- le document est chargé -- onunload %Script; #IMPLIED -- le document est retiré -- >
Balise ouvrante : optionnelle, balise fermante : optionnelle
Définition des attributs
Attributs définis ailleurs
Le corps du document représente le contenu du document. Le contenu peut être présenté par un agent utilisateur de diverses façons. Par exemple, pour les navigateur visuels, on peut assimiler le corps à un canevas dans lequel s'inscrit le contenu : le texte, les images, les couleurs, les graphiques, etc. Pour les agents utilisateurs sonores, le même contenu peut être parlé. Puisque les feuilles de style sont désormais le moyen préféré de spécifier la présentation d'un document, les attributs de présentation de l'élément BODY sont maintenant déconseillés.
EXEMPLE DÉCONSEILLÉ :
Le fragment HTML suivant illustre l'emploi d'attributs
déconseillés. Il fixe une couleur blanche pour l'arrière-plan du canevas,
une couleur noire pour le texte d'avant-plan et, pour les liens hypertextes, une couleur rouge initiale, une couleur fuchsia à
l'activation et une couleur marron une fois ceux-ci visités.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE>Une étude de la dynamique de la population</TITLE> </HEAD> <BODY bgcolor="white" text="black" link="red" alink="fuchsia" vlink="maroon"> ... corps du document... </BODY> </HTML>
On pourrait obtenir le même effet en utilisant une feuille de style, ainsi :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Une étude de la dynamique de la population</TITLE>
<STYLE type="text/css">
BODY { background: white; color: black}
A:link { color: red }
A:visited { color: maroon }
A:active { color: fuchsia }
</STYLE>
</HEAD>
<BODY>
... corps du document...
</BODY>
</HTML>
L'utilisation d'une feuille de style externe (reliée) est plus souple et permet de changer la présentation sans revoir la source du document HTML :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>Une étude de la dynamique de la population</TITLE> <LINK rel="stylesheet" type="text/css" href="stylemalin.css"> </HEAD> <BODY> ... corps du document... </BODY> </HTML>
Les jeux d'encadrement [ndt. frameset] et les corps [ndt. body] HTML. Les documents qui contiennent des jeux d'encadrement remplacent l'élément BODY par l'élément FRAMESET. Veuillez consulter la section sur les cadres pour plus d'informations.
Définition des attributs
<P id="notreparagraphe"> Voici un paragraphe dont le nom est unique.</P> <P id="votreparagraphe"> Voici un paragraphe dont le nom est aussi unique.</P>
L'attribut id a plusieurs rôles dans HTML :
L'attribut class, au contraire, assigne un ou plusieurs noms de classe à un élément ; on peut dire de l'élément qu'il appartient à ces classes. Un nom de classe peut être partagé par plusieurs instances d'éléments. L'attribut class a plusieurs rôles dans HTML :
Dans l'exemple suivant, on utilise l'élément SPAN en conjonction avec les attributs id et class pour baliser les messages d'un document. Les messages apparaissent à la fois en version anglaise et en version française.
<!-- Messages en anglais --> <P><SPAN id="msg1" class="info" lang="en">Variable declared twice</SPAN> <P><SPAN id="msg2" class="warning" lang="en">Undeclared variable</SPAN> <P><SPAN id="msg3" class="erreur" lang="en">Bad syntax for variable name</SPAN>
<!-- Messages en français --> <P><SPAN id="msg1" class="info" lang="fr">Variable déclarée deux fois</SPAN> <P><SPAN id="msg2" class="warning" lang="fr">Variable indéfinie</SPAN> <P><SPAN id="msg3" class="erreur" lang="fr">Erreur de syntaxe pour variable</SPAN>
Les règles de style CSS suivantes indiqueraient aux agents utilisateurs d'afficher les messages informatifs en vert, ceux d'avertissement en jaune et ceux d'erreur en rouge :
SPAN.info { color: green }
SPAN.warning { color: yellow }
SPAN.erreur { color: red }
Remarquez que le nom "msg1" français et le nom "msg1" anglais ne peuvent pas apparaître dans le même document parce qu'ils partage la même valeur d'attribut id. Les auteurs peuvent trouver d'autres emplois pour l'attribut id pour affiner la présentation des messages individuels, en faire des ancres cibles, etc.
Les éléments HTML peuvent presque tous recevoir un identifiant et une information de classe.
Supposons, par exemple, que nous rédigions un document sur un langage de programmation. Ce document doit inclure un certain nombre d'exemples préformatés. On utilise l'élément PRE pour formater ces exemples. On assigne aussi une couleur d'arrière-plan (verte) à tous les éléments PRE appartenant à la classe "exemple".
<HEAD>
<TITLE>... titre du document ...</TITLE>
<STYLE type="text/css">
PRE.exemple { background : green }
</STYLE>
</HEAD>
<BODY>
<PRE class="exemple" id="exemple-1">
...exemple de code ici...
</PRE>
</BODY>
En spécifiant l'attribut id de cet exemple, on peut (1) créer un hyperlien vers celui-ci et (2) surclasser l'information de style de la classe par une information de style sur l'instance.
Remarque : L'attribut id partage le même espace de nom que l'attribut name, quand il est utilisé comme nom d'ancre. Veuillez consulter la section sur les ancres ayant un attribut id pour plus d'informations.
Certains éléments HTML, qui peuvent apparaître dans l'élément BODY, sont dits être de niveau « bloc » [ndt. block-level] tandis que d'autres sont dits de niveau « en-ligne » [ndt. inline] (aussi connu comme sous le nom « niveau texte »). La distinction se fondent sur plusieurs notions :
Les feuilles de style fournissent les moyens de spécifier la restitution d'éléments arbitraires, y compris si l'élément est rendu comme étant de type bloc ou de type en-ligne. Cela peut être approprié, dans certains cas, tel qu'un style en-ligne pour les éléments d'une liste, mais généralement parlant, on décourage les auteurs de détourner l'interprétation conventionnelle des éléments HTML de cette façon.
L'altération des expressions de présentation traditionnelles des éléments de bloc et des éléments en-ligne a également un impact sur l'algorithme de texte bi-directionnel. Voir la sections sur l'effet des feuilles de style sur la bi-directionnalité pour plus d'informations.
<!ELEMENT DIV - - (%flow;)* -- conteneur générique de langue/style --> <!ATTLIST DIV %attrs; -- %coreattrs, %i18n, %events -- > <!ELEMENT SPAN - - (%inline;)* -- conteneur générique de langue/style --> <!ATTLIST SPAN %attrs; -- %coreattrs, %i18n, %events -- >
Balise ouvrante : obligatoire, balise fermante : obligatoire
Attributs définis ailleurs
Les éléments DIV et SPAN, en conjonction avec les attributs id et class, offrent un mécanisme générique qui rajoute de la structure aux documents. Ces éléments définissent le contenu comme étant en-ligne (SPAN) ou de bloc (DIV) mais n'imposent aucune autre expression de présentation sur le contenu. Ainsi, les auteurs peuvent utiliser ceux-ci en conjonction avec les feuilles de style, l'attribut lang, etc., pour exploiter HTML selon leurs besoins et leurs goûts propres.
Supposons, par exemple, que nous voulions générer un document HTML à partir d'une base de données des informations de clientèle. Comme HTML ne comprend pas d'éléments identifiant des objets tels que « client », « numéro de téléphone », « adresse e-mail », etc., nous utilisons les éléments DIV et SPAN pour obtenir les effets de structure et de présentation désirés. Nous pourrions utiliser l'élément TABLE comme suit pour structurer les informations :
<!-- Exemple de données issues de la base client : --> <!-- Nom : Stéphane Boyera, Tél. : (212) 555-1212, E-mail : sb@foo.org --> <DIV id="client-boyera" class="client"> <P><SPAN class="client-title">Informations sur le client :</SPAN> <TABLE class="client-data"> <TR><TH>Nom : <TD>Boyera</TR> <TR><TH>Prénom : <TD>Stéphane</TR> <TR><TH>Tél. : <TD>(212) 555-1212</TR> <TR><TH>E-mail: <TD>sb@foo.org</TR> </TABLE> </DIV> <DIV id="client-lafon" class="client"> <P><SPAN class="client-title">Informations sur le client :</SPAN> <TABLE class="client-data"> <TR><TH>Nom : <TD>Lafon</TR> <TR><TH>Prénom : <TD>Yves</TR> <TR><TH>Tél. : <TD>(617) 555-1212</TR> <TR><TH>E-mail : <TD>yves@coucou.com</TR> </TABLE> </DIV>
Par la suite, nous pourrons facilement rajouter des déclarations de feuilles de style pour affiner la présentation de ces entrées de la base de données.
Pour un autre exemple d'utilisation, veuillez consulter l'exemple dans la section sur les attributs class et id.
Les agents utilisateurs visuels placent en général un saut de ligne avant et après l'élément DIV, par exemple :
<P>aaaaaaaaa<DIV>bbbbbbbbb</DIV><DIV>ccccc<P>ccccc</DIV>
ce qui est typiquement restitué par :
aaaaaaaaa bbbbbbbbb ccccc ccccc
<!ENTITY % heading "H1|H2|H3|H4|H5|H6"> <!-- Il existe 6 degrés de titres allant de H1 (le plus important) à H6 (le moins important). --> <!ELEMENT (%heading;) - - (%inline;)* -- titres --> <!ATTLIST (%heading;) %attrs; -- %coreattrs, %i18n, %events -- >
Balise ouvrante : obligatoire, balise fermante : obligatoire
Attributs définis ailleurs
Un élément de titre décrit brièvement le sujet de la section qu'il introduit. Les agents utilisateurs peuvent utiliser les informations des titres pour, par exemple, construire automatiquement la table des matières du document.
Il existe six degrés de titrage dans HTML, l'élément H1 représentant le titre le plus important et H6 le moins important. Les navigateurs visuels restituent généralement les titres les plus importants dans un corps plus grand que les moins importants.
L'exemple suivant montre comment employer l'élément DIV pour associer un titre à la section du document qui le suit. De cette manière, on peut définir un style pour la section (colorer l'arrière-plan, fixer la police, etc.) au moyen d'une feuille de style.
<DIV class="section" id="elephants-foret" > <H1>Les éléphants des forêts</H1> <P>Dans cette partie, nous abordons le sujet moins connu des éléphants des forêts. ...la section continue... <DIV class="sous-section" id="habitat-foret" > <H2>L'habitat</H2> <P>Les éléphants des forêts ne vivent pas dans les arbres mais au milieu d'eux. ...la sous-section continue... </DIV> </DIV>
On peut décorer cette structure en utilisant les informations de style suivantes :
<HEAD>
<TITLE>... titre du document...</TITLE>
<STYLE type="text/css">
DIV.section { text-align: justify; font-size: 12pt}
DIV.sous-section { text-indent: 2em }
H1 { font-style: italic; color: green }
H2 { color: green }
</STYLE>
</HEAD>
Les sections numérotées et les références
HTML ne génère pas de lui-même les
numéros des sections
à partir des titres. Cette facilité peut cependant être proposées par certains agents utilisateurs.
Les langages de feuille de style, tel que CSS, proposeront bientôt
aux auteurs le contrôle de la génération des numéros de section (ce qui est pratique pour les appels
vers l'avant dans les documents imprimés, comme dans « Voir la section 7.2 »).
Certaines personnes considèrent le fait de sauter les degrés de titre comme une mauvaise pratique. Elles acceptent « H1 H2 H1 » et pas « H1 H3 H1 », puisque le degré de titre « H2 » a été sauté.
<!ELEMENT ADDRESS - - (%inline;)* -- informations sur l'auteur --> <!ATTLIST ADDRESS %attrs; -- %coreattrs, %i18n, %events -- >
Balise ouvrante : obligatoire, balise fermante : obligatoire
Attributs définis ailleurs
Les auteurs peuvent employer l'élément ADDRESS pour fournir les informations de contact du document ou d'une partie essentielle de celui-ci, comme un formulaire. Cet élément apparaît souvent au début ou à la fin du document.
Par exemple, une page du site Web du W3C relative à HTML pourrait contenir les informations de contact suivantes :
<ADDRESS> <A href="../People/Raggett/">Dave Raggett</A>, <A href="../People/Arnaud/">Arnaud Le Hors</A>, personnes à contacter pour l'<A href="activite">activité HTML du W3C</A><BR> $Date : 1999/12/24 23:07:14 $ </ADDRESS>