7 Structure globale d'un document HTML

Table des matières

  1. Introduction à la structure d'un document HTML
  2. Information sur la version de HTML
  3. L'élément HTML
  4. L'en-tête du document
    1. L'élément HEAD
    2. L'élément TITLE
    3. L'attribut title
    4. Données meta
  5. Le corps du document
    1. L'élément BODY
    2. Identificateurs d'éléments: Les attributs id et class
    3. Eléments de blocs et éléments internes
    4. Eléments de groupes: Les éléments DIV et SPAN
    5. Titres: Les éléments H1, H2, H3, H4, H5, H6
    6. L'élément ADDRESS

7.1 Introduction à la structure d'un document HTML

Un document HTML 4.0 comprend trois parties:

  1. une ligne contenant l'information sur la version de HTML,,
  2. une section d'en-tête déclarative (délimitée par l'élément HEAD),
  3. un corps, qui contient le contenu réel du document. Le corps peut être délimité par l'élément BODY ou l'élément FRAMESET.

Les espaces (les blancs, les interlignes, les tabulations, et les commentaires) peuvent apparaitre avant ou après chaque section. Les parties 2 et 3 doivent être délimitées par l'élément HTML.

Voici un exemple de document HTML simple:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
   <HEAD>
      <TITLE>Mon premier document HTML</TITLE>
   </HEAD>
   <BODY>
      <P>Bonjour!
   </BODY>
</HTML>

7.2 Information sur la version de HTML

Un document HTML valide déclare quelle version de HTML est utilisée dans le document. La déclaration du type de document nomme la définition du type de document (DTD) utilisée pour le document (voir [ISO8879]).

HTML 4.0 spécifie trois DTDs, les auteurs doivent donc inclure l'une des déclarations de type de document dans leurs documents. Les DTDs varient dans les éléments qu'ils supportent.

L'URL dans chaque déclaration de type de documents permet à des agents utilisateurs de télécharger la DTD et n'importe quelle série d'entités qui sont nécessaires. Les URIs suivants se rapportent aux DTDs et ensembles d'entités de HTML 4.0 que le W3C supporte:

Le lien entre les identificateurs publics et les fichiers peuvent être spécifiés en utilisant un fichier-catalogue suivant le format recommandé par Le SGML Open Consortium (voir [SGMLOPEN]). Un exemple de fichier catalogue pour HTML 4.0 est inclus au début de la section sur l'information de référence SGML pour HTML. Les deux dernières lettres de la déclaration indiquent la langue de la DTD.Pour HTML, c'est toujours l'anglais ("EN").

7.3 L'élément HTML

<!ENTITY % html.content "HEAD, BODY">

<!ELEMENT HTML O O (%html.content;)    -- racine du document -->
<!ATTLIST HTML
  %i18n;                               -- lang, dir --
  >

Balise de début: facultative, Balise de fin: facultative

Définitions d'attribut

version = cdata [CN]
Désapprouvé. La valeur de cet attribut spécifie quelle version de DTD de HTML régit le document courant. Cet attribut a été désapprouvé car il est redondant avec l'information de version fournie par la déclaration de type de document.

Attributs définis ailleurs

Après la déclaration de type de document, Le reste d'un document HTML est délimité par l'élément HTML. Ainsi un document HTML typique a la structure suivante:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
...L'en-tête, le corps etc. se trouvent ici...
</HTML>

7.4 L'en-tête du document

7.4.1 L'élément HEAD

<!-- %head.misc; définis auparavant comme "SCRIPT|STYLE|META|LINK|OBJECT" -->
<!ENTITY % head.content "TITLE & BASE?">

<!ELEMENT HEAD O O (%head.content;) +(%head.misc;) -- En-tête du document -->
<!ATTLIST HEAD
  %i18n;                               -- lang, dir --
  profile     %URI;          #IMPLIED  -- named dictionary of meta info --
  >

Balise de début: facultative, Balise de fin: facultative

Définitions d'attributs

profile = uri [CT]
Cet attribut indique l'emplacement d'un ou plusieurs profils de données meta, séparés par un espace. Pour de futurs développements, les agents utilisateurs devraient considérer cette valeur comme étant une liste quoique cette spécification considère la première URL comme significative. Des profils sont discutés ci-dessous dans la section sur les données meta.

Attributs définis ailleurs

L'élément HEAD contient des informations sur le document courant, tels que son titre, les mots-clés qui peuvent être utiles pour les moteurs de recherche, et d'autres données qui ne sont pas considerées comme contenu du document. Généralement les agents utilisateurs ne rendent pas comme contenu les éléments qui apparaissent dans HEAD. Cependant ils peuvent représenter l'information de HEAD par d'autres mécanismes.

7.4.2 L'élément TITLE

<!-- L'élément TITLE n'est pas considéré comme faisant parti du flot
	du texte. Il devrait être affiché, par exemple comme titre de page ou titre
	de fenêtre. Un seul titre  par document est requis .
    -->
<!ELEMENT TITLE - - (#PCDATA) -(%head.misc;) -- titre de document -->
<!ATTLIST TITLE %i18n>

Balise de début: requise, Balise de fin: requise

Attributs définis ailleurs

Chaque document HTML doit avoir un élément TITLE dans la section HEAD.

Les auteurs doivent utiliser l'élément TITLE pour identifier le contenu d'un document. Comme souvent les utilisateurs consultent les documents hors du contexte, les auteurs doivent fournir des titre significatifs. Ainsi au lieu d'un titre tel que "Introduction", qui ne donne pas beaucoup de précision, les auteurs devraient plutôt donner un titre tel que "Introduction à l'apiculture médiévale".

Pour des raisons d'accessibilité, les agents utilisateurs doivent toujours présenter le contenu de l'élément TITLE (y compris les éléments TITLE qui apparaissent dans les frames). Le mécanisme pour le faire dépend de l'agent utilisateur (ex. sous forme de légende ou parlé).

Les titres peuvent contenir des entités de caractère (pour les caractères accentués, les caractères spéciaux, etc.), mais ne peuvent pas contenir d'autres marques. Voici un exemple de titre de document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
<TITLE>Etude de dynamique des populations</TITLE>
... autres éléments d'en-tête...
</HEAD>
<BODY>
... corps du document...
</BODY>
</HTML>

7.4.3 L'attribut title

Définitions d'attribut

title = text [CS]
Cet attribut fournit des renseignements sur l'élément pour lequel ils sont placés.

A la différence de l'élément TITLE qui fournit des informations sur un document entier et qui peut apparaître une fois seulement, l'attribut title peut annoter n'importe quel nombre d'élément . Veuillez consulter la définition d'un élément pour vérifier s'il supporte cet attribut.

Les valeurs de l'attribut title peuvent être rendues par des agents utilisateurs par une multitude de moyens. Par exemple, les navigateurs visuels affichent fréquemment le titre sous forme d'un "tool tip" (un court message qui apparaît quand le dispositif de pointage s'arrête sur un objet). Les agents utilisateurs sonores peuvent donner l'information du titre dans un contexte semblable. Par exemple, l'affectation de l'attribut sur un lien permet à des agents utilisateurs (visuels ou non) de dire aux utilisateurs la nature de la ressource liée:

...du texte...
Voici une photo de
<A href="http://someplace.com/neatstuff.gif" title="Moi en plongée">
   moi en plongée l'été dernier
</A>
...encore du texte...

L'attribut title a le rôle supplémentaire de désigner une feuille de style externe quand il est utilisé avec l'élément LINK. Pour plus de détails veuillez consulter la section sur les liens et les feuilles de style.

Note. Pour améliorer la qualité de la parole de synthèse pour les cas mal gérés par des techniques standards, les future versions de HTML pourront inclure un attribut pour l'information phonémique et prosodique encodée.

7.4.4 Données Meta

Au moment ou cette spécification est écrite, le travail en cours permettra à des auteurs d'assigner à des documents HTML et à d'autres ressources accessibles par réseau des informations plus riches compréhensibles par une machine. Le langage de description de ressources du W3C (voir [RDF]) est développé comme cadre commun pour des données meta.

HTML laisse les auteurs indiquer les données meta -- information sur un document lui-même plutôt que sur le contenu du document-- par une multitude de moyens.

Par exemple, pour indiquer l'auteur d'un document, on peut utiliser l'élément META de la manière suivante:

<META name="Auteur" content="Dave Raggett">

L'élément META indique une propriété (ici "Auteur") et lui assigne une valeur (ici "Dave Raggett").

Cette spécification ne définit pas un ensemble de propriétés légales de données meta. La signification d'une propriété et l'ensemble des valeurs légales pour cette propriété devraient être définies dans un lexique de référence appelé profil. Par example, un profil conçu pour aider les moteurs de recherche à indexer des documents pourrait définir des propriétés telles que "auteur", "copyright", "mots-clés", etc....

Spécification des données meta 

En général, la spécification de données meta implique deux étapes:

  1. Déclaration d'une propriété et d'une valeur pour cette propriété. Ceci peut être fait de deux façons:
    1. A partir de l'intérieur d'un document, par l'intermédiaire de l'élément META.
    2. A partir de l'extérieur d'un document, en faisant un lien à l'aide de l'élément LINK vers des données meta (voir la section sur les types de lien).
  2. Report à un profil où les propriétés et leurs valeurs légales sont définies. Pour indiquer un profil, employez l'attribut profile de l'élément HEAD.

Notez que puisqu'un profil est défini pour l'élément HEAD le même profil s'applique à tous les éléments META et LINK dans l'en-tête du document.

On ne demande pas aux agents utilisateurs de supporter les mécanismes de données meta. Pour ceux qui choisissent de supporter des données meta, cette spécification ne définit pas comment les données meta devraient être interprêtées.

L'élément META  

<!ELEMENT META - O EMPTY               --  metainformation générique -->
<!ATTLIST META
  %i18n;                               -- lang, dir, à utiliser avec le contenu --
  http-equiv  NAME           #IMPLIED  -- nom d'en-tête de réponse HTTP  --
  name        NAME           #IMPLIED  -- nom de metainformation --
  content     CDATA          #REQUIRED -- information associée --
  scheme      CDATA          #IMPLIED  -- classe de sélection du contenu --
  >

Balise de début: requise, Balise de fin: interdite

Définitions d'attributs

Pour les attributs suivants, les valeurs autorisées et leur interprétation est dépendante du profil:

name = name [CS]
Cet attribut définit un nom de propriété. Cette spécification n'énumère pas les valeurs légales de cet attribut.
content = cdata [CS]
Cet attribut définit une valeur de propriété. Cette spécification n'énumère pas les valeurs légales de cet attribut.
scheme = cdata [CS]
Cet attribut indique un schéma à utiliser pour interpréter la valeur de la propriété (pour plus de details, voir la section sur les profils).
http-equiv = name [CI]
Cet attribut peut être utilisé à la place de l'attribut name. Des serveurs HTTP utilisent cet attribut pour recueillir l'information pour des en-têtes de message de réponse de HTTP.

Attributs définis ailleurs

L'élément META peut être utilisé pour identifier des propriétés d'un document (par exemple auteur, date d'expiration, une liste de mots clés, etc.) et attribuer des valeurs à ces propriétés. Cette spécification ne définit pas un ensemble normatif de propriétés.

Chaque élément META indique un couple propriété/valeur. L'attribut name identifie la propriété et l'attribut content donne la valeur de la propriété.

Par exemple, la déclaration suivante donne une valeur a la propriété Auteur:

<META name="Auteur" content="Dave Raggett">

L'attribut lang peut être utilisé avec META pour indiquer la langue pour la valeur de l'attribut content. Ceci permet à des synthétiseurs de parole d'appliquer des règles de prononciation dépendantes de la langue.

Dans cet exemple, le nom de l'auteur est déclaré être français:

<META name="Auteur" lang="fr" content="Arnaud Le Hors">

Note. L'élément META est un mécanisme générique pour indiquer des données meta. Cependant, quelques éléments et attributs de HTML manipulent déjà certaines parties de données meta et peuvent être employées par des auteurs au lieu des META pour indiquer ces parties: l'élément TITLE, l'élément ADDRESS, les éléments INS et DEL, l'attribut title, et l'attribut cite.

Note. Quand une propriété indiquée par un élément META prend une valeur qui est une URL, certains auteurs préfèrent indiquer les données meta par l'intermédiaire de l'élément LINK. Ainsi, la déclaration de données meta suivantes:

<META name="DC.identifier"
      content="ftp://ds.internic.net/rfc/rfc1866.txt">

peut aussi être écrite:

<LINK rel="DC.identifier"
         type="text/plain"
         href="ftp://ds.internic.net/rfc/rfc1866.txt">
Les en-têtes META et HTTP

L'attribut http-equiv peut être utilisé au lieu de l'attribut name et a une signification spéciale quand les documents sont recherchés par l'intermédiaire du protocole de transfert hypertexte (HTTP). Les serveurs HTTP peuvent utiliser le nom de propriété indiqué par l'attribut http-equiv pour créer une en-tête du modèle [RFC822] dans la réponse HTTP. Pour plus de détails sur les en-têtes de HTTP valides veuillez consulter la spécification de HTTP ([RFC2068]).

La déclaration META suivante:

<META http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT">

aura comme résultat dans l'en-tête de HTTP:

Expire: Mardi 20 août 1996 14:25:27 GMT

Ceci peut être employé par des caches pour déterminer quand aller chercher une copie récente du document associé.

Certains agents utilisateurs supportent l'utilisation de META pour régénérer la page courante après un nombre de secondes defini, avec l'option de la substituer par une URL différente.

<META http-equiv="refresh" content="3,http://www.acme.com/intro.html">

Le contenu est un nombre indiquant la durée en secondes, suivi de l'URL à charger une fois le temps écoulé. Ce mécanisme est généralement utilisé pour montrer aux utilisateurs une page préliminaire passagère. Cependant, comme certains agents utilisateurs ne supportent pas ce mécanisme, les auteurs devraient inclure un contenu à la page préliminaire pour permettre à des utilisateurs de naviguer (ainsi ils ne restent pas bloqué sur la page préliminaire).

META et les moteurs de recherche

une utilisation commune pour les META est d'indiquer des mots clés qu'un moteur de recherche peut utiliser pour améliorer la qualité des résultats de recherche. Quand plusieurs éléments META fournissent pour un document des informations dépendantes de la langue, les moteurs de recherche peuvent filtrer sur l'attribut lang pour afficher des résultats de recherche en utilisant de préférence la langue de l'utilisateur. Par exemple,

<-- For speakers of US English -->
<META name="keywords" lang="en-us"
         content="vacation, Greece, sunshine">
<-- For speakers of British English -->
<META name="keywords" lang="en"
         content="holiday, Greece, sunshine">
<-- Pour ceux parlant francais -->
<META name="keywords" lang="fr"
         content="vacances, Grèce, soleil">

L'efficacité des moteurs de recherche peut également être accrue par l'utilisation de l'élément LINK pour indiquer des liens vers des traductions dans d'autres langues, des liens vers des versions en d'autres formats (ex, PDF), et, quand le document fait partie d'une collection, pour indiquer des liens à un point de depart approprié pour parcourir la collection.

Vous trouverez davantage d'aide dans la section sur l'aide aux moteurs de recherche pour indexer votre site..

META et PICS
La plate-forme pour la sélection du contenu de Internet (PICS, indiqué par [PICS]) est une infrastructure pour associer des balises (données meta) avec le contenu d'internet. A l'origine conçu pour aider les parents et professeurs à contrôler ce que les enfants pouvaient consulter sur Internet, cela facilite également d'autres utilisations pour les balises, y compris le code de signature, de confidentialité et de gestion des droits de propriété intellectuelle.

Cet exemple illustre comment on peut employer une déclaration META pour inclure une étiquette 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>... titre de document ...</TITLE>
</HEAD>
META et information par défaut

L'élément META peut être employé pour indiquer l'information par défaut pour un document dans les exemples suivants:

L'exemple suivant indique que le codage de caractères pour un document est ISO-8859-5

<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-5">

Profils de données meta 

L'attribut profile de HEAD indique l'emplacement d'un profil de données meta. La valeur de l'attribut profile est une URL. Les agents utilisateurs peuvent utiliser cette URL de deux façons:

Cet exemple se rapporte à un profil hypothétique qui définit des propriétés utiles pour l'indexation du document. Les propriétés définies par ce profil -- comprenant "auteur", "copyright", "mots-cles", et "date" -- ont leur valeur réglées par des déclarations META ultérieures.

 <HEAD profile="http://www.acme.com/profiles/core">
  <TITLE>Comment completer la page de couverture d'un Memorandum</TITLE>
  <META name="auteur" content="John Doe">
  <META name="copyright" content="&copy; 1997 Acme Corp.">
  <META name="mots-cles" content="corporate,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, on utilise par habitude les formats de date [RFC2068], section 3.3. Comme il est relativement difficile de traiter ces formats nous recommandons aux auteur d'utiliser le format de date [ISO8601]. Pour plus d'information, voir les sections sur les éléments INS et DEL

L'attribut scheme permet aux auteurs de fournir plus de précision aux agents utilisateurs pour la traduction correcte des données meta. Comme les données meta peuvent être indiquées dans différents formats, une telle information supplémentaire peut parfois être critique . Par exemple un auteur pourrait indiquer une date dans le format (ambigu) "10-9-97"; Cela signifie-t-il 9 Octobre 1997 ou 10 Septembre 1997? La valeur de l'attribut scheme "Mois-Date-Année" préciserait cette valeur de date.

D'autres fois, l'attribut scheme peut fournir des informations utiles mais non critiques aux agents utilisateurs.

Par exemple la déclaration scheme suivante peut aider un agent utilisateur à déterminer que la valeur de la propriété identificateur est un numéro ISBN:

<META scheme="ISBN"  name="identificateur" content="0-8230-2355-9">

Les valeurs pour l'attribut scheme dépendent de la propriété name et du profile associé.

Note. Un profil d'échantillon est le Dublin Core (voir [DCORE]). Ce profil définit un ensemble de propriétés recommandées pour des descriptions bibliographiques électroniques, et est destiné à favoriser l'interopérabilité parmi les modèles de description disparates.

7.5 Le corps du document

7.5.1 L'élément BODY

<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- corps du document -->
<!ATTLIST BODY
  %attrs;                              -- %coreattrs, %i18n, %events --
  onload          %Script;   #IMPLIED  -- Le document a été chargé --
  onunload        %Script;   #IMPLIED  -- Le document a été retiré --
  >

Balise de début: facultative, Balise de fin: facultative

Définitions d'attribut

background = uri [CT]
Désaprouvé. La valeur de cet attribut est une URL qui indique une ressource d'image. L'image couvre généralement le fond de tuiles (pour les navigateurs visuels).
text = color [CI]
Désaprouvé. Cet attribut affecte la couleur du texte du document (pour les navigateurs visuels).
link = color [CI]
Désaprouvé. Cet attribut affecte la couleur des liens hypertextes non visités du document(pour les navigateurs visuels).
vlink = color [CI]
Désaprouvé. Cet attribut affecte la couleur des liens hypertextes visités du document(pour les navigateurs visuels).
alink = color [CI]
Désaprouvé. Cet attribut affecte la couleur des liens hypertextes quand ils sont selectionnés par l'utilisateur (pour les navigateurs visuels).

Attributes définis ailleurs

Le corps d'un document contient le contenu du document. Le contenu peut être présenté de différentes façons par un agent utilisateur. Par exemple pour des navigateurs visuels vous pouvez penser au corps comme une toile où le contenu apparaît: texte, images, couleurs, graphiques, etc... Pour les agents utilisateurs sonores, le même contenu peut-être parlé. Puisque les feuilles de styles sont maintenant la voie préférée pour indiquer la présentation d'un document, les attributs de présentation de BODY ont été désaprouvés..

EXEMPLE DESAPROUVE:
Le fragment de HTML suivant illustre l'utilisation des attributs désapprouvés. Il indique blanc pour la couleur de fond, noir pour le texte, et rouge pour les hyperliens au départ, fuchsia pour les hyperliens activés et bordeaux pour les hyperliens visités.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
   "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
 <TITLE>Etude de dynamique des populations</TITLE>
</HEAD>
<BODY bgcolor="white" text="black"
  link="red" alink="fuchsia" vlink="maroon">
  ... corps du document...
</BODY>
</HTML>

En utilisant les feuilles de styles, le même effet peut-être accompli de la manière suivante:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
 <TITLE>Etude de dynamique des populations</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 de feuilles de styles externes (avec liens) procure une flexibilité qui permet de changer la présentation sans mettre à jour le document HTML source:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
 <TITLE>Etude de dynamique des populations</TITLE>
 <LINK rel="stylesheet" type="text/css" href="smartstyle.css">
</HEAD>
<BODY>
  ... corps du document...
</BODY>
</HTML>

Framesets et corps de HTML. Les documents qui contiennent des framesets remplacent l'élément BODY par l'élément FRAMESET. Pour plus d'information, veuillez consulter la section sur les frames.

7.5.2 Identificateurs d'éléments: les attributs id et class

Définitions d'attribut

id = name [CS]
Cet attribut assigne un nom à un élément. Ce nom doit être unique dans un document.
class = cdata-list [CS]
Cet attribut assigne un nom ou un ensemble de noms de classe à un élément. A tout nombre d'éléments peut être assigné le (ou les) même(s) nom(s) de classe . Des noms de classe multiples peuvent être séparés par des blancs.
L'attribut id assigne un seul identificateur à un élément (qui peut être vérifié par un programme d'analyse syntaxique de SGML). Par exemple les paragraphes suivants sont distingués par leurs valeurs id:

<P id="monparagraphe"> C'est un paragraphe à nom unique.</P>
<P id="tonparagraph"> Ceci est aussi un paragraphe à nom unique.</P>

L'attribut id a plusieurs rôles en HTML:

L'attribut class , d'autre part, assigne un ou plusieurs noms de classe à un élément; on peut dire que l'élément appartient à ces classes. Un nom de classe peut être partagé par plusieurs exemples d'éléments. L'attribut class a plusieurs rôles en HTML:

Dans l'exemple suivant, L'élément SPAN est utilisé en même temps que les attributs id et class pour marquer les messages de documents. Les messages apparaissent en version anglaise et française.

<!-- English messages -->
<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="error" lang="en">Bad syntax for variable name</SPAN>
<!-- Messages francais -->
<P><SPAN id="msg1" class="info" lang="fr">Variable d&eacute;clar&eacute;e deux fois</SPAN>
<P><SPAN id="msg2" class="warning" lang="fr">Variable indéfinie</SPAN>
<P><SPAN id="msg3" class="error" lang="fr">Erreur de syntaxe pour variable</SPAN>

Les règles suivantes de modèle de CSS diront aux agents utilisateurs visuels d'afficher les messages d'information en vert, les messages d'avertissement en jaune, et les messages d'erreur en rouge.

SPAN.info    { color: green }
SPAN.warning { color: yellow }
SPAN.error   { color: red }

Notez que le message "msg1" en français et le message "msg1" en anglais ne peuvent pas apparaître dans le même document puisqu'ils partagent la même valeur id. Les auteurs peuvent faire une autre utilisation de l'attribut id pour améliorer la présentation de différents messages, en faire des points d'attache, etc...

On peut assigner une information d'identificateur et de classe à presque tous les éléments de HTML.

Supposons par exemple que nous écrivions un document au sujet d'un langage de programmation. Le document doit inclure un certain nombre d'exemples préformatés. Nous employons l'élément PRE pour formater les exemples. Nous assignons également une couleur de fond (vert) à tous les exemples de l'élément PRE appartenant à la classe "example".

<HEAD>
<TITLE>... titre du document ...</TITLE>
<STYLE type="text/css">
PRE.example { background : green }
</STYLE>
</HEAD>
<BODY>
<PRE class="example" id="example-1">
...ici exemple de code...
</PRE>
</BODY>

En affectant l'attribut id nous pouvons (1) créer un hyperlien vers lui et (2) ignorer l'information de modèle de classe avec l'information de modèle d'exemple.

Note. L'attribut id partage le même espace de nom que l'attribut name quand il est utilisé pour des noms d'ancre. Pour plus d'information, veuillez consulter la section sur les ancres avec id.

7.5.3 Eléments de bloc et éléments internes

Certains éléments de HTML qui peuvent apparaître dans le CORPS sont dits "de bloc" tandis que d'autres sont "internes" (également connus comme "niveau de texte"). La distinction est fondée sur plusieurs notions:

Modèle de contenu
Généralement, les éléments de bloc peuvent contenir des éléments internes et d'autres éléments de bloc. Généralement les éléments internes peuvent seulement contenir des données et d'autres éléments internes. Une idée inhérente à cette distinction de structure est l'idée que des éléments de bloc créent des structures plus importantes que des éléments internes.
Formatage
Par défaut, les éléments de bloc sont formatés de façon différente par rapport aux documents internes. Généralement, les éléments de bloc commencent sur de nouvelles lignes, pas les éléments internes. Pour plus d'information sur les blancs, les ruptures de ligne, et le formatage de bloc veuillez consulter la section sur le texte.
Directionnalité
Pour des raisons techniques impliquant l'algorithme de texte bidirectionnel [UNICODE], les éléments de bloc et les éléments internes diffèrent de la façon dont ils héritent de l'information de bidirectionnalité. Pour plus de détails, voir la section sur la transmission de la direction des textes.

Les feuilles de style procurent le moyen d'indiquer le rendu des éléments arbitraires, incluant si un élément est rendu en tant que bloc ou interne. Dans certains cas, tels qu'un modèle interne pour des éléments de liste, ceci peut être approprié, mais d'une manière générale les auteurs sont découragés d'ignorer l'interprétation conventionnelle des éléments de HTML de cette façon.

Le changement des idiomes de présentation traditionnelle des éléments de bloc et d'éléments internes a également un impact sur l'algorithme de texte bidirectionnel. Pour plus d'information voir la section sur l'effet des feuilles de style sur la bidirectionnalité.

7.5.4 Eléments de groupe: les éléments DIV et SPAN

<!ELEMENT DIV - - (%flow;)*            -- récipient générique de langue/style -->
<!ATTLIST DIV
  %attrs;                              -- %coreattrs, %i18n, %events --
  >
<!ELEMENT SPAN - - (%inline;)*         -- récipient générique de langue/style -->
<!ATTLIST SPAN
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Balise de début: requise, Balise de fin: requise

Attributs définis ailleurs

Les éléments DIV et SPAN en même temps que les attributs id et class offrent un mécanisme générique pour ajouter de la structure aux documents. Ces éléments définissent le contenu interne (SPAN) ou de bloc (DIV) mais n'impose aucun autre idiome de présentation sur le contenu. Ainsi les auteurs peuvent employer ces éléments en même temps que les feuilles de style,, l'attribut lang, etc., pour concevoir des documents HTML en fonction de leurs besoins et de leurs désirs.

Supposez par exemple, que nous ayions voulu produire un document HTML basé sur une base de données d'informations sur des clients. Puisque HTML n'inclut pas les éléments qui identifient des objets tels que "client", "numéro de téléphone", "adresse email", etc., nous utilisons DIV et SPAN pour pour réaliser les effets de structure et de présentation désirés. Nous pourrions utiliser l'élément TABLE comme suit pour structurer l'information:

<!-- Exemple de donnees de la base de donnees client: -->
<!-- Nom: Stephane Boyera, Tel: (212) 555-1212, Email: sb@foo.org -->

<DIV id="client-boyera" class="client">
<P><SPAN class="titre-client">information sur le client:</SPAN>
<TABLE class="donnees-client">
<TR><TH>Nom:<TD>Boyera</TR>
<TR><TH>Prénom:<TD>Stephane</TR>
<TR><TH>Tél:<TD>(212) 555-1212</TR>
<TR><TH>Email:<TD>sb@foo.org</TR>
</TABLE>
</DIV>

<DIV id="client-lafon" class="client">
<P><SPAN class="titre-client">information sur le client:</SPAN>
<TABLE class="donnees-client">
<TR><TH>Nom:<TD>Lafon</TR>
<TR><TH>Prénom:<TD>Yves</TR>
<TR><TH>Tél:<TD>(617) 555-1212</TR>
<TR><TH>Email:<TD>yves@coucou.com</TR>
</TABLE>
</DIV>

Par la suite nous pouvons facilement ajouter la déclaration de feuille de style pour affiner la présentation de ces enregistrements 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 généralement un saut de ligne avant et apres les éléments DIV, par exemple:

<P>aaaaaaaaa<DIV>bbbbbbbbb</DIV><DIV>ccccc<P>ccccc</DIV>

ce qui est typiquement rendu ainsi:

aaaaaaaaa
bbbbbbbbb
ccccc

ccccc

7.5.5 Titres: Les éléments H1, H2, H3, H4, H5, H6

<!ENTITY % heading "H1|H2|H3|H4|H5|H6">
<!--
 ll y a 6 niveaux de titre de H1 (le plus important) à H6 (le moins important).
-->

<!ELEMENT (%heading;)  - - (%inline;)* -- titre -->
<!ATTLIST (%heading;)
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Balise de début: requise, Balise de fin: requise

Attributs définis ailleurs

Un élément de titre décrit brièvement le sujet de la section qu'il présente. L'information de titre peut être employée par des agents utilisateurs, par exemple pour construire automatiquement une table des matières pour un document.

Il y a six niveaux de titre dans HTML avec H1 le plus important et H6 le moins important. Les navigateurs visuels affichent habituellement des grands titres avec des polices de caractère plus larges que pour celles des plus petits titres.

L'exemple suivant montre comment utiliser l'élément DIV pour associer un titre à la section du document qui la suit. En faisant ainsi cela permet de definir un modèle pour la section (colorer le fond, choisir une police de caractère etc.) avec des feuilles de style.

<DIV class="section" id="elephants-foret" >
<H1>Elephants de foret</H1>
<P>Dans ce paragraphe nous nous intéressons aux éléphants de forêt les moins connus
...le paragraphe continue...
<DIV class="subsection" id="habitat-foret" >
<H2>Habitat</H2>
<P>Les éléphants de forêt ne vivent pas dans les arbres mais au milieu.
...cette sous-section continue...
</DIV>
</DIV>

Cette structure peut être mise en forme avec l'information de style de la maniêre suivante:

<HEAD>
<TITLE>... titre du document ...</TITLE>
<STYLE type="text/css">
DIV.section { text-align: justify; font-size: 12pt}
DIV.subsection { text-indent: 2em }
H1 { font-style: italic; color: green }
H2 { color: green }
</STYLE>
</HEAD>

Sections et références numérotées.
HTML ne conduit pas lui-même à la numérotation des sections à partir des titres. Cependant, cela peut être offert par des agents utilisateurs. Bientôt les langages de feuille de style tels que le CSS permettront à des auteurs de contrôler la génération de numéro de section (prêt à faire suivre les références dans des documents imprimés, comme dans "voir la section 7.2").

Certains considèrent que sauter des niveaux de titre est une mauvaise pratique. Ils acceptent H1 H2 H1 mais n'acceptent pas H1 H3 H1 puisque le niveau de titre H2 est sauté.

7.5.6 L'élément ADDRESS

<!ELEMENT ADDRESS - - (%inline;)* -- Information sur l'auteur -->
<!ATTLIST ADDRESS
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Balise de début: requise, Balise de fin: requise

Attributs définis ailleurs

L'élément ADDRESS peut être utilisé par des auteurs pour fournir l'information de contact pour le document ou une majeure partie d'un document tel qu'un formulaire. Cet élément apparait souvent au début ou à la fin d'un document.

Par exemple, sur le site Web de W3C une page en relation avec HTML pourrait inclure l'information de contact suivante:

<ADDRESS>
<A href="../People/Raggett/">Dave Raggett</A>,
<A href="../People/Arnaud/">Arnaud Le Hors</A>,
contacts pour  <A href="Activity">l'activité HTML de W3C</A><BR>
$Date: 1998/04/02 00:20:03 $
</ADDRESS>