Un document HTML 4.0 consiste en général en trois parties : une ligne contenant une information sur la version du langage, une section d'en-tête, et un corps de document qui contient le "contenu effectif" du document.
La construction SGML DOCTYPE déclare quelle version HTML a été utilisée lorsque le document a été écrit (voir [GOLD90]).
Les auteurs inclueront une ligne de déclaration ressemblant peu ou prou à ceci en tête de leurs documents :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Draft//EN">
Les deux dernières lettres de la déclaration indiquent la langue de la DTD HTML, dans ce cas, l'anglais ("EN"). Les agents utilisateurs peuvent ignorer cette information.
Les auteurs pourront mentionner différentes descriptions de types de documents suivant la version de HTML qu'ils utilisent. Les types recommandés pour l'écriture en HTML 4.0 sont :
Pour les documents conformes à la spécification de travail de HTML 4.0
Pour les documents conformes à la spécification définitive de HTML 4.0
Pour les documents conformes à la spécification stricte de HTML 4.0. Ce type est approprié pour valider des documents qui n'utilisent aucun élément ni attribut HTML de présentation tels que l'élément FONT ou l'attribut align.
Pour la validation vs. la DTD du site Web W3C
Pour la validation vs. la DTD stricte sur le site Web W3C
Les liaisons entre des identificateurs publics et des fichiers de définition peuvent être spécifiés à l'aide d'un fichier catalogue au format recommandé par le "SGML Open Consortium". Un catalogue type pour le HTML 4.0 est inclus au début de la section "information de référence sur le SGML pour HTML".
<!ENTITY % version "version CDATA #FIXED '%HTML.Version;'"> <!ENTITY % html.content "HEAD, (FRAMESET|BODY)"> <!ELEMENT HTML O O (%html.content)> <!ATTLIST HTML %version; %i18n; -- lang, dir -- >
Balise de début : optionnelle, Balise de fin : optionnelle
Attributs définis par ailleurs
Après mention de la version, tout ce qui reste du document HTML (c'est à dire en fait sa plus grande partie) devrait se situer entre les deux balises de l'élément HTML. De ce fait, un document HTML standard est de la forme :
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Draft//EN> <HTML> ...L'en-tête, le corps, etc. sont écrits ici... </HTML>
| Note de l'adaptateur. On peut ici discuter de l'origine de cet élément et de sa nature optionnelle. A l'origine, il était prévu qu'un document puisse comporter des "strates" de données hétérogènes, codées selon différents langages, d'où l'idée de pouvoir "encapsuler" une partie du document dans cet élément HTML. De plus, l'utilisation de cet élément permet à des agents utilisateurs de reconnaître un format d'encodage indépendamment de "signes extérieurs" (extension de fichier, type MIME, champ de protocole de transfert, etc...). En pratique, les agents utilisateurs n'ont pas cette "inteligence". |
<!-- %head.misc defined earlier on as "SCRIPT | STYLE | META | LINK" --> <!ENTITY % head.content "TITLE & ISINDEX? & BASE?"> <!ELEMENT HEAD O O (%head.content) +(%head.misc)> <!ATTLIST HEAD %i18n; -- lang, dir -- profile %URL #IMPLIED -- named dictionary of meta info -- >
Balise de début : optionnelle, Balise de fin: optionnelle
Définition des attributs
Attributs définis par ailleurs
L'élément HEAD rassemble des informations sur le document courant, telles que son titre, des mots-clef pouvant être utilisés par des robots de recherche, et toute autre donnée considérée comme venant à part du contenu du document. Les éléments situés à l'intérieur de la déclaration HEAD ne devront pas être visualisées dans le cas d'agents utilisateurs conformes, sauf mention particulière.
<!ELEMENT TITLE - - (#PCDATA)* -(%head.misc) -- L'élément TITLE n'est pas considéré comme faisant partie du texte. Il devra être visible cependant, par exemple comme titre de la fenêtre de l'agent utilisateur. Un document ne peut porter qu'un seul titre. --> <!ATTLIST TITLE %i18n>
Balise de début : obligatoire, Balise de fin : obligatoire
Attributs définis par ailleurs
Tout document HTML doit comporter un et un seul élément TITLE dans sa section HEAD. Les agents utilisateurs utilisent le contenu de l'élément titre pour donner à l'utilisateur une information concise sur le contenu probable du document, par exemple, en l'écrivant dans la barre de titre de fenêtre, ou en le citant par synthèse vocale.
Les titres peuvent contenir des entités caractères (pour les caractères accentués, les caractères spéciaux, etc.), mais ne pourront contenir aucune autre balise. Voici un exemple de titre de document :
<HTML> <HEAD> <TITLE>Une étude des dynamiques de population</TITLE> ... autre éléments d'en-tête... </HEAD> <BODY> ... corps de document... </BODY> </HTML>
L'attribut title est en rapport avec l'élément TITLE.
...du texte... Voici une photo de... <A href="http://someplace.com/neatstuff.gif" title="Me scuba diving"> mon initiation à la brasse coulée </A> ...du texte...
L'attribut title a un rôle supplémentaire lorsqu'il est associé à un élément LINK. Il désigne une feuille de style externe. Voir la section sur les feuilles de style pour plus de détails.
Note: To improve the quality of speech synthesis for cases handled poorly by standard techniques, future versions of HTML may include an attribute for encoding phonemic and prosodic information.
au moment de la rédaction de cette spécification, un grand nombre d'approches ont été proposées pour permettre aux auteurs d'associer des informations formatées pour une lecture informatique à propos des documents et d'autres resources réseau, bénéficieant d'un contenu plus riche qu'auparavant.
La présente spécification de HTML permet aux auteurs d'inclure des métadonnées dans leurs documents en par les méthodes suivantes :
Notez que du fait qu'un profil est défini pour la section HEAD, le même profil s'applique à tous les éléments META et LINK inclus dans l'en-tête de document.
<!ELEMENT META - O EMPTY -- Métainformation générique --> <!ATTLIST META %i18n; -- lang, dir, for use with content string -- http-equiv NAME #IMPLIED -- nom de l'en-tête de réponse HTTP -- name NAME #IMPLIED -- nom de la métainformation -- content CDATA #REQUIRED -- information associée -- scheme CDATA #IMPLIED -- selection de la forme de contenu -- >
Balise de début : requise, Balise de fin : interdite
Définition des attributs
Pour les attributs qui suivent, les valeurs permises et leur interprétation dépendent du profil :
Attributs définis par ailleurs
L'élément META peut être utilié pour définir et décrire des propriétés dans un document (ex., auteur, date d'expiration, une liste de mots-clef, etc.) et assigner des valeurs à ces propriétés. Cette spécification ne donne aucun caractère normatif concernant la nature de ces propriétés.
L'attribut name spécifie une propriété dont la valeur est contenu dans une définition d'attribut content. Par exemple,
<META name="Author" content="Dave Raggett"> <META name="Adaptator" content="Valery Fremaux">
L'attribut lang pourra être utilisé dans l'élément META pour spécifier la langue utilisée dans la valeur inscrite dans l'attribut content. Ceci est en général utilisé pour que les navigateurs à synthèse vocale puissent utiliser des schémas phonétiques adéquats.
Dans l'exemple ci après, le nom de l'auteur est déclaré en Français.
<META name="Author" lang="fr" content="Arnaud Le Hors">
Voici un nouvel exemple : certains agents utilisateurs acceptent l'utilisation de l'élément META pour raffraichir la page courante au bout de quelques secondes, en la remplaçant éventuellement par une autre page.
<META name="refresh" content="3,http://www.acme.com/intro.html">
Le contenu est alors un nombre donnant le temps d'attente en secondes, suivi de l'URL à charger au bout de cette temporisation. Ce mécanisme est en général utilisé par les auteurs pour montrer aux utilisateurs une séquence introductive. Cependant, comme certains agents utilisateurs ignorent encore cette mécanique, il est conseillé aux auteurs d'ajouter également des liens explicites sur leurs pages introductives (pour que ceux qui ne disposent pas de cette fonctionnalité ne restent pas "bloqués" sur la page de garde).
L'attribut http-equiv peut être utiisé à laplace de l'attribut name et a une signification particulière lorsque les documents sont récupérés via le protocole HTTP. Les serveurs HTTP utiliseront la valeur spécifiée par l'attribut http-equiv comme nom d'un champ d'en-tête type [RFC822] à émettre dans l'en-tête HTTP de réponse précédant le document. Voir la spécification HTTP ([RFC1945] et [RFC2068]) pour plus de détails sur les champs d'en-tête valides.
Soit un exemple de déclaration META suivante :
<META http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT">
qui résultera en l'en-tête HTTP suivante pour ce document :
Expires: Tue, 20 Aug 1996 14:25:27 GMT
Cet exemple servira par exemple à des mécanismes de cache pour leur indiquer quand venir chercher une copie remise à jour du présent document.
Un des usages communs de l'élément META est de spécifier des mots-clef qu'un robot de recherche pourait lire pour optimiser la pertinence des résultats de recherche. Si divers éléments META procurent des informations dépendant de la langue à propos du document, les moteurs de recherche utiliseront l'attribut lang pour filtrer les mots-clef selon les préférences de langue de l'agent utilisateur. Par exemple,
<META name="keywords" lang="en"
content="vacation,Greece,sunshine">
<META name="keywords" lang="fr"
content="vacances,Grèce,soleil">
L'efficacité des moteurs de recherche peut être encore augmentée en utilisant l'élément LINK établissant des liens vers des traductions du document en d'autres langues, ou d'autres versions du document ans un autre média (ex., PDF), et, lorsque le document fait partie d'une collection, un lien vers un point de départ pertinent pour toute la collection.
L'exemple suivant illustre comment l'on pourrait 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>..le titre ici..</TITLE>
</HEAD>
<BODY>
...le corps...
</BODY>
L'élément META peut aussi être utilisé pour définir des informations "par défaut" à propos de certaines instances :
L'exemple suivant spécifie le jeu de caractères d'un document comme étant le jeu ISO-8859-5
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-5">
Cet exemple s'appuie sur un profil hypothétique qui spécifierait des propriétés utiles pour l'indexation de documents. Les propriétés définies dans ce profil --- dont "author", "copyright", "keywords", et "date" --- verront leur valeur fixéepar des déclarations META subséquentes.
<HEAD profile="http://www.acme.com/profiles/core"> <TITLE>How to complete Memorandum cover sheets</TITLE> <META name="author" content="John Doe"> <META name="copyright" content="© 1997 Acme Corp."> <META name="keywords" content="corporate,guidelines,cataloging"> <META name="date" content="23 Jan 1997 16:05:31 GMT"> </HEAD>
Au moment de la rédaction du présent, l'usage des dates au format décrit dans le document [RFC2068] est pratique courante. Les applications HTTP ont autorisé historiquement trois formats différents de représentation des étiquettes temporelles :
Sun, 06 Nov 1994 08:49:37 GMT ; RFC 822, complétée par la RFC 1123 Sunday, 06-Nov-94 08:49:37 GMT ; RFC 850, remplacée par la RFC 1036 Sun Nov 6 08:49:37 1994 ; Format de la fonction C ANSI asctime()
Selon le document [RFC2068], le premier de ces format est préférable. Il représente une sous-partie de longueur fixe de celui défini par le document [RFC1123] (une remise à jour de la [RFC822]). Le second formar est couramment utilisé, mais est basé sur le document [RFC850] aujourd'hui obsolète et pose le problème d'un encodage de l'année sur deux chiffres seulement. Les clients HTTP 1.1 devront accepter ces trois formats, mais ne devront générer que le format type [RFC1123] dans les en-têtes HTTP. Les agents utilisateurs HTML sont supposés suivre la norme HTTP 1.1 à ce propos, et devront de plus supporter le format de date [ISO8601], ex. "1997-01-23T16:05:31+00:00". Pour plus d'informations, voir les sections sur les éléments INS et DEL.
L'attribut scheme est utilisé pour identifier le format attendu de la valeur de l'attribut content, au cas où une propriété supporterait plusieurs formats. Les valeurs permises pour cet attribut scheme dépendent de la propriété name et du profile.
La première déclaration META de l'exemple qui suit se référe au schéma Dewey Decimal System (dds). La deuxième se réfère au schéma ISBN.
<META scheme="dds" name="description"
content="04.251 Supercomputers systems design">
<META scheme="ISBN" name="identifier" content="0-8230-2355-9">
Note : Un exemple de profil est le "Dublin Core" [DCORE]. ce profil définit un ensemble de propriétés recommandées pour la description électronique de bibliographies, et prétend promouvoir l'interopérabilité de modèles de descriptions variés.
<!ENTITY % block "(%blocklevel | %inline)*">
<!ENTITY % Color "CDATA" -- une couleur en sRGB: #RRGGBB en valeurs hexa -->
<!-- Il existe aussi 16 couleurs préassignées aux valeurs sRGB suivantes :
Black = #000000 Green = #008000
Silver = #C0C0C0 Lime = #00FF00
Gray = #808080 Olive = #808000
White = #FFFFFF Yellow = #FFFF00
Maroon = #800000 Navy = #000080
Red = #FF0000 Blue = #0000FF
Purple = #800080 Teal = #008080
Fuchsia= #FF00FF Aqua = #00FFFF
-->
<!ENTITY % bodycolors "
bgcolor %Color #IMPLIED
text %Color #IMPLIED
link %Color #IMPLIED
vlink %Color #IMPLIED
alink %Color #IMPLIED
">
<!ELEMENT BODY O O (%block) -(BODY) +(INS|DEL)>
<!ATTLIST BODY
%attrs; -- %coreattrs, %i18n, %events --
background %URL #IMPLIED -- Pavé de texture pour le fond du document --
%bodycolors; -- bgcolor, text, link, vlink, alink --
onload %Script #IMPLIED -- un fois le document chargé --
onunload %Script #IMPLIED -- une fois le document déchargé --
>
Balise de début : optionnelle, Balise de fin: optionnelle
Définition des attributs
Attributs définis par ailleurs
Le corps d'un document contient son contenu effectif. Ce contenu pourra être représenté par un agent utilisateur d'une multitude de façons. Par exemple, pour les navigateurs visuels, vous pourrez considérer le corps comme un cadre danslequel le contenu apparaît : texte, images, couleurs, dessins, etc. Pour les agents utilisateurs audio, le même contenu pourraêtre "parlé". Come les feuilles de style sont aujourd'hui la méthode préférentielle de spécification de la présentation d'un document, les attributs du BODY réservés à cet usage ont été déclarés obsolètes. Ces attributs seront à utiliser pour des agents utilisateurs qui ne supportent pas les feuilles de style (HTML 3.2).
Les lignes HTML suivantes sont écrites en HTML 3.2 et illustrent l'usage de ces attributs obsolètes. Elles définissent la couleur de fond comme étant blanche, le texte normal noir, et fixe la couleur des hyperliens initialement au rouge, au fuschia pour les liens activés, et marron pour les visités.
EXEMPLE OBSOLETE :
<HTML> <HEAD> <TITLE>Une étude des dynamiques de population</TITLE> </HEAD> <BODY bgcolor="white" text="black" link="red" alink="fuschia" vlink="maroon"> ... corps de document... </BODY> </HTML>
Le même effet serait obtenu aujourd'hui par l'usage de feuilles de style :
<HTML>
<HEAD>
<TITLE>Une étude des dynamiques de population</TITLE>
<STYLE type="text/css">
BODY { background: white; color: black}
A:link { color: red }
A:visited { color: maroon }
A:active { color: fuschia }
</STYLE>
</HEAD>
<BODY>
... corps de document...
</BODY>
</HTML>
L'usage de feuilles de style extérieures liées ajoutent de la flexibilité en permettant de changer la présentation sans rééditer le document :
<HTML> <HEAD> <TITLE>Une étude des dynamiques de population</TITLE> <LINK rel="stylesheet" type="text/css" href="smartstyle.css"> </HEAD> <BODY> ... corps du document... </BODY> </HTML>
Cadres et corps HTML. Les documents contenant des définitions de cadres ont un élément FRAMESET à la place de l'élément BODY. Consultez la section sur les cadres pour plus d'informations.
Définition des attributs
Les attributs id et class assignent des identificateurs à des instances d'éléments.
Un identificateur spécifié par un attribut id doit être unique à l'intérieur du document. Un nom de classe spécifié dans un attribut class peut être partagé pas plusieurs instances d'éléments. Les valeurs de classes seront choisis dans le but de distinguer le rôle de l'élément auquel cette classe est associée, ex. "note", "exemple", "avertissement".
Ces attributs peuvent être utilisés ainsi :
Tout élément HTML devrait se voir assigner un identificateur et une information de classe.
Supposons, par exemple, que nous écrivions un document à propos d'un langage de programmation. Le docuùent doit inclure un grand nombre d'exemples en texte "préformaté". Nous utiliserons l'élément PRE pour formater ces exemples. Nous assignerons de plus une couleur de fond (vert) à toutes les instances de l'élément PRE appartenant à la classe "exemple".
<HEAD>
<STYLE
PRE.exemple { background : green }
</STYLE
</HEAD>
<BODY>
<PRE class="exemple" id="exemple-1">
...code d'exemple ici...
</PRE>
</BODY>
Après avoir inistialisé l'attribut id dans cet exemple, il sera possible (1) de créer un hyperlien y référençant et (2) contrecarer les informations de style de classe par des des informations de style de niveau "instance".
<!ELEMENT DIV - - %block> <!ATTLIST DIV %attrs; -- %coreattrs, %i18n, %events -- %align; -- align, alignement de texte -- > <!ELEMENT SPAN - - (%inline)* -- container langue/style générique --> <!ATTLIST SPAN %attrs; -- %coreattrs, %i18n, %events -- >
Balise de début : requise, Balise de fin : requise
Attributs définis par ailleurs
Les éléments DIV et SPAN, en conjonction avec les attributs id et class, proposent un mécanisme générique pour renforcer la structuration d'un document. Ce sont les deux seuls éléments du HTML qui n'ajoutent aucune information de présentation à leur contenu. De ce fait, il est possible de les utiliser associés à des identificateurs et des assignations de classe pour pouvoir formater l'apparence de zones de texte par application ultérieure de feuilles de style.
Supposez que nous souhaitions générer un document à partir d'une base de données de clients. Comme le HTML ne définit aucun élément qui soit capable d'identifier des objets tels que des "clients", des "numéros de téléphone", des "adresses email", etc., nous utilsierons des éléments DIV et SPAN pour tailler le HTML à notre mesure.
Dans l'exemple qui suit, chaque nom de client appartient à la classe "client-last-name", etc. Nous pouvons en outre assigner un identificateur unique à chaque client individuel ("client-boyera", "client-lafon", etc.).
<DIV id="client-boyera" class="client"> <SPAN class="client-last-name">Last name:</SPAN> Boyera, <SPAN class="client-first-name">First name:</SPAN> Stephane <SPAN class="client-tel">Telephone:</SPAN> (212) 555-1212 <SPAN class="client-email">Email:</SPAN> sb@foo.org </DIV> <DIV id="client-lafon" class="client"> <SPAN class="client-last-name">Last name:</SPAN> Lafon, <SPAN class="client-first-name">First name:</SPAN> Yves <SPAN class="client-tel">Telephone:</SPAN> (617) 555-1212 <SPAN class="client-email">Email:</SPAN> yves@bar.com </DIV>
Ultérieurement, nous pourrons facilement ajouter des informations de style à notre document pour "fignoler" l'apparence graphique de nos entrées de base de données.
L'élément SPAN est un élément "en ligne" et peut être utilisé à l'intérieur de paragraphes, éléments de liste, etc. lorsque vous souhaitez assigner une déclaration de classe ou des informations de langue à un groupe de mots. L'élément SPAN NE PEUT etre utilisé pour réunir un groupe d'éléments de niveau "bloc". SPAN n'a aucun effet inhérent sur l'apparence tant qu'un style ne lui est pas appliqué, par exemple, via un attribut style, un unr feuille de style associée.
L'élément DIV, à contrario, est un élément de groupage au niveau "bloc". Il peut être utilisé pour regrouper plusieurs éléments "bloc", mais ne peut pas être utilisé au sein d'un paragraphe. Un élément DIV suivant un paragraphe commencé par un élément P et non achevé par sa balise de fin terminera ce paragraphe.
Les agents utilisateurs placent en général un saut de ligne avant et après un élément DIV, par exemple :
<P>aaaaaaaaa<DIV>bbbbbbbbb</DIV><DIV>ccccc<P>ccccc</DIV>
est typiquement affiché comme ceci :
aaaaaaaaa bbbbbbbbb ccccc ccccc
Votre navigateur actuel l'affiche ainsi :
aaaaaaaaa
ccccc
<!ENTITY % heading "H1|H2|H3|H4|H5|H6"> <!-- Il existe six niveaux de titrage depuis H1 (le plus imposant) jusqu'à H6 (le plus discret). --> <!ELEMENT (%heading) - - (%inline;)*> <!ATTLIST (%heading) %attrs; -- %coreattrs, %i18n, %events -- %align; -- align, alignement du texte -- >
Balise de début : requise, Balise de fin : requise
Attributs définis par ailleurs
Un élément de titrage décrit brièvement le thème de la section qu'il introduit. Les informations de titrage pourront être récoltées par les agents utilisateurs pour, par exemple, construire une table des matières automatique pour ce document.
Le HTML définit six niveaux de titrage depuis H1 affiché comme le plus imposant jusqu'à H6 le plus discret. Les navigateurs visuels utiliseront des polices plus ou moins grosses pour rendre compte du niveau de titre.
L'exemple suivant montre l'usage d'un élément DIV pour associer un titre avec la section qui suit. Ce faisant, vous permettez l'application d'un style particulier (couleur de fond, police, etc.) à l'ensemble de l'article.
<DIV class="section" id="forest-elephants" > <H1>Eléphants des forêts</H1> Dans cette section, nous discuterons des éléphants sylvestres, bien moins connus. ...this section continues... <DIV class="subsection" id="forest-habitat" > <H2>Habitat</H2> Les éléphants sylvestres ne vivent pas DANS les arbres sinon parmi eux. ...cette sous-section se poursuit... </DIV> </DIV>
Cette structure pourra être "décorée" par application des éléments de styles comme suit :
<HEAD>
<STYLE>
DIV.section { text-align: justify; font-size: 12pt}
DIV.subsection { text-indent: 2em }
H1 { font-style: italic; color: green }
H2 { color: green }
</STYLE>
</HEAD>
Numérotation des sections et des références
HTML ne sait pas gérer de numérotation automatique pour les titres de section. Cependant, cette fonctionnalité pourra être néanmoins proposée par des agents utilisateurs. Dans peu de temps, des langages de définition de feuilles de style
tels que CSS permettront aux auteurs de contrôler la génération de numérotation automatique associée aux sections (pratique pour des références "avant" dans des documents imprimés, telles que "Voir section 7.2 du manuel").
Certaines personnes considèrent qu'il est de mauvais aloi de sauter des niveaux de titre. Ils accepteront une séquence H1 H2 H1 tandis qu'ils refuseront une séquence H1 H3 H1 du fait que le niveau de titre H2 a été sauté.
<!ELEMENT ADDRESS - - ((%inline;) | P)*> <!ATTLIST ADDRESS %attrs; -- %coreattrs, %i18n, %events -- >
Balise de début : requise, Balise de fin : requise
Attributs définis par ailleurs
Faute d'un autre endroit mieux approprié, nous incluons ici la définition d'un élément ADDRESS. Cet élément permet de mentionner d'une façon identifiable le nom et l'adresse de l'auteur du document, ex.,
<ADDRESS> Newsletter editor<BR> J. R. Brown<BR> 8723 Buena Vista, Smallville, CT 01234<BR> Tel: +1 (123) 456 7890 </ADDRESS>