1-Le Langage XHTML

Le langage XHTML
1. FOAD
2. E-Miage
3. D231 - Web Design (INFO_31)
4. Le langage XHTML
Le langage XHTML
Le langage XHTML
Nicolas Royackkers
<nicolas.royackkers AT u-picardie POINT fr>
Historique des versions
Version 1.1 2008-10-15
Chapitre 1 : mise à jour de la section « Les fondements du web ». Chapitre 2 : mise à jour de
la section « Généalogie ». Chapitre 3 : création de la section « Évolutions futures ». Chapitre
4 : mise à jour des sélections de logiciels. Ensemble du document : mise à jour des liens
externes.
Version 1.0 2007-01-19
Version initiale du document
Résumé
Le web est basé sur des pages écrites en HTML ou en XHTML, ce second langage étant
destiné à remplacer le premier. Dans ce cours, nous présentons d'abord les caractéristiques
communes à tous les langages XML. Puis nous étudions le langage XHTML de manière
détaillée. Une dernière partie est consacrée aux outils de développement permettant de réaliser
et de valider des pages web en XHTML.
Table des matières
1. Le World Wide Web

1. Les fondements du web
2. La vie d'une page web
2. Les langages à balises
1. Généalogie
2. Les grands principes de XML
2.1. Éléments et balises
2.2. Attributs
2.3. Structure et représentation
2.4. Prologue
2.5. DTD
2.6. Commentaires
2.7. Document bien formé
2.8. Document valide
3. Le langage XHTML
1. Les différentes normes
2. DTD
3. Structure d'une page
4. Entête
5. Corps
5.1. Éléments bloc et éléments en ligne
5.2. Titres et paragraphes
5.3. Sémantique du texte
5.3.1. Emphase
5.3.2. Citations
5.3.3. Indice et exposant
5.3.4. Informatique
5.3.5. Abréviation, acronyme et définition
5.4. Listes
5.5. Liens
5.6. Images
5.7. Tableaux
5.8. Formulaires
5.9. Objets
5.10. Enrichir et personnaliser le balisage sémantique
5.10.1. Les attributs id et class
5.10.2. Les éléments génériques div et span
6. Document récapitulatif
7. Évolutions futures
4. Outils de développement XHTML
1. Éditeurs
1.1. Éditeurs de texte pour la programmation
1.2. Éditeurs de texte pour la création web
1.3. Éditeurs WYSIWYG
1.4. Éditeurs XML
2. Outils de validation du W3C
2.1. Validation du code XHTML
2.2. Vérification des liens
3. Navigateurs
4. Clients FTP
5. Références et compléments
1. Bibliographie sélective
2. Ressources en ligne
2.1. Recommandations du W3C
2.2. Référence interactive
2.3. Articles et tutoriels
2.4. Aides-mémoire
Chapitre 1. Le World Wide Web

Table des matières


Le World Wide Web, ou web, a été inventé par Tim Berners-Lee en 1989. C'est un ensemble
de documents mis à disposition sur le réseau de communication Internet. Le web est un
système dit hypertexte, car il est formé de documents liés entre eux par des hyperliens. Un
hyperlien, ou lien hypertexte, permet de passer automatiquement de la consultation d'un
document à celle d'un autre document qui lui est lié. World Wide Web signifie littéralement
« la toile d'araignée mondiale ». Elle est tissée symboliquement par les innombrables
hyperliens qui lient les documents.
Le protocole de communication du web est le HTTP, abréviation de l'anglais HyperText

Transfer Protocol. Il permet d'échanger tout type de document entre un serveur HTTP et un
client HTTP (navigateur web).
Les documents de base du web, qui forment la plus grande part de son contenu et le
structurent, sont les pages web. Une page web est un document contenant du texte mais qui
peut être relié à des images fixes ou animées, des sons ou encore d'autres types de documents.
Actuellement, il existe deux langages utilisés pour écrire les pages web : le HTML
(HyperText Markup Language) et le XHTML (eXtensible HyperText Markup Language).
HTML a été créé en 1991 et a accompagné le développement du web à ses débuts. Ce langage
a beaucoup évolué au fil des années mais sa dernière version date de 1999. XHTML a quant à
lui été créé en 2000. C'est une version modernisée du langage HTML, destiné à remplacer ce
dernier. C'est le langage XHTML que nous allons étudier dans ce cours, afin d'apprendre à
réaliser des pages web.

En premier lieu, il est important de connaître le cheminement des pages web : comment sont-
elles désignées et transmises ? Quels sont les programmes qui les manipulent ?
Imaginons une page web déjà existante, produite par exemple par l'Université de Picardie.
Elle est stockée sur le disque dur d'un ordinateur situé à Amiens et connecté à Internet. Sur cet
ordinateur, il fonctionne en permanence un programme qui gère les demandes de pages web
en provenance d'Internet. Ce programme s'appelle un serveur HTTP, car il est à l'écoute des
requêtes utilisant le protocole HTTP et il doit les satisfaire. Le logiciel serveur HTTP le plus
couramment utilisé s'appelle Apache.
Imaginons maintenant un étudiant qui souhaite accéder à la page web précitée. Il se trouve par
exemple à Paris, à Singapour ou à Yaoundé. Sur son ordinateur connecté à Internet, il
commence par démarrer un navigateur web. Techniquement parlant, ce logiciel est un client
HTTP. En effet, il est capable de dialoguer avec un serveur HTTP n'importe où dans le monde
afin de récupérer les pages web qui sont gérées par celui-ci. Les navigateurs web les plus
connus aujourd'hui sont Internet Explorer, Firefox et Opera.
Dans son navigateur préféré, notre étudiant tape ensuite l'adresse de la page web qu'il désire
consulter, par exemple http://www.u-picardie.fr/annuaire.html. Cette adresse
s'appelle une URL, pour Uniform Ressource Locator. Il s'agit d'une chaîne de caractères qui
identifie un document de manière unique sur Internet. L'URL d'un site ou d'une page web
commence toujours par la séquence de caractères http://, qui, vous l'aurez deviné, fait
référence au protocole de communication HTTP. Quand la touche Entrée est pressée, le
navigateur (client HTTP) envoie une requête au serveur HTTP de l'Université de Picardie.
Celui-ci reçoit et analyse la requête. En retour, le serveur envoie au navigateur un document :
la page web, sous forme d'un fichier XHTML. En principe, le serveur envoie également une
feuille de style (fichier CSS), définissant la façon dont la page web doit être présentée. Enfin,
selon le contenu de la page, d'autres fichiers peuvent être également transférés : des images
fixes, des animations, des sons, des programmes (scripts), etc.
Une fois toutes les données nécessaires parvenues au navigateur, le rendu de la page est
effectué. Le plus souvent, elle sera affichée sur un écran. Cependant, le périphérique de sortie
n'est pas nécessairement un moniteur. Par exemple, notre étudiant veut peut-être imprimer la
page qu'il vient de recevoir. Dans ce cas, il obtiendra un document papier, dont la présentation
sera sans doute différente de celle produite par un écran. Les personnes handicapées ont
recours à d'autres périphériques, comme par exemple des plages Braille, composés de pièces
mécaniques mobiles retranscrivant le texte en Braille (écriture tactile lue avec les doigts). La
page web sera alors représentée d'une tout autre manière que sur un écran d'ordinateur. Les
non-voyants peuvent également utiliser des synthétiseurs vocaux. Dans ce cas, le contenu de
la page sera rendu de manière sonore et non graphique ou tactile. Un contenu donné, défini
dans un fichier XHTML, peut donc être représenté par différents périphériques ou média de
sortie très différents.
Une page XHTML peut être rendue par divers périphériques de sortie, qui produiront des
représentations physiques très différentes de ce document.
Les possibilités de variation de représentation d'un document ne s'arrêtent pas là. Fixons le
périphérique de sortie en prenant pour exemple le plus courant : un écran d'ordinateur. Si
aucune feuille de style n'a été envoyée par le serveur, le navigateur affichera la page à l'écran
selon un mode défini par défaut : les éléments sont présentés les uns en dessous des autres, les
textes sont affichés simplement en noir sur fond blanc, etc. Si elle existe, la feuille de style
peut définir n'importe quelle présentation visuelle de la page. Par exemple, le menu sera placé
en haut et à gauche, les titres seront affichés en bleu marine sur fond jaune, le fond de la page
contiendra une image décorative, etc. Ainsi, le rendu d'un document XHTML par un
périphérique donné peut être personnalisé grâce à une ou plusieurs feuilles de style.
Pour un périphérique de sortie donné (ici un écran), un document XHTML possède un rendu
par défaut, qui peut être modifié en profondeur grâce aux feuilles de styles. Ce schéma utilise
trois représentations différentes de la page d'accueil du site CSS Zen Garden (affichée sans
style, puis avec le style Dazzling Beauty et enfin le style Icicle Outback).
Résumé. HTTP, qui régit la communication sur le web, est un protocole client-serveur. Le
logiciel client est un navigateur. Il adresse une requête à un serveur HTTP gérant des
documents. Celui-ci envoie en retour une page sous forme d'un fichier XHTML. Cette page
web est enfin représentée par le logiciel client pour pouvoir être lue ou écoutée sur un
périphérique. La représentation physique du contenu du document dépend du média de sortie
d'une part et de la feuille de style associée à la page d'autre part.
Chapitre 2. Les langages à balises

Table des matières
1. Généalogie
2.2. Attributs
2.4. Prologue
2.5. DTD
2.6. Commentaires
1. Généalogie
HTML et XHTML appartiennent à la même famille. L'histoire de celle-ci éclaire les rapports
entre ces deux langages.
Au commencement était le SGML, pour Standard Generalized Markup Language. Ce langage

a été développé au début des années 80 et normalisé par l'ISO en 1986. SGML est un langage
de balisage, ou langage de description à balises. Il permet de décrire, non pas des documents,
mais des langages de description de documents. C'est pourquoi SGML est appelé un
métalangage de description. Un langage créé à partir de SGML s'appelle une application
SGML, ou, plus simplement, un langage SGML. Les langages SGML ont été très utilisés pour
gérer la documentation interne de grandes entreprises industrielles, mais aussi de certaines
administrations ou organismes de recherche. Le langage SGML le plus célèbre est toutefois le
HTML, qui a permis le développement du web à partir de 1991.
Le principal inconvénient de SGML est sa complexité, qui le rend difficile à apprendre et a

limité sa diffusion. C'est pourquoi XML, pour eXtensible Markup Language, a été créé. XML
est une version simplifiée de SGML. Il a été développé par le W3C en 1999. XML reprend les
grands principes de SGML mais n'en conserve que les aspects les plus utiles. XML a
rencontré immédiatement un grand succès et a trouvé un grand nombre d'applications. De
nouveaux langages ont été créés avec XML. Beaucoup de langages SGML ont également été
redéfinis avec XML. On parle alors de reformulation d'un langage SGML en un langage
XML. C'est ce qui s'est passé pour les langages du web : HTML (langage SGML) a été
reformulé en XHTML (langage XML).
L'arbre généalogique de la grande famille des langage de balisage comporte donc deux
branches principales. La plus ancienne, qui tend à devenir obsolète, a pour ancêtre le
métalangage SGML et comprend le langage HTML. La plus récente, qui concentre toute
l'attention désormais, a pour ancêtre le métalangage XML et comprend le langage XHTML.
Arbre généalogique des langages de balisage pour le web.
Concrètement, comment se comparent les deux langages XHTML et HTML ? On peut

répondre en donnant la liste de leurs principaux points communs et de leurs principales
différences.
Points communs :
 HTML (norme 4.01 Strict) et XHTML (norme 1.0 Strict) possèdent exactement les
mêmes fonctionnalités ; en d'autres termes, ils permettent de créer des pages
structurées de manière identique
 Ces deux langages sont correctement interprétés par tous les navigateurs récents
Différences :
 XHTML possède une syntaxe légèrement différente de HTML ; par exemple,

XHTML est sensible à la casse alors que HTML ne l'est pas ; toutes ses balises
s'écrivent en minuscules alors que celles de HTML sont écrites en majuscules
 comme son nom l'indique, XHTML est un langage extensible, alors que HTML est
figé ; cela signifie que des éléments peuvent être ajoutés au langage selon les besoins
de certains utilisateurs
Pour en savoir plus : dans les spécifications de XHTML 1.0, le W3C recense les différences
entre les langages HTML 4.01 Strict et XHTML 1.0 Strict. Ce document imprimable les
résume en une page.

2.2. Attributs
2.4. Prologue
2.5. DTD
2.6. Commentaires
Tous les langages XML partagent les mêmes structures et les mêmes règles syntaxiques de
base. Nous allons les présenter en utilisant un langage XML fictif qui possède des balises
écrites en français.
Dans le cadre de l'harmonisation du format des documents qu'elle utilise, la Confrérie des
Joyeux Marmitons (ou CJM) a créé un langage XML qu'elle a baptisé RML, pour Recipe
Markup Language (littéralement : « langage de balisage pour les recettes de cuisine »). Dans
ce langage, la recette de l'oeuf à la coque s'écrit par exemple de la manière suivante :
<?xml version="1.0" encoding="iso-8859-15" ?>

<!DOCTYPE rml PUBLIC "-//CJM//DTD RML 1.0//FR"
"http://www.cjm.org/DTD/rml1.dtd">
<!- une recette à la portée de tous -->
<recette>
<titre>L'oeuf à la coque</titre>
<durees>
<temps_preparation unite="minute">1</temps_preparation>
<temps_cuisson unite="minute">3</temps_cuisson>
</durees>
<ingredients>
<liste_non_ordonnee>
<element_de_liste>un oeuf bien frais</element_de_liste>
<element_de_liste>du pain</element_de_liste>
<element_de_liste>du sel</element_de_liste>
</liste_non_ordonnee>
</ingredients>
<preparation>
<liste_ordonnee>
<element_de_liste>faire bouillir de l'eau</element_de_liste>
<element_de_liste>y plonger l'oeuf et déclencher le
minuteur</element_de_liste>
<element_de_liste>découper le pain en
mouillettes</element_de_liste>
<element_de_liste>retirer l'oeuf après 3 minutes de
cuisson</element_de_liste>
<element_de_liste>dans un coquetier, casser son extrémité
supérieure</element_de_liste>
<element_de_liste>saler légèrement et déguster avec les
mouillettes</element_de_liste>
</liste_ordonnee>
</preparation>
<illustration>
<image source="oeuf_a_la_coque.jpg" description="photo d'un oeuf à la
coque" />
</illustration>
</recette>
De façon très classique, cette recette se compose successivement d'un titre, de l'indication des
durées de préparation et de cuisson, de la liste des ingrédients, de la procédure de préparation
et enfin de la photo du plat préparé.
Tous les langages XML ont pour but de décrire la structure d'un document. Ils utilisent pour
cela des balises, qui délimitent des éléments.
Une balise commence par le caractère < (inférieur) et se termine par le caractère > (supérieur).
Exemple : <recette>
<recette> est une balise dont le nom est recette.
Il existe trois types de balises : les balises ouvrantes, les balises fermantes et les balises sans
contenu. Les balises ouvrantes et fermantes s'utilisent par paires pour délimiter un contenu.
Exemple :
<titre>L'oeuf à la coque</titre>
La balise ouvrante, écrite en premier, est <titre> et la balise fermante est </titre>. Les
deux balises possèdent le même nom mais la balise ouvrante commence par le caractère < et
la balise fermante par les caractères </. La séquence délimitée par une balise ouvrante et sa
balise fermante définissent un élément du document XML. Dans notre exemple, la séquence
<titre>L'oeuf à la coque</titre> définit l'élément titre de la recette et spécifie sa
valeur (la chaîne de caractères « L'oeuf à la coque »).
Les balises sans contenu s'utilisent seules et non par paires. Elles ne délimitent aucune partie
du document. Exemple :
<image source="oeuf_a_la_coque.jpg" description="photo d'un oeuf à la

coque" />
Cette balise insère une image dans le document. Les balises sans contenu sont à la fois
ouvrantes et fermantes. Elles commencent comme les balises ouvrantes par le caractère <
mais se terminent par les caractères /> (et non le caractère > seulement).
2.2. Attributs
Dans l'exemple précédent, nous pouvons remarquer que la balise image n'est pas seulement
composée de son nom. En effet après le nom de la balise, se trouvent deux attributs. Un
attribut est une expression de type propriété="valeur". Ainsi, source="oeuf_a_la_coque.jpg"
et description="photo d'un oeuf à la coque" sont deux attributs de la balise image. Le premier
spécifie le nom du fichier à afficher et le second donne une brève description de l'image.
Autre exemple de balise utilisant un attribut dans notre recette :
<temps_cuisson unite="minute">3</temps>
Ici, un attribut est utilisé pour préciser l'unité de la durée spécifiée. Comme on le voit, les
attributs ne sont pas réservés aux balises sans contenu. Les balises ouvrantes peuvent
également utiliser des attributs. En revanche, une balise fermante ne répète pas les attributs de
sa balise ouvrante et ne comporte donc jamais d'attribut.
La liste des attributs utilisables pour une balise donnée dépend du langage. Certaines balises
n'admettent aucun attribut, d'autres en admettent un ou plusieurs. Certains attributs sont
obligatoires et d'autres sont optionnels.
Un langage XML permet de donner une description sémantique et structurelle d'un document.
La sémantique se rapporte au sens ou au rôle des éléments du document. Des balises comme
ingredients par exemple définissent la nature du texte qu'elles délimitent : un ensemble
d'ingrédients. C'est le rôle de ce texte qui est spécifié et non sa structure. D'autres balises
apportent une description structurelle. La balise liste_non_ordonnee par exemple définit
seulement la structure du texte qu'elle délimite, mais pas du tout la nature de son contenu.
D'autres balises enfin peuvent avoir un rôle mixte (sémantique et structurel).
La structure du document est également donnée par l'imbrication des différents éléments
XML qui le composent. Dans notre exemple, la balise <recette> est la première ouverte et
</recette> est la dernière fermée. Elles englobent toutes les autres balises et l'ensemble du
contenu textuel. L'élément recette est appelé l'élément racine du document. Viennent
ensuite les éléments XML déclarés dans l'élément recette. Ce sont titre, durees,
ingredients, préparation et illustration. Ces éléments sont les éléments enfants de
l'élément recette. L'élément recette est appelé l'élément parent de ces éléments. Bien sûr,
les éléments enfants peuvent eux-mêmes posséder des enfants et ainsi de suite. Tous les
éléments faisant partie de l'ascendance d'un élément sont appelés ses ancêtres. Tous les
éléments faisant partie de sa descendance sont ses descendants.
Les éléments XML et leur imbrication structurent fortement le document. Cette structure peut
être représentée de différentes manières. L'une d'elle est un arbre. On place d'abord l'élément
racine, puis on dessine ses enfants, puis les enfants des enfants, et ainsi de suite jusqu'aux
feuilles de l'arbre (contenu textuel du document).
Arbre des éléments XML de la recette de l'oeuf à la coque.
Une autre représentation de la structure du document peut être donnée grâce à l'écriture même
de celui-ci. Dans notre exemple, nous avons utilisé l'indentation pour mettre en évidence
l'imbrication des différents éléments. La convention est de décaler à droite les enfants d'un
élément par rapport à celui-ci. On visualise ainsi immédiatement les différents niveaux
d'imbrication et la structure du document.
L'indentation facilite beaucoup l'écriture et la lecture du document par un être humain.

Cependant, elle n'a rien d'obligatoire, puisque les programmes qui traitent les documents
XML, appelés processeurs XML, n'en tiennent pas compte. Il en est de même pour les sauts
de ligne. Ainsi, ce n'est pas parce qu'on écrit deux éléments de texte l'un en-dessous de l'autre
qu'ils seront représentés ainsi lors du rendu du document.
2.4. Prologue
Les trois premières lignes de notre recette sont un peu particulières et méritent quelques
explications.
La première ligne du document s'appelle le prologue XML ou simplement le prologue.
<?xml version="1.0" encoding="iso-8859-15" ?>
Il commence par la chaîne de caractères <?xml et se termine par ?>. Cet élément particulier
indique que le document qui suit est écrit dans un langage XML. Le prologue peut comporter
des attributs dont l'ordre est fixé, dont :
 version : le numéro de version de la norme XML utilisée par le langage

 encoding : l'encodage des caractères utilisé par le fichier ; iso-8859-15 correspond au
jeu de caractères des langues occidentales (symbole de l'euro inclus)
Le prologue XML n'est pas obligatoire mais son emploi est recommandé. S'il est utilisé, le
prologue doit constituer la première ligne du document.
2.5. DTD
La seconde ligne de notre recette est la déclaration de la DTD. Elle spécifie le langage utilisé
dans le document.
<!DOCTYPE RML PUBLIC "-//CJM//DTD RML 1.0//FR"

"http://www.cjm.org/DTD/RML1.dtd">
DTD est l'abréviation de Document Type Definition, qui signifie littéralement définition de
type de document. Ce terme désigne tout simplement les spécifications du langage dans lequel
le document est écrit. Nous avons mentionné plus haut que XML était un langage permettant
de créer d'autres langages. En fait, il permet de créer des DTD, donc des spécifications (ou
définitions) de langages. En pratique, la DTD d'un langage XML contiendra notamment :
 la liste de toutes les balises utilisables dans le langage

 la liste des attributs obligatoire et optionnels pour chaque balise
 les règles d'imbrication entre les balises, c'est-à-dire, pour chaque balise, la liste des
balises enfants qui sont obligatoires ou optionnelles et l'ordre dans lequel elles peuvent
apparaître
Le dernier point mérite une attention particulière. En effet, il faut toujours avoir l'esprit que
les éléments d'un document XML ne peuvent pas être écrits dans n'importe quel ordre. La
DTD du langage utilisé impose à ce niveau des contraintes plus ou moins fortes. Reprenons
notre exemple, en considérant la balise recette. La DTD du langage RML doit fournir la
liste ordonnée de ses balises enfants. Ainsi, on peut imaginer que devront apparaître dans un
élément recette, obligatoirement et dans cet ordre, les éléments titre, durees, ingrédients
et préparation, tandis que l'élément illustration sera optionnel et n'apparaîtra
éventuellement qu'en dernière position.
Nous n'irons pas plus loin dans la description des DTD. Leur réalisation n'intéresse que les
concepteurs de langages XML. La plupart des développeurs n'auront jamais à créer de DTD.
En revanche, l'utilisation d'une DTD déjà écrite, donc d'un langage XML existant pour
réaliser un document, est aujourd'hui courante.
La déclaration d'une DTD dans un document commence par la chaîne de caractères <!
DOCTYPE et se termine par >. Savoir interpréter la déclaration d'une DTD n'est pas nécessaire
pour l'utiliser. En général, la chaîne de caractères à insérer dans le document est fournie par
l'organisme qui a créé le langage. Pour les plus curieux, voici quelques explications sur ce
type de déclaration, qui peut paraître au premier abord bien obscure.
La déclaration de DTD, c'est-à-dire la déclaration du langage utilisé dans le document, doit

apparaître après le prologue et avant l'élément racine. En pratique, elle occupe généralement
la seconde ligne.
2.6. Commentaires
La troisième ligne de notre recette est un commentaire.
<!- une recette à la portée de tous -->

Un commentaire commence par la chaîne de caractères <!- et se termine par -->. Il peut
contenir n'importe quelle chaîne hormis la séquence de caractères -- (deux tirets successifs).
Des commentaires peuvent être insérés à tout endroit du document, sauf à l'intérieur d'une
balise. Ils sont ignorés par les processeurs XML.
Les commentaires sont à usage de documentation interne. En général, ils sont peu utiles dans
un document XML, dans la mesure où le balisage explicite par lui-même le sens et la structure
du document.
Comme nous l'avons mentionné plus haut, tous les langages XML partagent les mêmes règles
syntaxiques. Un document qui les respecte est dit bien formé. Passons ces règles en revue.
Un document possède un élément racine et un seul.
Dans notre exemple, cela signifie que nous n'aurions pas pu écrire deux éléments
recette juxtaposés dans le même document (pour y faire figurer deux recettes de
cuisine différentes). La balise ouvrante et la balise fermante de l'élément racine ne
doivent apparaître qu'une seule fois et englober tout le contenu.
Toute balise ouverte est refermée.
En pratique, cette règle impose de :
 ne pas oublier la balise fermante correspondant à chaque balise ouvrante

 ne pas oublier de fermer en interne les balises sans contenu, en les terminant
par />
Un élément enfant est complètement inclus à l'intérieur de son parent.
Cela signifie que la balise ouvrante de l'élément enfant doit être placée après la balise
ouvrante de son parent et que la balise fermante de l'élément enfant doit être placée
avant la balise fermante de son parent.
Exemple correct :
<a><b>du texte</b></a>
Exemple incorrect :
<a><b>du texte</a></b>
Les noms de balises et les noms d'attributs sont écrits en minuscules.
Exemples corrects :
<recette> .. </recette>
<temps_cuisson unite="minute">3</temps_cuisson>
Exemples incorrects :
<RECETTE> .. </RECETTE>
<RECETTE> .. </recette>
<temps_cuisson UNITE="minute">3</temps_cuisson>
Les attributs ont toujours une valeur, qui est placée entre guillemets (simples ou doubles).
Exemple correct :
<image source='oeuf_a_la_coque.jpg' description="photo d'un oeuf à la

coque" />
<image source="oeuf_a_la_coque.jpg" description= />

<temps_preparation unite=minute>1</temps_preparation>
Les caractères qui jouent un rôle dans le balisage ne peuvent pas être utilisés dans le texte du
document.
On les remplace par des séquences de caractères spéciales, appelées entités

prédéfinies, qui sont données par le tableau suivant :
Caractère Entité prédéfinie

< <
> >
" "
' '
& &
Exemples corrects :
<a>si x < y alors z = 0</a>

<citation>"Être ou ne pas être, telle est la
question."</citation>
<titre>Martin & fils</titre>
<a>si x < y alors z = 0</a>

<citation>"Être ou ne pas être, telle est la question."</citation>
<titre>Martin & fils</titre>
Signalons enfin qu'il existe d'autres règles concernant la dénomination des éléments. Par
exemple, le nom d'une balise ne peut pas commencer par un chiffre. Cependant, nous ne
détaillerons pas ces règles ici puisqu'elles ne concernent que les concepteurs de langages
XML et non leurs utilisateurs.
Un document valide par rapport à une DTD est un document :
 bien formé, c'est-à-dire qui respecte les règles syntaxiques décrites précédemment
 qui respecte les contraintes définies dans la DTD (balises et attributs permis, règles
d'imbrication des éléments du langage, etc.)
En d'autres termes, un document valide respecte d'une part les règles communes à tous les
langages XML et d'autre part les règles spécifiques au langage XML dans lequel il est écrit.
Créer un document bien formé est relativement facile (aux fautes de frappe près). Obtenir un
document valide est souvent plus difficile car cela impose de connaître et de respecter
scrupuleusement toutes les règles du langage. Il existe heureusement des outils de validation
automatiques permettant au développeur de corriger rapidement ses documents.
Chapitre 3. Le langage XHTML

Table des matières

2. DTD
4. Entête
5. Corps
5.3.1. Emphase
5.3.2. Citations
5.3.4. Informatique
5.4. Listes
5.5. Liens
5.6. Images
5.7. Tableaux
5.8. Formulaires
5.9. Objets
6. Document récapitulatif
7. Évolutions futures
Entrons maintenant dans le vif du sujet avec le langage de création de pages web XHTML.
XHTML est un langage XML. Toutes les notions qui ont été abordées au chapitre précédent
sont donc applicables au XHTML. Ceci va faciliter considérablement la présentation du
langage, puisque nous connaissons déjà ses règles syntaxiques de base. Il nous reste à
découvrir les balises qu'il utilise (et leurs attributs) ainsi que les contraintes sur leur
ordonnancement.

Le langage XHTML a été créé par le World Wide Web Consortium, plus connu sous le nom
de W3C. Il s'agit d'un consortium industriel fondé en 1994. Le W3C effectue un travail de
normalisation et de recommandation, dans le but d'améliorer le niveau d'interopérabilité et
d'accessibilité du web.
Pour en savoir plus : Les buts du W3C
Le W3C a publié les spécifications de la version 1.0 de XHTML en 2000. Le langage est
décliné en trois versions, qui possèdent chacune une DTD : Strict, Transitional et Frameset.
Seule la version Strict respecte l'esprit du XML, à savoir décrire la structure et la sémantique
d'un document, et non sa présentation. Les deux autres versions ont été créés dans le but de
proposer une équivalence complète aux différentes variantes du langage HTML 4.01. Ce
langage possède en effet trois versions : Strict, Transitional et Frameset.
En 2001, le W3C publie les spécifications de la version 1.1 de XHTML. Les changements par
rapport au XHTML 1.0 Strict sont peu nombreux :
 les éléments du langage restent les mêmes, mais ils sont regroupées en modules
fonctionnels (c'est pourquoi le XHTML 1.1 est appelé XHTML modulaire)
 deux attributs obsolètes disparaissent
 l'annotation ruby, utilisé par certaines langues asiatiques, est introduite
À l'attention de celles et ceux qui connaissent bien le langage HTML et ses différentes
normes, voici un tableau récapitulant les équivalences entre XHTML et HTML. Les versions
mentionnées sur une même ligne possèdent les mêmes fonctionnalités :
Normes XHTML Normes HTML

- HTML 3.2 (1997)
- HTML 4.0 (1997)
XHTML 1.0 Frameset (2000) HTML 4.01 Frameset (1999)
XHTML 1.0 Transitional (2000) HTML 4.01 Transitional (1999)
XHTML 1.0 Strict (2000) HTML 4.01 Strict (1999)
XHTML 1.1 (2001) -
Dans ce cours, nous étudierons la version la plus récente du langage XHTML, à savoir le
XHTML 1.1.
Note
Tous les exemples présentés dans la suite sont valides pour les versions 1.1 et 1.0 Strict du
langage XHTML, qui sont très proches l'une de l'autre.
2. DTD
Les spécifications du XHTML 1.1 sont publiées par le W3C dans la DTD disponible à
l'adresse : http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd
La déclaration de la DTD s'effectue en insérant la mention suivante dans le document à
réaliser :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

L'élément racine d'un document XHTML s'appelle html. Il a obligatoirement deux enfants :
head suivi de body. head constitue l'entête du document et contiendra diverses informations
sur celui-ci. body est le corps du document et englobera tout son contenu textuel.
L'élément head possède un seul enfant obligatoire, qui doit être son premier descendant :
title (titre du document). Quant à l'élément body, il ne doit pas être vide, c'est-à-dire qu'il
doit compter au moins un enfant parmi ceux qui sont permis par la DTD. L'élément p, qui
définit un paragraphe de texte, étant généralement le plus courant dans le corps d'une page, on
considère par convention que body doit au moins posséder un élément enfant p.
En n'oubliant pas le prologue XML et la déclaration de la DTD du langage, on déduit de ce

qui précède la structure minimale d'un document XHTML vide :
<?xml version="1.0" encoding="iso-8859-15"?>

<html>
<head>
<title></title>
</head>
<body>
<p></p>
</body>
</html>
Remarquons que la valeur de l'attribut encoding du prologue est donnée ici à titre indicatif. Le
jeu de caractères employé dans le document dépend en effet de l'éditeur de texte utilisé pour
écrire celui-ci et de la configuration de ce logiciel. Selon les cas, on pourra aussi employer
l'encodage iso-8859-1, UTF-8 ou d'autres encore. Il revient à l'auteur du document d'adapter
la valeur de l'attribut encoding en fonction de la configuration qu'il utilise.
Signalons également que le prologue XML, et donc la déclaration de jeu de caractères

employé dans le document, n'est pas correctement interprété par certains navigateurs anciens.
Afin de s'assurer que cette information sera prise en compte dans tous les cas, il est donc
prudent de répéter la déclaration correspondante. Ceci peut être effectué dans l'entête du
document, grâce à une balise meta sur laquelle nous reviendrons plus tard :
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
L'élément racine html possède deux attributs recommandés. Le premier est xmlns, qui définit
l'espace de nommage de l'élément (et donc du document). Cette notion ne peut être abordée
dans le cadre de ce cours, mais une référence est donnée en fin de section pour en savoir plus.
Le second attribut est xml:lang. Il définit la langue dans laquelle le contenu de l'élément (et
donc du document) est rédigé. Les valeurs permises sont des chaînes de deux caractères
répertoriées par la norme ISO 639-1 : fr pour le français, en pour l'anglais, de pour
l'allemand, etc. La balise html ouvrante s'écrira donc de préférence ainsi :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
On en déduit la structure recommandée d'un document XHTML vide, destiné à accueillir un

contenu rédigé en français :
?xml version="1.0" encoding="iso-8859-15"?>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-15" />
</head>
<body>
<p></p>
</body>
</html>
Afin de ne pas avoir à saisir ce squelette pour chaque nouvelle page créée, il est bon de le
stocker dans un fichier. Le voici : xhtml_page_minimale_recommandee.html
On notera au passage que l'extension d'un fichier XHTML est « .html ». Les extensions
« .xhtml » et « .htm » sont aussi parfois utilisées.
Pour en savoir plus : Introduction aux espaces de noms XML
4. Entête
L'entête du document est délimité par les balises <head> et </head>. Il peut contenir des
informations diverses sur celui-ci, mais aussi des références à d'autres fichiers.
Comment l'a vu, le seul élément obligatoire dans un entête, et celui qui doit apparaître en
premier, est le titre du document. Exemple :
<title>Université de Picardie Jules Verne - Présentation</title>
Une bonne pratique est de donner un titre composé de deux parties séparées par un tiret. La
première rappelle le nom du site et la seconde indique le thème de la page. Le titre est la seule
information contenue dans l'entête qui sera affichée par le navigateur. Cet affichage est réalisé
dans une zone appelée barre de titre, située en haut de la fenêtre. Dans les navigateurs
modernes proposant des onglets, le titre de la page, éventuellement tronqué à droite, s'affiche
également dans l'onglet :
Les autres éléments de l'entête sont optionnels et peuvent apparaître dans n'importe quel
ordre. Les éléments les plus utilisés sont meta, link et script.
L'élément meta permet d'inclure toutes sortes d'informations concernant le document. Ces
informations pourront être utilisées par le navigateur ou par les moteurs de recherche. Chaque
élément meta prend la forme d'un couple propriété-valeur. Le nom de la propriété est défini
par les attributs name ou http-equiv. La valeur est définie par l'attribut content. Voici quelques
exemples courants.
L'encodage du document (jeu de caractères) :

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
15" />
Le nom de l'auteur de la page :
<meta name="author" content="Jean Martin" />
Une description du contenu de la page sous la forme d'une phrase courte :
<meta name="description" content="une brève présentation
de l'Université de Picardie" />
Une liste des principaux mots-clés associés au contenu de la page :
<meta name="keywords" content="université, Picardie, Amiens,
présentation, implantations" />
L'élément link permet de définir un lien avec un autre document. Il est le plus souvent
employé pour désigner une feuille de style externe, qui sera utilisée lors du rendu de la page
dans le navigateur. Exemple :
<link rel="stylesheet" type="text/css"

href="https://pedag.u-picardie.fr/moodle/upjv/pluginfile.php/169996/
mod_page/content/1/foad.u-picardie.fr/ines/foadF/eMiage-M2-Amiens/4322/
html/css/general.css" media="screen" />
Les feuilles de style et leur utilisation seront étudiées dans la séquence de cours suivante.
Enfin, l'élément script permet d'insérer un script dans la page. Exemple avec un programme
JavaScript contenu dans un fichier externe :
<script type="text/javascript"
src="https://pedag.u-picardie.fr/moodle/upjv/pluginfile.php/169996/
html/javascript/outils.js"></script>
Notons que script peut également être utilisé dans le corps d'un document XHTML (élément
body). L'utilisation de JavaScript dans les pages web est décrite dans une autre séquence de
cours.
Tous les exemples de ce chapitre sont regroupés dans cette page.
Astuce
Si vous cliquez sur le lien précédent, votre navigateur affichera une page vide. C'est normal,
puisqu'aucun contenu n'a été placé dans le corps du document, c'est-à-dire entre les balises
<body> et </body>. L'intérêt ici est le code source. Pour le visualiser, il suffit de réaliser un
clic droit dans la page. Un menu contextuel s'affiche alors et doit comporter une ligne intitulée
« code source », « affichage de la source » ou autre mention équivalente. Sélectionner cette
option ouvre une nouvelle fenêtre contenant le code XHTML du document. Ce code peut
ainsi être étudié, sélectionné ou encore sauvegardé.
5. Corps
5.3.1. Emphase
5.3.2. Citations
5.3.4. Informatique
5.4. Listes
5.5. Liens
5.6. Images
5.7. Tableaux
5.8. Formulaires
5.9. Objets
Le corps de la page est l'endroit où doit être placé l'ensemble du contenu du document. Le
balisage XHTML permet de décrire la structure et la sémantique de ce contenu.
L'élément body (corps du document) admet un grand nombre d'éléments d'enfants. Ils sont
tous optionnels et l'ordre de leur apparition n'est pas contraint. La seule règle à respecter et
que le corps du document doit comporter au moins un élément enfant.
Presque tous les éléments qui peuvent être enfant de l'élément body sont de type bloc (block
en anglais). Un élément de type bloc délimite un contenu de taille relativement importante.
Affiché par un navigateur, ce contenu prendra la forme d'un rectangle et apparaîtra donc
comme un bloc. L'archétype de l'élément bloc est le paragraphe de texte. Lorsque l'on observe
une page de texte en prenant un peu de recul, on distingue immédiatement cette structure en
blocs de la page.
Dans le corps d'un document XHTML, des éléments d'un autre type peuvent également
apparaître : ce sont les éléments de type en ligne (inline en anglais). Un élément de type en
ligne délimite un contenu de taille réduite. Il s'agit le plus souvent d'une portion de texte, par
exemple quelques mots que l'on souhaite mettre en valeur dans une phrase. Un élément en
ligne est donc situé à l'intérieur d'un élément bloc.
Les éléments du langage XHTML qui peuvent apparaître dans le corps du document peuvent
donc être séparés en deux catégories : les éléments bloc d'une part et les éléments en ligne
d'autre part. De façon générale, les éléments blocs permettent de structurer le corps de la page.
Les éléments en ligne permettent de structurer ou de marquer sémantiquement le texte à
l'intérieur des blocs. Plus précisément :
 sauf exception, un élément bloc peut contenir des éléments blocs, des éléments en
ligne et des données (du texte)
 un élément en ligne peut contenir des éléments en ligne et des données, mais jamais
d'élément bloc
Bien que cela puisse être modifié grâce aux feuilles de style, le type de l'élément influence
également la façon dont il sera positionné par rapport aux autres lors du rendu de la page dans
un navigateur. Ainsi, les éléments blocs seront affichés les uns en dessous des autres (ex:
paragraphes successifs). En général, un espace vierge sera même inséré automatiquement à la
fin de l'affichage d'un bloc, créant une séparation visuelle avec le bloc suivant. Les éléments
en ligne seront quant à eux affichés simplement les uns à la suite des autres dans le cours du
texte (« sur la suite de la ligne », ou encore « alignés avec les éléments précédents », d'où la
dénomination « en ligne »).
Dans la suite, nous préciserons pour chaque élément présenté s'il possède le type bloc ou le
type en ligne.
Les éléments de base de toute page de texte, qu'elle soit publiée sur le web ou non, sont les
titres et les paragraphes.
Il existe six niveaux de titres possibles en XHTML. Ce sont : h1, h2, h3, h4, h5 et h6 (h est ici
l'abréviation du mot anglais header). L'élément h1 est un titre de niveau 1, qui est le niveau le
plus élevé dans la hiérarchie des titres. On l'utilise en général pour titrer la page. Les éléments
h2 peuvent être considérés comme des titres de chapitres, h3 comme des titres de sections, h4
comme des titres de sous-sections, etc. Exemple :
<h1>Présentation</h1>
Un paragraphe de texte est défini par l'élément p. Exemple :
<p>A mi-chemin entre Paris et Lille (moins d'une heure de train chacune),
à deux heures de Bruxelles, à quatre heures d'Amsterdam et à cinq heures de
Londres,
l'université de Picardie est au coeur de l'Europe.</p>
Les titres et les paragraphes sont des éléments de type bloc. Par défaut, les navigateurs
afficheront un espacement après chaque titre et chaque paragraphe. Exemple du corps d'une
page comportant un titre général et deux chapitres :
<body>
<h1>Présentation</h1>
<h2>Amiens au coeur de l'Europe</h2>
<p>
A mi-chemin entre Paris et Lille (moins d'une heure de train
chacune),
à deux heures de Bruxelles, à quatre heures d'Amsterdam et à cinq heures
de Londres, l'université de Picardie est au coeur de l'Europe.
</p>
<h2>Les sites d'implantation</h2>
<p>
L'université de Picardie Jules Verne est présente dans six
villes
de la région : Amiens, Beauvais, Creil, Saint-Quentin, Laon, Cuffies-
Soissons.
</p>
<p>Bienvenue à l'Université de Picardie !</p>
</body>
Observez le rendu de cet exemple dans votre navigateur préféré.
Note
Dans la suite, nous omettrons de faire figurer les balises <body> et </body> dans les exemple
de code, puisque tous les éléments présentés figurent dans le corps du document.
Remarquons que les sauts de ligne figurant dans le texte contenu par un élément bloc sont
ignorés lors du rendu de la page par un navigateur. Ainsi, les deux écritures suivantes
donneront un affichage identique, sur une seule ligne :
<p>Bienvenue à l'Université de Picardie !</p>
et
<p>Bienvenue
à l'Université de Picardie !</p>
Pour provoquer un saut de ligne à l'affichage sans pour autant changer de paragraphe, on
utilise l'élément sans contenu br (abréviation de l'anglais break rule). Exemple :
<p>Bienvenue<br />
à l'Université de Picardie !</p>
Dans le texte d'une page, certains mots ou certaines expressions ont un rôle particulier.
XHTML offre de nombreuses balises ayant un rôle sémantique pour les repérer. Comme on
peut s'y attendre, presque toutes délimitent des éléments en ligne.
5.3.1. Emphase
L'emphase consiste à mettre en avant une portion de texte. Il s'agit de montrer qu'un mot ou
une expression possèdent une importance particulière. XHTML offre deux niveaux de mise en
valeur : faible, avec l'élément em et forte avec l'élément strong. Exemple :
<p><em>Ce texte</em> est important, mais <strong>celui-ci</strong>

est encore plus important !</p>
5.3.2. Citations
Deux éléments permettent de définir des citations : l'élément en ligne q (pour quote en
anglais) et l'élément bloc blockquote. Le choix se fera selon la longueur de la citation et son
rôle dans le texte. Exemples :
<p>Boileau a écrit : <q>Ce qui se conçoit bien s'énonce clairement</q>.</p>
<blockquote>
<p>
Posons pour maxime que les premiers mouvements de la nature sont
toujours droits :
il n'y a point de perversité originelle dans le coeur humain.
Il ne s'y trouve pas un seul vice dont on ne puisse dire comment et
par où il est entré.
</p>
</blockquote>
Remarquons que l'élément blockquote ne peut contenir directement du texte. Ce dernier doit
être inséré dans un élément enfant de type bloc, par exemple un paragraphe.
L'élément cite permet de préciser l'auteur ou la source d'une citation. S'agissant d'un élément
en ligne, il peut être utilisé avec q comme avec blockquote. Exemple :
<p><q>Ce qui se conçoit bien s'énonce clairement.</q>

<cite>Boileau</cite></p>
XHTML n'est pas un langage adapté à l'écriture d'expressions mathématiques complexes. Il

permet cependant d'exprimer les notions d'indice et d'exposant grâce aux éléments sub et sup
respectivement. Exemples :
<p>La formule chimique du dioxyde de carbone s'écrit CO<sub>2</sub>.</p>

<p>y = x<sup>4</sup> - 3x<sup>2</sup> + 1</p>
5.3.4. Informatique
Pour repérer un fragment de code informatique dans un texte, on utilise l'élément en ligne
code. Exemple :
<p>Les instructions <code>a=b-a; b=a; a=b+a;</code> permettent d'inverser

les valeurs des variables a et b sans déclarer de variable
supplémentaire.</p>
L'élément en ligne var est plus spécifique et permet d'indiquer le nom d'une variable ou d'un
paramètre. Exemple :
<p>N'oublions pas d'initialiser <var>$compteur</var> à zéro.</p>
Pour faire figurer du code source comportant plusieurs lignes dans une page XHTML, on a
recours à l'élément pre (abréviation de l'anglais preformatted). pre est un élément bloc
particulier. Le texte qu'il contient est affiché dans un navigateur tel qu'il figure dans le fichier
XHTML. Ainsi, les passages à la ligne et les tabulations sont ici pris en compte. Exemple :
<p>Un tout petit programme en langage C :</p>

<pre>
int main(void) {
return 0;
}
</pre>
Rappelons que les caractères utilisés par le balisage ne peuvent pas être employés dans le
texte de la page. Si par exemple vous souhaitez publier sur le web un cours sur le langage
XHTML, les exemples de code devront être adaptés en remplaçant les caractères interdits par
des entités prédéfinies :
<p>Utilisation de la balise p :</p>

<pre><p>Ceci est un paragraphe de texte.</p></pre>
Toujours dans le domaine informatique, XHTML offre l'élément en ligne kbd (abréviation de
keyboard), qui permet de désigner des commandes à saisir au clavier. Exemple :
<p>Pour lister les fichiers du répertoire courant sous Linux,

entrez la commande <kbd>ls -l</kbd></p>
L'élément en ligne samp (abréviation de sample) repère quant à lui les sorties d'un
programme. Exemple :
<p>L'instruction <code>echo 'Bonjour';</code>

affichera tout simplement <samp>Bonjour</samp>.</p>
Terminons par trois balises en ligne dont le nom est assez facile à retenir : abbr identifie une
abréviation, acronym un acronyme et dfn un terme à définir (ou définition de terme).
Exemples :
<p><abbr>fr</abbr> est une abréviation répertoriée par

l'<acronym>ISO</acronym>
pour désigner la langue française.</p>
<p>Le <dfn>XHTML</dfn> est un langage de balisage utilisé pour réaliser des
pages web.</p>
Tous les exemples de balisage sémantique du texte ont été regroupés dans cette page.
Observez le rendu par défaut de chacun d'eux dans votre navigateur préféré. Vous
remarquerez quelques bizarreries, comme par exemple la mise entre guillemets automatique
effectuée pour les citations en ligne mais pas pour les citations dans un bloc. D'autres
éléments sémantiques ne possèdent pas de rendu spécifique par défaut et ne se distinguent pas
du texte courant. Évidemment, tout ceci peut être modifié à l'aide de feuilles de style.
5.4. Listes
Les listes simples constituent des éléments bloc à vocation uniquement structurelle. On
distingue les listes non ordonnées ul (unordered list) et les listes ordonnées ol (ordered list).
Une liste doit comporter un ou plusieurs éléments enfants li (list item). Il s'agit des éléments
de la liste, également de type bloc, qui contiennent les différentes parties du texte. Reprenons
l'exemple de la recette de l'oeuf à la coque :
<h1>Recette de l'oeuf à la coque</h1>

<h2>Ingrédients</h2>
<ul>
<li>un oeuf bien frais</li>
<li>du pain</li>
<li>du sel</li>
</ul>
<h2>Préparation</h2>
<ol>
<li>faire bouillir de l'eau</li>
<li>y plonger l'oeuf et déclencher le minuteur</li>
<li>découper le pain en mouillettes</li>
<li>retirer l'oeuf après 2 minutes de cuisson</li>
<li>dans un coquetier, casser son extrémité supérieure</li>
<li>saler légèrement et déguster avec les mouillettes</li>
</ol>
Lors du rendu du document par défaut, une liste non ordonnée sera représentée par une liste à
puces, tandis qu'une liste ordonnée sera représentée sous la forme d'une liste numérotée.
Une liste de définitions possède un rôle à la fois structurel et sémantique. Elle est spécifiée par
l'élément bloc dl (definition list). Une liste de définitions doit comporter une ou plusieurs
paires d'éléments enfants dt (definition term) et dd (definition description), qui sont tous deux
de type bloc. dt contient le terme à définir et dd contient le texte de sa définition. Notons
qu'un même terme peut posséder plusieurs définitions différentes (un seul élément dt,
plusieurs éléments dd). De même, une définition unique peut correspondre à plusieurs termes
différents (plusieurs éléments dt, un seul élément dd). Exemple, avec la définition française
de quelques verbes du patois Picard :
<p>Un peu de Picard :</p>

<dl>
<dt>Acoufter (v.)</dt>
<dd>Recouvrir</dd>
<dd>Habiller</dd>
<dt>Acouter (v.)</dt>
<dd>Écouter</dd>
<dt>Acquiérer (v.)</dt>
<dt>Caire (v.)</dt>
<dt>Querre (v.)</dt>
<dd>Aimer</dd>
</dl>
Les trois exemples de listes précédents sont regroupés dans cette page.
Note
Les listes de définitions ne servent pas uniquement à écrire des glossaires ou des lexiques.
Elles peuvent être employées par exemple pour mettre en forme un dialogue ou une interview.
L'élément dl possède alors un rôle uniquement structurel. L'article suivant présente encore
d'autres types d'utilisation : Les listes de définitions : mal utilisées ou mal comprises ?
5.5. Liens
Nous voici parvenus au coeur du langage XHTML : les liens hypertextes ou hyperliens ou
tout simplement liens. Permettant de lier une page avec n'importe quel autre document, ils
sont sans doute à l'origine du formidable succès qu'a rencontré le web.
Un lien est inséré à l'aide de l'élément en ligne a (abréviation de l'anglais anchor). La balise
ouvrante a comporte l'attribut obligatoire href, qui spécifie l'adresse de la page désignée par le
lien (URL du document cible). L'élément a possède également des attributs optionnels qui
peuvent être utiles dans certains cas. Citons notamment :
 hreflang et/ou xml:lang : spécifient la langue du document cible (utile si elle est
différente de la langue utilisée dans le document source)
 title : donne une brève description du document désigné par le lien, généralement
affichée sous forme d'une info-bulle lors du survol du lien par le pointeur de souris
 type : précise le type MIME du document cible (utile si ce dernier ne peut être
interprété par le navigateur, comme un fichier ZIP, PDF, etc.)
On peut distinguer plusieurs catégories de liens : les liens vers d'autres sites, les liens vers
d'autres pages du même site, les liens internes à une page et enfin les liens spéciaux.
Exemple de lien vers un autre site, également appelé lien externe :
<p>Pour plus d'informations, consultez

le site du <a href="http://www.w3.org" hreflang="en">W3C</a>.</p>
Le lien ci-dessus désigne le nom de domaine d'un site, ce qui est équivalent à un lien vers sa
page d'accueil. On peut aussi créer des liens directs vers toute autre page ou rubrique d'un
site :
<p>Pour plus d'informations, consultez

le site du <a href="http://www.w3.org" hreflang="en">W3C</a>,
en particulier la rubrique consacrée
aux <a href="http://www.w3.org/MarkUp/" hreflang="en">
langages de balisage pour le web</a>.</p>
Quand un lien est défini entre deux pages d'un même site (lien interne), on peut se contenter
d'indiquer le nom du fichier cible comme valeur de l'attribut href. Exemple :
<p>N'hésitez pas à <a

html/contact.html">nous contacter</a> !</p>
Les choses se compliquent un peu lorsque la page cible ne se trouve pas dans le même
répertoire que la page source. Il faut dans ce cas indiquer le chemin relatif du fichier source
vers le fichier cible, en utilisant des barres obliques (écriture POSIX) et non des barres
obliques inversées (écriture Windows). Exemple avec un fichier cible se trouvant dans un
sous-répertoire nommé produits :
<p><a href="https://pedag.u-picardie.fr/moodle/upjv/pluginfile.php/169996/
html/produits/disques.html">Disques durs</a></p>
Plutôt que de pointer vers l'ensemble d'une page, on peut vouloir créer un lien vers un endroit
précis du document, par exemple le début d'un chapitre particulier. Pour cela, la page cible
doit comporter une ancre. Une ancre est définie par l'élément a, mais en utilisant cette fois
l'attribut id. Exemple :
<h2><a id="promo">Fins de stock en promotion</a></h2>

id est l'identifiant de l'élément. Il s'agit d'un nom (ou étiquette) qui permet de l'identifier dans
la page. De manière à ne pas créer d'ambiguïté, deux éléments ne peuvent pas posséder le
même identifiant dans la même page. En d'autres termes, la valeur donnée à un attribut id ne
peut apparaître qu'une seule fois dans un même document XHTML.
Pour créer un lien vers une ancre placée dans une page cible, on fait suivre le nom du fichier
cible du signe dièse et du nom de l'ancre. Exemple :
<p><a href="https://pedag.u-picardie.fr/moodle/upjv/pluginfile.php/169996/
html/produits/disques.html#promo">Disques durs</a> en promotion !</p>
Notons que cette technique permet également de créer des liens internes à une page. Dans ce
cas, on peut omettre le nom du fichier cible. Exemple d'un lien placé en fin de page et
permettant de retourner au début d'un seul clic :
Déclaration de l'ancre au début du premier élément bloc...
<h1><a id="haut"></a>Les liens</h1>
...et, plus bas dans la page, déclaration du lien vers cette ancre :
<p><a href="#haut">Haut de page</a></p>
Terminons ce tour d'horizon avec les liens spéciaux. Ceux-ci n'utilisent pas le protocole HTTP
et vont déclencher l'exécution d'un autre logiciel. L'exemple le plus courant est celui d'un lien
de type mailto, qui va ouvrir le logiciel de messagerie configuré par défaut :
<p><a href="mailto:nicolas.royackkers AT u-picardie POINT fr ">Contacter

l'auteur</a>
du cours</p>
Avertissement
Des programmes robots parcourent en permanence le web afin de récolter les adresses
électroniques figurant dans les sites et les inscrire dans les carnets d'adresses de spammeurs.
Leur technique est simple : rechercher dans le code les chaînes de caractères comportant le
caractère @ et au moins un point. Faire figurer en clair une adresse électronique dans une
page web provoquera donc rapidement l'envahissement du compte de courrier correspondant
par d'innombrables messages non sollicités. Afin d'éviter ce fléau, il faut rendre l'adresse
illisible pour les robots en réalisant un encodage de celle-ci. Différentes méthodes, plus ou
moins complexes, peuvent être utilisées dans ce but. Pour en savoir plus, consultez par
exemple : Coder les adresses email dans vos pages web.
Tous les exemples de code précédents sont réunis dans cette page. On constate que les liens
sont rendus en bleu et soulignés par défaut. Ceci a le mérite d'être très repérable, mais cette
représentation n'est pas des plus lisibles et se révèle parfois peu esthétique (selon la charte
graphique du site). Là encore, les feuilles de style viendront à notre secours en temps voulu.
5.6. Images
Les navigateurs sont capables d'afficher des images dans les pages web. Les formats d'image
supportés nativement par tous les navigateurs sont au nombre de trois : GIF, PNG et JPEG.
Les deux premiers sont des formats utilisant une compression sans perte, le troisième offre
une compression bien supérieure (dont le taux est réglable), mais au prix de la perte de
certains détails de l'image.
Les images ne peuvent pas être codées directement dans un document XHTML : chaque
image à insérer doit être stockée dans un fichier séparé. On y fait référence dans la page grâce
à l'élément img (abréviation de image). img est un élément en ligne et sans contenu (balise
auto-fermante). Il comporte deux attributs obligatoires :
 src : l'adresse du fichier contenant l'image à afficher

 alt : un texte court décrivant le contenu de l'image ; cet attribut est indispensable pour
les périphériques de sortie non visuels (plage Braille, synthétiseur vocal, etc.) ou
encore les navigateurs n'affichant pas les images
Exemple :
<p><img
html/images/tournesols.jpg" alt="champ de tournesols" /></p>
L'élément img comporte différents attributs optionnels, dont on peut citer :
 longdesc : une description de l'image sous la forme d'un texte long (complète si besoin
la description fournie par alt)
 height : hauteur d'affichage de l'image, en pixels
 width : largeur d'affichage de l'image, en pixels
Bien que l'utilisation de height et width soit courante, elle est déconseillée en pratique. En
effet, ces attributs sont généralement employés pour afficher une image avec des dimensions
différentes de ses dimensions normales. Or, cela provoque un redimensionnement qui, d'une
part, ralentit le rendu de l'image à l'écran et d'autre part provoque une interpolation par le
navigateur. L'image apparaît alors pixellisée, voire déformée si ses proportions n'ont pas été
respectées. Il est donc préférable de traiter une image au préalable pour lui donner les
dimensions voulues plutôt que de forcer un affichage redimensionné dans le navigateur.
Éventuellement, les attributs height et/ou width peuvent être utilisés par sécurité, dans le cas
où les dimensions d'une image sont critiques dans la présentation d'une page.
Il est facile de combiner des éléments a et img pour créer une image cliquable, c'est-à-dire un
lien hypergraphique et non hypertexte. Il suffit de placer une image comme contenu d'un lien.
Exemple :
<p>
<a
html/horticulture.html">
<img
html/images/plants_en_pots.jpg"
alt="pots de terre et jeunes plantes"
title="Accéder à la rubrique horticulture" />
</a>
</p>
Un clic de souris en n'importe quel point de l'image entraînera le chargement de la page

désignée par le lien. L'emploi de l'attribut title de l'élément img est recommandé dans ce cas.
Il permet d'afficher des instructions ou des informations dans une info-bulle lors du survol de
l'image par le pointeur de souris. La plupart des navigateurs afficheront par défaut les images
cliquables entourées d'une bordure bleue, comme on peut le constater dans cette page.
Note
Il est également possible d'associer plusieurs liens à une même image. Pour cela, on définit
d'abord différentes zones dans l'image à l'aide de l'élément map. Ensuite, on fait référence à
cette carte à l'aide de l'attribut usemap de img. Sans même utiliser d'élément a, chaque zone de
l'image devient alors cliquable et peut conduire vers une page différente.
Cette technique est assez lourde à mettre en oeuvre, mais elle est très utile dans certains cas.
Son emploi le plus courant est de rendre interactive la carte d'une région ou d'un pays, où l'on
pourra cliquer directement sur certaines zones (ex : noms de villes) afin d'obtenir des
renseignements sur l'endroit désigné. Pour en savoir plus, voir par exemple : Graphiques
composés de liens ou cartes cliquables (image maps). Attention toutefois au code proposé : il
est écrit en HTML et non en XHTML.
5.7. Tableaux
En matière de création web, les tableaux possèdent une réputation sulfureuse. En effet, ils ont
longtemps été détournés de leur emploi normal pour servir à agencer les pages. Ainsi, un
document était souvent découpé en une multitude de cellules de tableaux imbriqués, chacune
d'elles permettant de positionner précisément un élément de la page. Bien qu'efficace sur le
plan visuel, cette technique de mise en page bafouait le rôle sémantique des tableaux et
produisait un code excessivement lourd et difficile à maintenir. Très populaire dans la
seconde moitié des années 90, elle a été rendue obsolète par la généralisation des feuilles de
style. Pour en savoir plus, consultez par exemple cet excellent article : En quoi la mise en
page par tableaux est-elle stupide ?
Cela étant précisé, les tableaux restent utiles pour présenter des données naturellement
tabulaires, que ce soit dans un document bureautique ou une page web. En XHTML, on insère
un tableau à l'aide de l'élément table. Ensuite, on définit les lignes du tableau à l'aide
d'éléments tr (table row). Enfin, on définit les cellules de chaque ligne à l'aide d'éléments td
(table data). Un tableau doit comporter au moins une ligne (élément enfant tr) et une ligne
doit compter au moins une cellule (élément enfant td). Exemple :
<table>
<tr>
<td>Allemagne</td>
<td>82</td>
</tr>
<tr>
<td>Danemark</td>
<td>5</td>
</tr>
<tr>
<td>Pays-Bas</td>
<td>16</td>
</tr>
</table>
Consultez cet exemple
La représentation par défaut est minimaliste : l'affichage des données occupe la place
strictement nécessaire et le contour (ou bordure) des cellules n'est pas dessiné par la plupart
des navigateurs. On pourra facilement modifier cela grâce aux feuilles de styles.
Alternativement, on peut aussi utiliser les attributs border (largeur de la bordure) et width
(largeur du tableau) de l'élément table.
Il est souvent utile d'ajouter un entête au tableau décrivant la nature des données qu'il contient.
Cela peut être effectué en insérant en première position une ligne (élément tr) qui contiendra
des cellules particulières définies à l'aide d'éléments th (table header) et non td. On peut
également donner un titre au tableau grâce à l'élément caption, qui, s'il est employé, doit être
le premier élément enfant de l'élément table.
La présentation de données numériques en colonnes impose de pouvoir spécifier l'alignement

des nombres. Pour cela, les éléments table, tr, th et td possèdent un attribut align. Les
valeurs les plus courantes qu'il peut prendre sont left, center et right, spécifiant
respectivement un alignement du contenu à gauche, au centre et à droite. Si des valeurs
d'alignement différentes sont définies dans divers éléments du tableau, la valeur d'alignement
d'un élément l'emporte sur celle de ses ancêtres. Exemple :
<table border="1">
<caption>Peuplement de trois pays d'Europe</caption>
<tr>
<th>Pays</th>
<th>Population (en millions)</th>
</tr>
<tr>
<td>Allemagne</td>
<td align="right">82</td>
</tr>
<tr>
<td>Danemark</td>
</tr>
<tr>
<td>Pays-Bas</td>
</tr>
</table>
Comme dans les logiciels tableurs, XHTML permet de créer des tableaux dont certaines
cellules sont fusionnées, c'est-à-dire réunies en une seule. Pour fusionner plusieurs cellules
d'une même ligne, on utilise l'attribut colspan d'un élément td (ou th). La valeur de cet
attribut est le nombre de cellules situées à droite de la cellule courante à réunir avec celle-ci.
Exemple :
<table border="1">
<caption>Notes du second trimestre</caption>
<tr>
<th>Prénom</th>
<th>Maths</th>
<th>Français</th>
</tr>
<tr>
<td>Bianca</td>
</tr>
<tr>
<td>Mamadou</td>
</tr>
<tr>
<td>Jules</td>
<td colspan="2" align="center">absent</td>
</tr>
</table>
De manière similaire, il est possible de fusionner des cellules appartenant à une même
colonne grâce à l'attribut rowspan de l'élément tr :
<table border="1">
<caption>Notes du second trimestre</caption>
<tr>
<th>Prénom</th>
<td>Bianca</td>
<td>Mamadou</td>
<td>Jules</td>
</tr>
<tr>
<th>Maths</th>
<td rowspan="2">absent</td>
</tr>
<tr>
<th>Français</th>
</tr>
</table>
Tous les exemples précédents sont regroupés dans cette page.
5.8. Formulaires
Les formulaires permettent de saisir des données dans une page web. Celles-ci sont ensuite
envoyées au serveur HTTP pour être traitées. Effectuer une recherche par mots-clés, s'inscrire
à un site ou encore envoyer un courrier électronique depuis une page sont quelques
utilisations des formulaires parmi les plus courantes.
On introduit un formulaire dans un document XHTML grâce à l'élément bloc form. Il possède
un attribut obligatoire, action, dont la valeur est l'adresse du programme qui traitera le
formulaire sur le serveur. Dans les premières années du web, ces programmes étaient appelés
scripts CGI et réalisés le plus souvent en langage C, en langages shell ou en Perl. De nos
jours, le traitement des données issues d'un formulaire est presque toujours confié à un script
PHP.
Il est recommandé de spécifier un autre attribut de l'élément form. Il s'agit de method, qui
définit la méthode d'envoi des données vers le serveur. Deux valeurs sont possibles : get ou
post. La méthode get est sélectionnée par défaut mais elle ne permet pas de transmettre plus
de 255 caractères de données. La méthode post, qui ne souffre pas de cette limitation, est
généralement la mieux adaptée aux formulaires. La balise ouvrante d'un formulaire s'écrira
donc par exemple :
<form method="post" action="traitement.php">
Un formulaire est composé d'une ou plusieurs zones de saisie. Chacune d'elle est formée d'un
champ de saisie et d'un texte indiquant le rôle de ce champ. L'élément en ligne label définit
ce texte. Quant au champ de saisie, il sera la plupart du temps introduit grâce à l'élément en
ligne input. L'ensemble est contenu dans un élément bloc quelconque, comme un
paragraphe. Exemple d'un formulaire de recherche comportant une seule zone de saisie :
<form method="post" action="rechercher.php">

<p>
<label>Rechercher : </label>
<input type="text" name="recherche" />
</p>
</form>
L'attribut name de l'élément input permet de donner un nom au champ de saisie. Ce nom est
indispensable au programme qui traitera les données du formulaire du côté serveur. L'attribut
type définit la nature du champ de saisie. Les valeurs les plus courantes de cet attribut sont les
suivantes :
 submit : bouton d'envoi du formulaire

 text : saisie de texte sur une seule ligne
 password : saisie d'un mot de passe
 checkbox : case à cocher
 radio : case d'option (ou bouton radio)
Un formulaire doit toujours comporter au moins un bouton d'envoi. Il permet de soumettre les
données saisies dans le formulaire au programme destiné à les traiter sur le serveur. Un
bouton d'envoi est un élément input de type submit. L'attribut value permet de préciser si
besoin le texte affiché dans le bouton. Ce dernier peut éventuellement tenir lieu de seul texte
indiquant le rôle du champ de saisie (omission de l'élément label). Exemple :
<form method="post" action="rechercher.php">
<p>
<input type="text" name="recherche" />
<input type="submit" value="Rechercher" />
</p>
</form>
Essayez ce formulaire
Notons que deux attributs supplémentaires peuvent se révéler utiles :
 size : définit la largeur de la zone de saisie affichée, en nombre de caractères

 maxlength : spécifie la longueur maximale du texte qui pourra être tapé dans la zone ;
ceci est souvent utilisé pour l'entrée de nombres dont la taille est connue (ex : numéro
de téléphone, de carte bancaire, etc.).
Exemple :
<form method="post" action="connexion.php">

<p>
<label>Identifiant (5 chiffres)</label>
<input type="text" name="identifiant" size="7" maxlength="5" />
<input type="submit" value="Connexion" />
</p>
</form>
Un champ de saisie de type password est affiché comme un champ de type text, mais les
caractères saisis au clavier ne sont pas affichés en clair à l'écran. Ils sont généralement
remplacés par des étoiles, pour des raisons de confidentialité. Exemple d'un formulaire de
connexion :
<form method="post" action="connexion.php">

<p>
<label>Identifiant</label><br />
<input type="text" name="identifiant" size="10" />
</p>
<p>
<label>Mot de passe</label><br />
<input type="password" name="mot_de_passe" size="10" /><br />
</p>
<p>
<input type="submit" value="Connexion" />
</p>
</form>
Un élément input de type checkbox définit une case à cocher dans un formulaire. Elle
fournit à l'utilisateur un choix booléen sur une option (c'est-à-dire, un choix de type « vrai ou
faux » ou « oui ou non »). L'attribut optionnel checked="checked" permet de spécifier si la
case sera initialement cochée (elle ne l'est pas par défaut). Exemple :
<form method="post" action="traite_options.php">

<p>Choisissez vos options :</p>
<p>
<input type="checkbox" name="jantes_alliage" />
<label>Jantes alliage</label> <br />
<input type="checkbox" name="peinture_metal" />
<label>Peinture métallisée</label> <br />
<input type="checkbox" name="clim_auto" />
<label>Climatisation automatique</label> <br />
<input type="checkbox" name="gps" />
<label>Système GPS</label> <br />
<input type="checkbox" name="assistance" checked="checked" />
<label>Assistance 24h/24 (gratuit)</label>
</p>
<p>
<input type="submit" value="Confirmer" />
</p>
</form>
Les boutons d'options, ou boutons radio, fonctionnent par groupe (groupe d'options ou zone
d'options). Ils permettent de proposer une liste de valeurs parmi lesquelles une seule peut être
sélectionnée. Un bouton d'option est défini à l'aide d'un élément input de type radio. Tous
les boutons d'un même groupe doivent posséder le même nom, c'est-à-dire la même valeur
pour leur attribut name. C'est la valeur de l'attribut value qui fera la différence entre les
différentes options proposées. Comme dans les cases à cocher, l'attribut checked="checked"
permet éventuellement de présélectionner une des options dans la liste. Exemple :
<form method="post" action="choix_genre.php">

<p>Vous êtes :</p>
<p>
<input type="radio" name="genre" value="femme" checked="checked"/>
<label>une femme</label> <br />
<input type="radio" name="genre" value="homme"/>
<label>un homme</label> <br />
</p>
<p>
<input type="submit" value="Valider" />
</p>
</form>
Comme on le voit, l'élément input est très polyvalent. Il existe toutefois deux autres éléments
permettant d'insérer des champs de saisie dans un formulaire. Le premier s'appelle textarea
et définit une zone de saisie de texte sur plusieurs lignes. Les attributs rows et cols permettent
éventuellement de spécifier respectivement le nombre de lignes du champ de saisie et le
nombre de caractères de chaque ligne. Exemple :
<form method="post" action="remarques.php">

<p>
<label>Vos remarques complémentaires :</label> <br />
<textarea name="texte_reclamation" rows="8" cols="50"></textarea>
</p>
<p>
</p>
</form>
Une liste déroulante joue le même rôle qu'une zone d'options : présenter une liste de valeurs
parmi lesquelles une seule peut être sélectionnée. La différence réside dans le fait que la liste
n'est ici affichée qu'à la suite d'une action de l'utilisateur (frappe sur la touche Entrée ou clic
de souris). En général, on choisit une liste déroulante lorsque le nombre de valeurs possibles
est grand (exemple courant : liste de tous les pays du monde). Une liste déroulante est
introduite dans un formulaire grâce à un élément select, auquel on n'oubliera pas de donner
un nom grâce à l'attribut name. La liste doit comporter au moins un élément enfant option,
qui définit une valeur sélectionnable dans la liste. La valeur de l'attribut value permet de
distinguer les éléments option les uns des autres. L'attribut selected="selected" permet
éventuellement de présélectionner une des valeurs dans la liste. Exemple :
<form method="post" action="mois_naissance.php">

<p>
<label>Quel est votre mois de naissance ? </label> <br />
<select name="mois">
<option value="1">Janvier</option>
<option value="2">Février</option>
<option value="3">Mars</option>
<option value="4">Avril</option>
<option value="5">Mai</option>
<option value="6">Juin</option>
<option value="7">Juillet</option>
<option value="8">Août</option>
<option value="9">Septembre</option>
<option value="10">Octobre</option>
<option value="11">Novembre</option>
<option value="12">Décembre</option>
</select>
</p>
<p>
</p>
</form>
Cette page regroupe tous les exemples que nous venons d'étudier.
5.9. Objets
En XHTML, les objets sont des données dont le format n'est pas géré par le langage et ne
seront pas affichables directement par les navigateurs. Exemples : animations Flash, applets
Java, vidéos, sons, images utilisant un format exotique, etc.
Le contenu des objets peut être affiché dans le navigateur grâce a un plug-in (ou greffon)... à
condition que ce logiciel optionnel ait été préalablement installé par l'internaute ! On n'est
donc jamais assuré que les données contenues dans les objets pourront être consultées par un
visiteur du site. C'est pourquoi il vaut mieux y recourir avec prudence et prévoir dans la
mesure du possible un contenu alternatif.
Un objet est inséré dans une page web grâce à l'élément en ligne object. Ses principaux
attributs sont :
 data : l'adresse du fichier contenant l'objet

 type : le format de l'objet, exprimé sous forme d'un type MIME
 height et width : la hauteur et la largeur de la zone d'affichage de l'objet, en pixels
 standby : un message affiché pendant le chargement de l'objet (qui peut être long)
Exemple de l'insertion d'une animation Flash dans un document XHTML :
<p>
<object data="flash/flash-france.swf"
type="application/x-shockwave-flash"
width="300" height="100"
standby="Animation en cours de chargement...">
</object>
</p>
Si l'objet est un programme (par exemple une applet Java ou animation Flash) et accepte des
arguments, il est possible de lui transmettre via le code XHTML. On utilise pour ce faire un
ou plusieurs élément param, en les déclarant comme éléments enfants de l'élément object.
Chaque élément param définit un paramètre à transmettre lors de l'exécution de l'objet. Son
attribut name spécifie le nom du paramètre et son attribut value sa valeur.
Le contenu de l'élément object (situé entre sa balise ouvrante et sa balise fermante) ne sera
affiché que si le visiteur ne possède pas de plug-in adéquat pour visualiser l'objet. Il est donc
recommandé d'y placer un texte avertissant l'internaute que son ordinateur ne pourra pas
afficher ce contenu.
Exemple :
<p>
<object data="flash/flash-france.swf"
type="application/x-shockwave-flash"
width="300" height="100"
standby="Animation en cours de chargement...">
<param name="quality" value="high" />
Cette animation ne peut pas être affichée.<br />
Veuillez vérifier qu'un plug-in Flash est installé et activé dans votre
navigateur.
</object>
</p>
Cette page contient une animation Flash insérée à l'aide du code précédent.
2. Ressources en ligne
2.4. Aides-mémoire

Le W3C a défini XHTML 1.1 en décrivant ses légères différences par rapport à XHTML 1.0
Strict. Ce langage est lui-même défini par rapport à HTML 4.01 Strict :
 La spécification HTML 4.01

 XHTML 1.0 - Le langage de balisage hypertexte extensible
 XHTML 1.1 - XHTML modulaire
Seules les versions originales des recommandations du W3C, rédigées en anglais, ont valeur
normative, les traductions pouvant toujours contenir des erreurs :
 HTML 4.01 Specification

 XHTML 1.0 - The Extensible HyperText Markup Language
 XHTML 1.1 - Module-based XHTML
L'une des adresses les plus utiles concernant XHTML 1.1 est sans doute celle de cette
référence en ligne :
Hiérarchie XHTML 1.1
Une page est consacrée à chaque élément du langage. Elle permet de connaître son rôle, son
type, ses attributs obligatoires et optionnels, ses éléments parents possibles et ses éléments
enfants permis. On accède à la description de chaque balise grâce à une liste alphabétique
située en bas de page.
De nombreux sites francophones proposent des articles ou des tutoriels consacrés au langage
XHTML et aux pratiques modernes de développement web. Voici une sélection des plus
intéressants :
 Openweb
 Pompage
 Blog and blues
 Le site du zéro
 Alsacreations
2.4. Aides-mémoire
Les aides-mémoire suivants sont des documents de deux pages à imprimer. Ils fournissent la
liste de tous les éléments du langage XHTML et peuvent se révéler utiles à côté du clavier
d'un développeur web :
 XHTML 1.0 strict - Quick Reference Card

 XHTML Cheat Sheet v. 1.03
Modifié le: vendredi 22 juin 2018, 19:18

Aller à…
Université Picardie Jules Verne |
 Charte informatique |
 CGU

1-Le Langage XHTML

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

1-Le Langage XHTML

Transféré par

Droits d'auteur :

Formats disponibles

Le langage XHTML

Table des matières

1. Le World Wide Web

Chapitre 1. Le World Wide Web

1. Les fondements du web

1. Les fondements du web

Le protocole de communication du web est le HTTP, abréviation de l'anglais HyperText

2. La vie d'une page web

Chapitre 2. Les langages à balises

Au commencement était le SGML, pour Standard Generalized Markup Language. Ce langage

Le principal inconvénient de SGML est sa complexité, qui le rend difficile à apprendre et a

Concrètement, comment se comparent les deux langages XHTML et HTML ? On peut

 XHTML possède une syntaxe légèrement différente de HTML ; par exemple,

2. Les grands principes de XML

<?xml version="1.0" encoding="iso-8859-15" ?>

2.1. Éléments et balises

<recette> est une balise dont le nom est recette.

<image source="oeuf_a_la_coque.jpg" description="photo d'un oeuf à la

Autre exemple de balise utilisant un attribut dans notre recette :

2.3. Structure et représentation

Arbre des éléments XML de la recette de l'oeuf à la coque.

L'indentation facilite beaucoup l'écriture et la lecture du document par un être humain.

La première ligne du document s'appelle le prologue XML ou simplement le prologue.

<?xml version="1.0" encoding="iso-8859-15" ?>

 version : le numéro de version de la norme XML utilisée par le langage

<!DOCTYPE RML PUBLIC "-//CJM//DTD RML 1.0//FR"

 la liste de toutes les balises utilisables dans le langage

La déclaration de DTD, c'est-à-dire la déclaration du langage utilisé dans le document, doit

La troisième ligne de notre recette est un commentaire.

<!- une recette à la portée de tous -->

2.7. Document bien formé

Un document possède un élément racine et un seul.

Toute balise ouverte est refermée.

En pratique, cette règle impose de :

 ne pas oublier la balise fermante correspondant à chaque balise ouvrante

Un élément enfant est complètement inclus à l'intérieur de son parent.

<image source='oeuf_a_la_coque.jpg' description="photo d'un oeuf à la

<image source="oeuf_a_la_coque.jpg" description= />

On les remplace par des séquences de caractères spéciales, appelées entités

Caractère Entité prédéfinie

<a>si x &lt; y alors z = 0</a>

<a>si x < y alors z = 0</a>

2.8. Document valide

Un document valide par rapport à une DTD est un document :

Chapitre 3. Le langage XHTML

1. Les différentes normes

1. Les différentes normes

Pour en savoir plus : Les buts du W3C

Normes XHTML Normes HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

3. Structure d'une page

En n'oubliant pas le prologue XML et la déclaration de la DTD du langage, on déduit de ce

<?xml version="1.0" encoding="iso-8859-15"?>

Signalons également que le prologue XML, et donc la déclaration de jeu de caractères

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

On en déduit la structure recommandée d'un document XHTML vide, destiné à accueillir un

?xml version="1.0" encoding="iso-8859-15"?>

Pour en savoir plus : Introduction aux espaces de noms XML

<title>Université de Picardie Jules Verne - Présentation</title>

L'encodage du document (jeu de caractères) :

<link rel="stylesheet" type="text/css"

Tous les exemples de ce chapitre sont regroupés dans cette page.

<a>si x < y alors z = 0</a>