Oct
17

Quelle version de HTML choisir pour développer son site ?

Aujourd’hui plusieurs versions de HTML sont utilisées et reconnues par les navigateurs courants.

On peut donc utiliser celle que l’on souhaite, encore faut-il connaître les différences qu’elles proposent.

XHTML

XHTML

HTML

HTML

On pourrait croire qu’utiliser du HTML 4 va nous amener à réaliser un site digne de ce que l’on faisait il y’a 15 ans mais en fait non, on peut très bien coder proprement avec cette version car le CSS est utilisable aussi bien en HTML qu’en xHTML.

Le W3C, organisme qui gère les standards HTML, a fait évoluer celui-ci en le mélangeant avec du XML pour définir la norme XHTML.

Le HTML et le XHTML  se déclinent chacune en deux versions appelées Strict et Transitional.

Les  versions Strict ne permette que les définitions pour lesquelles la nouvelle norme a été établie. Par exemple si une balise est considérée comme abandonnée car elle peut être codée d’une autre façon en CSS, celle-ci fera échouer les tests de validation.

Les versions Transitional, comme leur nom l’indique servent à faire la transition avec la version précédente. Elle sont plus permissives pour des raisons de compatibilité. Par exemple elles autorisent certaines balises qui ont été retirées dans la version Strict. Elles permettent de passer en douceur d’une version à une autre.

L’ensemble des définitions de chaque norme sont rassemblées dans un document appelé DTD. Ce document sert à dire aux navigateurs ce qu’il doit faire quand il rencontre telle ou telle balise. Cette DTD doit être spécifiée en début de fichier dans la balise DOCTYPE.

Etudions de plus près les caractéristiques des différentes versions :

HTML et XHTML

versions html et xhtml

versions html et xhtml

XHTML 1.0

Ci dessous ce qui est obligatoire en XHTML et qui ne l’est pas dans le HTML 4.

Nous verrons dans la section suivante des exemples explicatifs.

  • les attributs doivent avoir une valeur
  • les balises et attributs de balise doivent être écrits en minuscule
  • les attributs doivent être écrits entre apostrophes ou entre guillemets
  • toutes les balises ouvrantes doivent avoir une balise fermante
  • les balises vides doivent être auto-fermées
  • les balises imbriquées doivent être fermées dans le bon ordre
  • les éléments doivent être écrits de façon sémantique
  • les  scripts doivent être inclus dans des sections CDATA

XHTML 1.1

Les contraintes suivantes se rajoutent aux précédentes :

  • l’attribut lang est remplacé par xml:lang
  • pour les balises a et map l’attribut name est remplacé par id

XHTML 2

Version abandonnée

HTML 5

Cette version est toujours en développement, bien que la plupart des améliorations soient connues, celles-ci sont donc susceptibles de changer.

  • De nouveaux éléments permettent de coder de façon plus sémantique. Ces éléments auraient été piquées au Latex (le langage, pas la matière hein) que ça ne m’étonnerait pas.
  • Certains médias (audio, vidéo, etc.) sont pris en compte nativement.
  • Les normes le concernant sont plus détaillées et du coup les validateurs sont plus efficaces
  • Il est compatible à la fois avec HTML 4 et XHTML 1 ce qui permet de passer en HTML 5 juste en changeant le doctype. De ce fait, il n’y aura pas d’erreur en utilisant le HTML 5 avec les navigateurs qui ne le prennent pas en compte tant qu’on n’utilise pas les nouvelles balises et attributs.

XHTML 5

C’est la version XML du HTML 5.

Transitional et Strict

La séparation du fond et de la forme et nécessaire dans la version Strict. Tout ce qui compose la mise en page doit être écrit dans le fichier ou la section CSS du header de la page.

Les balises et autres notations obsolètes ne seront pas valides en Strict alors qu’elle le seront en Transitional.

La version Strict a pour avantage que la page sera compatible avec tout les navigateurs sans avoir à utiliser de hacks pour s’adapter à chacun de ceux ci.

Voyons maintenant à ce que signifient les règles Strict par des exemples

Les attributs doivent avoir une valeur

Prenons l’exemple d’une liste déroulante :

La notation suivantes est interdite :

Qui est le plus fort ?
<select name="choix">
<option value="1">Rhinocéros</option>
<option selected value="2">Eléphant</option>
</select>

A la place vous devrez écrire :

<option selected="selected" value="2">Eléphant</option>

les balises et attributs être écrits en minuscule

La notation suivante n’est pas valide :

<div ID="mon-super-bloc">

Il faut écrire à la place :

<div id="mon-super-bloc">

les attributs doivent être écrits entre apostrophes ou entre guillemets

La notation suivante n’est plus permise

<span class=c-la-classe-americaine>O-O</span>

A la place préfèrez celle-ci :

<span class="c-la-classe-americaine">O-O</span>

ou

<span class='c-la-classe-americaine'>O-O</span>

toutes les balises ouvrantes doivent avoir une balise fermante

en HTML il est possible de commencer un tableau sans le terminer :

<table>
<tbody>
<tr>
<th>titre de la colonne ...</th>

en XHTML il faut absolument fermer les balises :

<table>
<tbody>
<tr>
<th>titre de la colonne</th>
</tr>
</tbody>
</table>

 les balises vides doivent être auto-fermées

Les balises qui ne réprésentant pas de début ni de fin ne doivent pas être fermées en HTML, par exemple les retours à la ligne :

<br />

En XHTML, c’est le contraire, elle doivent être fermées (avec un espace avant le slash :

<br />

les balises imbriquées doivent être fermées dans le bon ordre

Il n’est plus possible d’écrire :

<span><a href="page-de-darth-vador.html">Je suis ton père</span></a>

Il faut fermer d’abord la dernière balise ouverte

<span><a href="page-de-darth-vador.html">Je suis ton père</a></span>

les éléments doivent être écrits de façon sémantique

Les images et le texte doivent être inclus dans un bloc. Ils ne peuvent pas se trouver directement dans le body, dans un form ou un blockquote.
Non valide :

<body>
Le site Robert Duchmol
</body>

Valide :

<body>
<div id="content">Le site Robert Duchmol</div>
</body>

 les  scripts doivent être inclus dans des sections CDATA

<script type="text/javascript">// <![CDATA[
 alert ("os! os! os! os court!");
// ]]></script>

 

 

-> Liste des balises obsolètes

Doctypes

Suivant la version choisie vous devez écrire au début de votre fichier la balise Doctype correspondante.

HTML 4.01 Sctrict

<!DOCTYPE HTML PUBLIC « -//W3C//DTD HTML 4.01//EN » « http://www.w3.org/TR/html4/strict.dtd »>

HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC « -//W3C//DTD HTML 4.01 Transitional//EN » « http://www.w3.org/TR/html4/loose.dtd »>

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

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

XHTML 1.1
<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.1//EN » « http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd »>

HTML 5
<!DOCTYPE html>

Articles similaires :

  • Pas d'articles similaires

1 Comment to “Quelle version de HTML choisir pour développer son site ?”

  • gta5 pc 17 avril 2014 à 8 h 52 min

    Très franchement, en tant que développeur Web, je ne sais pas encore quel est la différence entre XHTML, et HTML que d’après votre article, je ne savais pas encore l’intérêt des écritures dans la balise Doctype mais je faisais du par cœur !!

    Merci pour l’article
    gta5 pc Articles récents..Les deux nouveaux images après la mise à jour de High lifeMy Profile