Skilltoo - Comment écrire sa page web en XHTML 1.0 strict ?

Comment écrire sa page web en XHTML 1.0 strict ?

332

Catégorie : Vie quotidienne Création : Dimanche 25 Novembre 2007

332 consultation(s) - 1 édition(s) - 0 commentaire(s) - imprimer cette fiche

Introduction
    Le XHTML, c'est quoi ?
    Premiere page XHTML 1.0 strict (en-tête)
Règle de codage
    Structuration du code : balises block et balise inline.
    Balises interdites
    Attributs interdits
    Chaque balise doit être fermée
    Imbriquer correctement les balises
    Utiliser les minuscules
    Valeurs des attributs entre guillemets
    Un attribut doit forcément avoir une valeur
    L'attribut "name" devient "id"
    Gestion des caractères spéciaux dans les URL
Précaution pour l'UTF-8
Conclusion
    Quelques liens
    En résumé

Introduction

Le XHTML, c'est quoi ?

Je vais tenter ici de décrire le XHTML, mais ayant passer de l'apprentissage du HTML 1.0 (appris durant mon enfance : codage en HTML à la bourrin jusqu'à ce que ca marche) à directement le XHTML, il se peut donc que des informations décrivant le XHTML devraient être attribué à un langage plus ancien (exemple : HTML 4.0). Connaisseurs, si vous trouvez une erreur ou un oubli important, merci de modifier la fiche ou de m'en informer.

XHTML 1.0 :
The Extensible HyperText Markup Language (« XHTML 1.0 Le langage de balisage hypertexte extensible »).
Langage (ou norme?) créé par World Wide Web Consortium (W3C).

Le XHTML est en quel sorte une suite au langage web HTML et permet de répondre à différents besoins découvert au file des années de l'Internet. Le XHTML repose entre autre sur de nouvelles normes de codage des pages web. Le XHTML tend de plus en plus vers du XML (Il me semble que c'est le cas pour le XHTML 2.0 qui n'est plus lisible comme du HTML). Il repose principalement sur la séparation du contenu et de la mise en page, ainsi que sur la façon d'écrire son code.

Le XHTML ajoute un complément à ce qui a été déjà définit avec le HTML 4.0.

Au final, écrire une page XHTML 1.0 strict permet :
- De séparer le contenu (fichier .html) de la mise en page (fichier .css)
- D'ameliorer le confort du codage et dans sa lisibilité. (par les normes définis)
- L'accessibilité des pages et un meilleur confort lors de la navigation. (ex: suppression des liens popup, acronym...)
- De faciliter le référencement de ses pages (ex: pour google)
- De pouvoir être lu comme du HTML par les machines ne lisant pas le XHTML.

W3C met en place la possibilité de valider ses propres pages ou dans le cas contraire d'afficher les erreurs.
http://validator.w3.org/
et même ces feuilles de style CSS :
http://jigsaw.w3.org/css-validator/

Difference entre XHTML 1.0 Strict, XHTML 1.0 Transitional et XHTML 1.1 ?

XHTML 1.0 Transitional : plus souple lors de la validation. Il y a par exemple plus de balises HTML "autorisées".
XHTML 1.0 Strict : plus stricte au niveau de la validation
XHTML 1.1 : Prise en compte uniquement comme un code XML (interpretation HTML impossible)

La suite du document ne concernera que le XHTML 1.0 strict.

Premiere page XHTML 1.0 strict (en-tête)

Afin que votre page soit reconnu comme du XHTML 1.0 strict, il est nécessaire d'ecrire en-tête de la page le DocType suivant :

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

Enfin il faut préciser au navigateur le type d'encodage utilisé (ISO-8859-1, UTF-8 ...). Pour cela, deux façons sont possible, balise xml ou balise meta.

Aujourd'hui, le XML n'est pas toujours interpreté par les navigateurs (car encore trop récent), la balise méta devient donc obligatoire pour votre page xhtml 1.0. Certains écrivent les deux.

Ligne XML (à placer avant DOCTYPE) :
<?xml version="1.0" encoding="iso-8859-1"?>

Ligne Méta (à placer entre les balises <head> et </head>)
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />

Enfin pour la balise html, il faut y inclure la ligne suivante :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

Nous avons donc, pour notre première page :

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//FR" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>
<title>Titre de la page XHTML</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
</head>

<body>
   
<h1>Ma première page XHTML</h1>
</body>

</html>

Règle de codage

Structuration du code : balises block et balise inline.

Une balise de type block est une balise "bloc". C'est un conteneur qui peut donc contenir d'autres balises. On peut l'assimilier à un paragraphe ou encore un cadre.
Une balise de type inline est une balise "en-ligne". Elle permet de donner une indication à l'information écrite(ex: ceci est un titre). Ces balises ne peuvent pas contenir d'autres balises.

Ainsi, il faut retenir les régles suivantes :
- Un élément de type block ne doit pas être contenu dans un élément de type inline.
- Un élément de type inline est forcément dans un élément de type block.
- Un texte doit forcément être dans une balise de type block (exemple la balise paragraphe <p>). ("<body> texte quelconque </body>" est interdit)

Exemple de balises block : p, h1, blockquote
Exemple de balises inline : img, em, strong, acronym, br

Dans le cas où aucune balise, block ou inline, ne correspond à ce que vous souhaitez faire, sachez qu'il existe deux balises neutres :
<div></div> : balise neutre de type block
<span></span> : balise neutre de type inline

Balises interdites

Le XHTML 1.0 strict met en place des contraintes afin que le code HTML(XML) ne comporte que le contenu à afficher. La mise en page (forme) étant réservé au CSS.

L'intérêt de cette démarche est tout d'abord de structurer le code est de le rendre plus lisible et plus facilement maintenable. Ceci permet également d'avoir une présentation différente selon la sortie d'affichage (écran, imprimante, pdf, ...). (En effet, on peut ainsi creer une feuille de style css par type de sortie)

Ainsi, des balises anciennement utilisées dans le HTML ne sont plus autorisées en XHTML. Il s'agit des balises de présentations comme <i> pour la mise en italique ou encore <font> pour la police de caractère.

Note :
Cependant, certaines balises de présentation (comme <i>) semblent passer la validation en XHTML 1.0 strict.

Attributs interdits

Il en est de même pour les attributs de présentation.

Exemple d'attributs interdits : height, width, size, face ....

Chaque balise doit être fermée

En html, si on oublié de fermer une balise, ce n'était pas toujours génant. Cela n'empéchait pas la page d'être affichée correctement. Ce n'est plus le cas en XHTML.

Vous ne pouvez pas écrire : <p>paragraphe<p>, il faut obligatoire écrire <p>paragraphe</p>. Pour les balises de type "simple" comme <br>, il faut écrire la balise comme ceci : <br /> (sans oublier l'espace avant le slash de fermeture).

Imbriquer correctement les balises

Lorsque que l'on ecrit une serie de balise, il faut les fermer dans l'ordre.
Ainsi il ne faut pas ecrire :
<div><h1>Titre</div></h1>
mais :
<div><h1>Titre</h1></div>

Utiliser les minuscules

Toutes les balises et attributs doivent être écrit en minuscule. La principale raison de ceci est que le XHTML étant proche du XML, le XML est sensible à la casse. Ainsi, en XML, <div> et <DIV> sont deux balises differentes.

Valeurs des attributs entre guillemets

En html, on pouvait ecrire <div id=conteneur>. Ce n'est plus possible en XHTML, il faut obligatoirement mettre des guillemets (il me semble que les quotes sont également acceptées).

Ainsi, il faut donc ecrire <div id="conteneur">

Un attribut doit forcément avoir une valeur

Avant, nous pouvions ecrire <option value="page.html" selected></option>. Le "selected" doit à présent avoir une valeur.

Exemple : <option value="page.html" selected="selected"></option>

L'attribut "name" devient "id"

Le principe de l'attribut id est d'identifié une balise de manière unique. C'est également le cas pour l'attribut name. Il est encore possible d'utiliser name mais s'il est utilisé, l'attribut id doit forcément être possible.

Cependant, il n'est plus possible d'utiliser l'attribut "name" pour les balises :
a, applet, form, frame, iframe, img et map.

Gestion des caractères spéciaux dans les URL

Les caractères spéciaux dans les URL comme & peuvent être incorrectement interprétés par le navigateur. Ainsi le caractère & doit être &

Exemple : <a href="index.php?a=1&b=2" title="A & B">

Précaution pour l'UTF-8

J'ai décidé d'inclure cette parenthèse, car j'ai eu une série de problème pour valider mes pages en UTF-8.
Lorsqu'un site est prévu pour être multilingue et principalement pour autoriser un alphabet différent (japonais, chinois, russe, caractères spéciaux de l'espagnol...), on utilise en général un encodage Unicode (UTF-8 dans la plupart des cas).

Bien qu'ayant réalisé ma page XHTML et mes feuilles de styles correctement (Validé par W3C). J'ai eu des problèmes lors de la découpe ou du passage à PHP. Le valideur de W3C détecté des caractères "invisible" et impossible de les supprimer. J'utilisais Notepad++. J'ai tenté de convertir en ISO pour essayer de visualiser ce caractère invisible, de recommencer à zéro en prenant la précaution de commencer sur une page vierge UTF-8, mais en vain. Une des solutions trouvé sur le web était de prendre un éditeur hexadecimal pour supprimer ces fameux caractères.
Avant d'utiliser cette méthode, j'ai tenté d'utiliser d'autre éditeur de texte.

C'est alors que j'ai essayé avec PSPAD. Le problème s'est corrigé gràce à cette éditeur. De plus, il a même supprimé les mauvais caractères invisibles écrit avec notepad++.

Si vous utilisez le jeu de caractère UTF-8, je vous recommande donc fortement d'utiliser le logiciel suivant, si vous ètes sous windows : http://www.pspad.com/fr/

Conclusion

Quelques liens

www.w3.org/ : site officiel pour le XHTML
xhtml.le-developpeur-web.com/ : Description du XHTML avec entre autre : Les 5 règles de syntaxe XHTML. Si vous n'avez pas tout compris en lisant cette fiche, jetez un oeil sur ce lien.
www.siteduzero.com/tuto-3-6-0-apprenez-a-creer-votre-site-web.html : Pour apprendre de A à Z à rédiger ses pages web.

En résumé

Le XHTML 1.0 strict ajoute une serie de contrainte dans l'écriture de pages web mais ceci pour un intérêt non négligeable : code plus lisible et plus facilement maintenable, meilleur référencement, améliorer l'accessibilité des pages ...

Les 5 règles :
- Fermer les balises
- balises et attribut en minuscule
- attribut entre guillemet
- Tout attribut doit être suivi d'une valeur
- Balises correctement imbriquées

Autre :
- Attention aux balises et attributs interdites
- Structuration des balises block et inline.
- Attribut "name" en "id"
- Attention aux caractères spéciaux

Bon courage à tous et bon développement.
En espérant que votre page sera