Bien débuter en (X)HTLM

Bien débuter en (X)HTLM

Le (X)HTML (ou XHTLM) est le futur du web. En effet aujourd'hui vous utilisez le HTML pour créer vos pages statiques, mais il n'évoluera plus et restera figé au HTML 4.01 que nous connaissons tous et qui n'aura donc pas de successeur portant le nom de HTML. Sa « descendance » sera assurée par le XHTML, qui est amené à prendre une part de plus en plus importante dans le paysage Internet français et mondial.

Mais qu'est ce que le XHTML ?

C'est un langage qui peut de prime abord faire peur alors qu'il demeure accessible. Il n'est pas plus dur à apprendre pour un novice que le HTML. Pour l'habitué du HTML en revanche, il faut perdre certains réflexes et en acquérir d'autres. Le XHTML est, comme le HTML, un langage de balisage/marquage, n'oublions pas que HTML signifie HyperText Markup Language ; le X de XHTML signifiant eXtensible. C'est avant toute chose un langage qui sert à structurer votre document. Pour la mise en forme, il est préférable d'utiliser les feuilles de styles dont c'est la vocation unique.

La syntaxe du XHTML

voici quelques règles concernant la syntaxe du XHTML, habitués du HTML, il va falloir perdre certaines habitudes car le XHTML est plus rigoureux que le HTML, c'est la la seule différence majeure. Vous allez découvrir que de nombreuses choses sont communes aux deux langages.

Tous les noms d'éléments et d'attributs doivent être écrits en minuscules. Il n'est donc pas possible d'écrire <Html> ou encore <HTML> la syntaxe correcte sera donc <html> Les éléments doivent s'emboîter et non s'entrelacer. Le XHTML n'est pas aussi tolérant que le HTML. Il serait même plutôt allergique à toute fantaisie en la matière.

Si le code suivant est malgré tout interprété en HTML :

<p> Ecrit en <i> italique </p> </i>

Voila ce que l'on doit coder en XHTML :

<p> Ecrit en <i> italique </i> </p>

Il n'y a pas en XHTML possibilité d'omettre des balises fermantes. Le HTML permet « d'oublier » certaines balises fermantes, le XHTML est volontairement plus contraignant. Ex : le code suivant est bien géré en HTML

<p>
<ul>
<li> élément 1
<li> élément 2
<p> nouveau paragraphe

Le même code bien formé XHTML serait :

<p>
<ul>
<li> élément 1 </li>
<li> élément 2 </li>
</ul>
</p>
<p> nouveau paragraphe</p>

Les attributs d'éléments sont obligatoirement entre guillemets. Il est donc impossible en XHTML d'avoir le code suivant :

<input type=text name=nom disabled />

Le code correct sera :

<input type="text" name="nom" disabled="disabled" />

Les éléments vides doivent donc être signalés à l'aide de la fin de balise spéciale. Les éléments tels que les retours chariots <br> ou les balises <meta> sont donc revus et corrigés :

<br> devient <br />, <meta> devient <meta />

Le chevron final devant donc être précédé d'une barre oblique « / » .

La présence unique de certains éléments est impérative. Un document bien formé XHTML ne doit contenir qu'un seul élément <html>, un seul élément <head> et un seul <body>. Soit par exemple un code ressemblant à :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Mon document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
 
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit 
  in voluptate. Ut enim ad minim veniam, ut aliquip ex ea commodo consequat. Duis 
  aute irure dolor excepteur sint occaecat sunt in culpa.</p>
</body>
</html>

Un premier document XHTML :

La déclaration Xml et les DTD en général Le XHTML est un langage issu du XML. Le XML pour ceux qui l'ignorent nécessite une déclaration préalable que l'on trouvera donc en entête de chaque document appartenant à la famille XML.

<?xml version="1.0" charset="iso-8859-1" ?>

On déclare donc que l'on crée un document de la famille du xml dans la version 1.0 qui utilise le jeu de caractères francophone. Il faut ensuite faire une nouvelle déclaration qui va préciser cette fois la DTD à laquelle se réfère le document. La DTD est la déclaration de type de document que Dreamweaver génère automatiquement quand vous créez un nouveau document exemple pour une page HTML :

La déclaration étant ici surlignée en jaune pâle.

Les DTD XHTML

Il a été évoqué précédemment la notion de documents « bien formés », il s'agit de documents qui respectent la syntaxe de base du XML et donc du XHTML, mais sans se référer à aucune déclaration de types particuliers. La DTD a pour but de fournir des règles spécifiques à l'emploi et le nom des éléments de marquage. Le XHTML connaît trois types de DTD :

la DTD stricte qui est formulée de la façon suivante :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Comme son nom l'indique, il s'agit d'une interprétation stricte de la syntaxe XHTML. Elle impose des restrictions quant à la position de certains éléments. Elle n'accepte pas les éléments de cadre et les éléments dépréciés.

la DTD transitoire qui est formulée de la façon suivante :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Plus souple, cette DTD autorise l'emploi des éléments dépréciés sans toutefois autoriser l'utilisation des éléments de cadres.

la DTD « jeu de cadres » qui est formulée de la façon suivante :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Cette DTD autorise en plus des éléments dépréciés l'usage des cadres.

Si l'on poursuit l'ébauche de notre document XHTML on a donc :

<?xml version="1.0" charset="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

La suite de notre construction nous amène donc à un premier élément connu mais dont on a quelque peu modifié l'apparence, l'élément <html>. En effet l'élément <html> doit dans un document XHTML avoir un attribut xmlns pour faire référence a ce qui est appelé l'espace nom qui est une définition générale du langage : ici XHTML, qui peut prendre pour valeur 1.0 ou 1.1.

On a donc la structure de code suivante :

<?xml version="1.0" charset="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<title>Mon premier document xhtml</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<p><em>L</em>orem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit 
  in voluptate. Ut enim ad minim veniam, ut aliquip ex ea commodo consequat. Duis 
  aute irure dolor excepteur sint occaecat sunt in culpa.</p>
<p><i><em>Ullamco laboris nisi ut labore et dolore magna aliqua</em></i>. Lorem ipsum dolor sit 
  amet, velit esse cillum dolore duis aute irure dolor. Eu fugiat nulla pariatur. 
  Velit esse cillum dolore in reprehenderit in voluptate duis aute irure dolor.</p></body>
</html>

Pour finir :

Il est évident qu'on ne fait pas du jour au lendemain un site completement valide XHTML strict, il vaut mieux donc commencer à se familiariser avec la version transitoire du XHTML qui n'offre que peu de différences par rapport eu HTML4.01. L'idéal pour bien débuter en XHTML est de prendre son temps et de bien présenter son code, afin de bien visualiser la structure de son document. N'oubliez pas que le XHTML sert à structurer votre document. Dreamweaver à ce sujet propose une possibilité bien sympathique, il permet de mettre en forme tout un document ou seulement une partie de celui-ci illustration en images :

On applique le formatage de la source :

Et on obtient un code mieux présenté :

La structure apparaît plus clairement libre a vous de faire de même !

ANNEXE : Liste des éléments dépréciés ou non supportés

Balises propriétaires

Car non reconnues par le W3C Mais reconnues dans certains navigateurs

dans Internet Explorer

<marquee>texte défilant</marquee>

dans Netscape

<blink>texte clignotant</blink>

Eléments dépréciés

base non supporté
basefont non supporté
center non supporté
font non supporté
frame non supporté
frameset non supporté
iframe non supporté
isindex non supporté
menu non supporté
noframes non supporté
object non supporté
s non supporté
strike non supporté
u non supporté

Les propriétés dépréciées

ALIGN: utilisé avec CAPTION APPLET IFRAME IMG INPUT OBJECT LEGEND TABLE HR DIV P Hx
ALINK : utilisé avec BODY
ALT : utilisé avec APPLET
ARCHIVE: utilisé avec APPLET
BACKGROUND: utilisé avec BODY
BGCOLOR: utilisé avec TABLE TR TD TH BODY
BORDER: utilisé avec IMG OBJECT
CLEAR: utilisé avec BR
CODE: utilisé avec APPLET
CODEBASE: utilisé avec APPLET
COLOR: utilisé avec FONT BASEFONT
COMPACT: utilisé avec DIR MENU DL OL UL
FACE: utilisé avec FONT BASEFONT
HEIGHT: utilisé avec APPLET TD TH
HREF: utilisé avec BASE
HSPACE: utilisé avec APPLET IMG OBJECT
LINK: utilisé avec BODY
NAME: utilisé avec APPLET
NOSHADE: utilisé avec HR
NOWRAP: utilisé avec TD TH
OBJECT: utilisé avec APPLET
PROMPT: utilisé avec ISINDEX
SIZE: utilisé avec HR FONT BASEFONT
START: utilisé avec OL
TARGET: utilisé avec A AREA BASE FORM LINK
TEXT: utilisé avec BODY
TYPE: utilisé avec LI OL UL
VALUE: utilisé avec LI
VERSION: utilisé avec HTML
VLINK: utilisé avec BODY
VSPACE: utilisé avec APPLET IMG OBJECT
WIDTH: utilisé avec APPLET HR TD TH PRE

Vous pouvez les utiliser si vous faites référence à la DTD transitoire, à l'exception des éléments en rouge qui sont seulement supportés par la DTD jeu de cadres. Tout ces éléments sont donc amenés à disparaître du paysage web, essayez donc de les proscrire dans vos futurs essais.

Forums Développement Multimédia