GreenSunConcept
Qualité & Sympathie
Les grandes différences entre HTML & XHTML
Les différences entre HTML et XHTML sont une question qui revient souvent. Je vais donc tenter, du mieux possible, à travers cet article, d'expliquer les différences majeures une à une grâce à des exemples : ce qu'il faut faire et ce qu'il ne faut pas faire.
Le XHTML n'est pas si différent du standard HTML 4.01 mais il y a foule de différences tout de même. Par exemple, il faudra penser à taper les balises en minuscules, et ne jamais oublier de fermer les balises de paragraphe (<p>).
Fermer les balises
Dans le HTML, il n'est pas nécessaire de fermer les balises ouvertes tandis que cela est obligatoire en XHTML.
Mauvais :
<p>Paragraphe 1
<p>Paragraphe 2
<p>Paragraphe 3</p>
Correct :
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
<p>Paragraphe 3</p>
Les balises vides doivent également être fermées
Même les balises vides, en un seul élément, doivent être fermées en XHTML.
Mauvais :
Un saut de ligne: <br>
Une règle horizontale: <hr>
Une image: <img src="poupeerusse.png" alt="Poupée Russe">
Correct :
Un saut de ligne: <br />
Une règle horizontale: <hr />
Une image: <img src="poupeerusse.png" alt="Poupée Russe" />
La parenté
En XHTML, les différentes balises doivent être fermées dans le bon ordre. C'est le même principe que pour les poupées russes :
On les ferme de la plus petite à la plus grande, les unes dans les autres. Par rapport au code on peut prendre par exemple :
Mauvais :
<b><i>Ce texte est en gras et italique</b></i>
Correct :
<b><i>Ce texte est en gras et italique</i></b>
On ferme les balises dans l'ordre inverse de leurs ouvertures. Dans le HTML cela n'avait que peu d'importance mais dans le XHTML cela en a !
Les balises en minuscules
Toutes les balises doivent être écrites en minuscules en XHTML.
Mauvais :
<BODY>
<H1>Titre 1</H1>
<P>Paragraphe</P>
</BODY>
Correct :
<body>
<h1>Titre 1</h1>
<p>Paragraphe</p>
</body>
Les attributs en minuscules
Même chose pour les attributs, en minuscules.
Mauvais :
<img SRC="poupeerusse.png" ALT="Poupée Russe">
Correct :
<img src="poupeerusse.png" alt="Poupée Russe">
Les valeurs des attributs entre guillemets
En XHTML tout ce qui est valeur, comme des dimensions, par exemple, doivent être mis entre guillemets.
Mauvais :
<img src=poupeerusse.png alt=PoupéeRusse width=100%>
Correct :
<img src="poupeerusse.png" alt="PoupéeRusse" width="100%">
Pas de réductions
Aucune réduction ne peut être faite. Il faut tout préciser.
Mauvais :
<input checked>
<input disabled>
<frame noresize>
Correct :
<input checked="checked" />
<input disabled="disabled" />
<frame noresize="noresize" />
DOCTYPE obligatoire
En XHTML, il est impératif de spécifier le <!DOCTYPE Doctype ici>. Il se place au tout début de la page.
Exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Autres différences
- Tous les éléments (<head>, </head>, <body>, </body> de la page doivent être compris entre <html> et </html>
- Au lieu d'utiliser <name> pour nommer un objet tel qu'une image par exemple, on doit utiliser <id> mais par soucis de compatibilité avec les anciens navigateurs, il est possible de spécifier les deux : <name> & <id>. A noter qu'un id est unique.
- ...
Voilà, j'ai repertorié les principales différences, en espérant que cet article vous soit utile...
Vincent
Tous droits réservés à GreenSunConcept - Design de zenzen279 |
|---|
