ALL HTML - Règles de construction en XHTML

retour

Règles de construction en XHTML

Article publié le mercredi 16 mars 2005 par ALL HTML.
Cet article est classé dans les catégories « XHTML »

Règles de bases

Au contraire du HTML, le XHTML exige de refermer toutes les balises ouvertes afin que les navigateurs sachent l'étendu de l'action de la balise influant sur la page. Il faut donc refermer toutes les balises même vides.

Ecriture des balises vides :

Les balises vides en HTML s'ecrivent par exemple <hr>, ou . En XHTML, elles s'ecrivent<hr/>, (il ne faut surtout pas oublier l'espace avant le / : la balise ne serait pas reconnue par les navigateurs ne comprenant que le HTML).

Spécificités des balises :

Certaines balises contiennent des attributs comme par exemple :
<td nowrap>texte</td> en HTML, en XHTML elle s'ecrit <td nowrap="nowrap">texte</td>.
XHTML impose le marquage de ces attributs, dans le cas où des extensions futures verraient le jour, mais également afin de permettre au langage de s'adapter aux contraintes des équipements mobiles (GSM, Pocket PC...).
En XHTML tous les attributs de type nombre doivent êtres entre guillemets, exemple <table border="1">

Fermeture des balises

La cohérence des encadrements est obligatoire. La première balise ouverte doit être la dernière fermée.
Exemple : texte en gras souligné et en italique

Exemple concret de code XHTML

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>An XHTML 1.0 Strict standard template</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
  </head>
  <body>
    <p>... Votre HTML ici ...</p>
  </body>
</html>

Ce code ressemble à du html, excépté le premier tag. On peut le saisir et le sauvegarder dans un fichier texte avec une extension .htm. On peut le lire avec n'importe quel navigateur. Il sera affiché sans erreur. XHTML utilise une syntaxe html et lorsque il s'en éloigne, la syntaxe ne sera pas rejettée par les navigateurs mais simplement ignorée.
Toutefois, il existe des éléments d'html qui sont interdits dans XHTML :

a ne peut pas contenir d'autres éléments a
pre ne peut pas contenir les éléments img, object, big, small, sub, ou sup
button ne peut pas contenir les éléments input, select, textarea, label, button, form, fieldset, iframe, ou isindex
label ne peut pas contenir d'autres éléments label
form ne peut pas contenir d'autres éléments form

XHTML peut intégrer des langages proches de l'XML comme par exemple :

SMIL (Synchronised Multimedia Integration Language)
MathML (Mathematical expressions
SVG (Scalabel Vector Graphics qui signifie Graphisme Vectoriel 2D)
RDF (Ressource Description Framework (métadonnées))

Le codage doit être rigoureux et sans erreurs. Prenons par exemple les langages, MathML et SVG, pour pouvoir les utiliser, il va falloir rajouter la ligne suivante :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">

On pourra alors utiliser toutes les combinaisons existantes du MathML et du SVG dans notre fichier XHTML. La définition des structures, modèles de document propre à l'XML, combinée à un code issu de l'HTML permettra de soulager la charge d'interprétation des navigateurs. Pour les éléments non vides, la balise de fin est obligatoire.

DTD (Document Type Definition)

Comme vu pour le XML, Un DTD (Document Type Definition) contient toutes les particularités qu'un document peut avoir quand à sa structure et sa présentation. L'information DTD peut être enregistrer dans un autre fichier texte avec une extension .dtd (par exemple, on peut dire que html est une déclaration publique DTD du SGML (html.dtd)) ou bien figurer dans le fichier texte même. Il y a une différence entre les fichiers DTD, qui sont stockés dans l'ordinateur central avec le mot clé SYSTEM, et les fichiers DTD disponibles pour tous sur le web avec le mot clé PUBLIC. La DTD spécifie l'organisation des types de données dans un fichier. Le DTD indique les attributs que peut posséder un élément.

XHTML et DTD

Le principal avantage du XHTML, c'est qu'on peut créer soi-même ses propres DTD. Un DTD appelle un module. Les éléments et attributs d'un module XHTML sont décrits à l'intérieur d'un XML NAMESPACE. Chaque module doit être désigné par un identifiant unique, c'est-à-dire que l'identifiant ne doit pas déjà exister dans tout le web. Sous XML, le contenu d'un DTD est définit sous la forme suivante :

<?xml version="1.0">
<!doctype exemple
[
  <!element exemple(generalites, definition, finalites, remarques)>
  <!element generalites(#pcdata)>
  <!element definition(#pcdata)>
  <!element finalites(#pcdata)>
  <!element remarques(#pcdata)>
]>
<exemple>
(*contenu propre de chaque élément du doctype*)
  <generalites>
    contenu
  </generalites>
  <definition>
    contenu
  </definition>
  <finalites>
    contenu
  </finalites>
  <remarques>
    contenu
  </remarques>
</exemple>

C'est le doctype exemple avec pour élément généralités, définition, finalités, remarques.
En XHTML, la création d'un nouveau DTD se fait par la définition d'un nouveau type de document :

<!element exemple:monpremierModule(#pcdata)|exemple:mondernierModule>
<!attlist exemple:monpremiermodule un attribut cdata #implied>
<!element exemple:monderniermodule empty>
<!entity %Misc.extra "|script|noscript|exemple:monpremierModule">
<!entity %xhtml11.dtd public"-//w3c//dtd xhtml 1.1//en " "http://www.w3.org/tr/xhtml11.dtd">

Il faut ensuite donner l'espace de nommage XML (XML NAMESPACE) par exemple :

<!doctype html public"-//monsite//dtd xhtml-exemple1.0//fr" "http://www.monsite.com/dtd/exemple.dtd"
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:myml="http://www.monsite.com/dtd/exemple.dtd">