Les bases du langage HTML

html-teaser Le HTML, ou Hypertext Markup Language, est un langage à balises qui permet de découper le document de manière structurée et sémentique. De manière courte nous pourrions dire que le HTML va distinguer les titres, les paragraphes , les listes... etc...., mais également les sections du documents, l'entête, le pied de page, les barres de menus et autres éléments. Il est vrai que le langage HTML n'a pas toujours été suffisament détaillé en terme de balises, et pour cela nous trouvons sur le web un grand nombre de développeurs, ou d'intégrateurs web, qui réinventent des balises déjà existantes. En ce sens, il est toujours bon de bien refaire l'inventaire des balises déjà disponibles. Nous allons au cours de cet article approche les bases de HTML et distinguer les diverses possibilités qu'il nous offre.

HTML ou xHTML et sous quelle version ?

La question est souvent posé et il arrive même que, par ignorance, la réponse soit imposée... alors doit on travailler en HTML 4.01, en xHTML 1.0, en HTML5 ou voire en xHTML5 ? Le choix du langage peut parfois n'être qu'affaire de sensibilité personnelle ou au contraire être guidée par des objectifs et des compatibilités technologiques particulieres.

xHTML 1.0 n'apporte simplement qu'une rigeur d'écriture et de syntaxe, que le HTML, mal éduqué par des navigateurs de plus en plus permissifs, n'imposent pas. Nous pouvons observer dans un premier temps au niveau de la différence de langage qu'un HTML 4.01 écrit proprement n'a donc rien à envier à un xHTML 1.0. Il s'agit tout bonnement de la même chose. Les deux puisent dans le même fond d'HTML, hormi que l'un s'écrit sans condition grammaticale, alors que l'autre exige une grande rigueur d'écriture propre au XML. En résumé pour écrire proprement, il faut :

Fermer toutes les balises ouvertes, y compris les singlettes (<img />, <br />, <hr />...)
Ne pas croiser les balises (la dernière ouverte est la première fermée)
Ecrire les valeurs d'attributs entre quote (même les valeurs numériques)
Toujours donner une valeur à un attribut (checked="checked")

Bien entendu, les ambitions du xHTML étaient plus importantes, plus orientées application web, mais la version xHTML 2 qui devait répondre à ce type d'attente n'a pas vu le jour et pour l'instant, en dehors de certaines spécificités que nous verrons ultérieurement, HTML 5 peut répondre en grande partie aux besoins des sites web des plus exigents. Il n'est donc pas réellement utile de basculer vers une version HTML à la grammaire XML et au type mime application XML.

Si nous considérons qu'un HTML 4.01 bien formaté et bien structuré équivaut à un xHTML 1.0, alors qu'apporte le HTML 5 ? La réponse ne se fera pas simplement qu'au niveau du langage de structure en soit, mais sur la globalité de la philosophie de développement de sites web et interactifs que nous souhaitons mettre en place. Que cela soit au niveau visuel avec l'usage de CSS3, structurel basé sur les nouvelles balises HTML5 ou interactif avec l'emploi de librairies Javascript particulièrement orientées application mobile. Pour faire court, nous pourrions dire que si la cible des navigateurs utilisés ne prend pas en compte HTML 5 il faut émettre quelques réserves quant à son utilisation, sinon.... bienvenue dans l'univers HTML 5.

Qu'en est il du DOCTYPE alors ?

Le DOCTYPE

Tout document HTML ou xHTML bien formé doit commencer par une ligne définissant le type de document en cours. Le type de document est utilisé par l'ensemble des lecteurs informatiques qui doivent comprendre sur quels critères le document est construit. En l'absence de cette information les navigateurs utiliseront le mode d'interprétation 'quirk' permettant à de vieilles pages structurées de manière non standard de pouvoir être interprétée. A ce sujet, voir le chapitre sur le doctype siffing lors de l'article Les techniques et les outils à disposition des standards du web.

La balise DOCTYPE est la seule balise HTML à être écrite entièrement en majuscule. Cette balise doit être la première ligne de la page, et la principale erreur qui arrive si on copie colle cette ligne sur des vieilles versions de code vient du fait que le lien de la DTD est un lien relatif au lieu d'être un lien absolu, ce qui suffit pour basculer certains navigateurs en mode quirk. Voici les 5 DOCTYPEs respectivement utilisés :

HTML 4.01 Transitionnel

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

HTML 4.01 Strict

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

xHTML 1.0 Transitionnel

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

HTML 5

<!DOCTYPE HTML>

Transitionnel ou Strict ?

Souvent utilisé, rarement exploité a bon essient, la différence de catégorie de DOCTYPE propose une approche avec peu ou pas de séparation contenu / contenant. De manière plus directe, une approche transitionnelle permettra l'emploi de certaines balises (<center>, <font>...) et de certains attributs (color, height, border, target...) ayant une relation directe avec l'affichage des données... alors qu'une catégorie Stricte ne permettra pas ce genre de débordement du contenu sur le contenant.

Et le frameset alors ?

Bien que déconseillé pour de multiples raisons, référencement, ajout de signet, perte d'imbrication, etc... la construction de sites en jeu de cadres (frameset) nécessite l'emploi d'une telle catégorie. Hormi le fait que cette catégorie emploi un jeu de balises <frameset> / <frame> en lieu et place de la balise <body> l'intégralité de sa définition se base sur une catégorie transitionnelle.

<frameset rows="30%, *" cols="40%, *">
    <frame src="/pageHG.html">
    <frame src="/pageHD.html">
    <frame src="/pageBG.html">
    <frame src="/pageBD.html">
</frameset>

L'ancien combat de HTML 5.0 vs xHTML 2.0

Si la différence entre HTML 4.01 et xHTML 1.0 ne tient principalement qu'à une rigueur de syntaxe, et que de ce fait il ne faut pas espérer un réel changement de technologie entre les deux langages, l'évolution vers xHTML 1.1, l'hypothétique xHTML 2.0 ou le xHTLM5 est censé apporter un radical changement dans l'approche de la structure des documents. La principale démarcation venant du fait que le type MIME du document n'est ou ne doit pas être basé sur text/html mais sur application/xhtml+xml

Depuis quelques années déjà un travail sur l'évolution du langage était encours et deux équipes distinctes ont travaillée pour chacune apporter sa solution. Le W3C avec une recommandation sur le xHTML 2.0 et whatwg sur le HTML 5. Le 2 juillet 2009 le groupe de travail sur le xHTML2 a annoncé l'arrêt de ses recherches en rejoignant le groupe travaillant sur le HTML 5.

Au niveau du type MIME

L'un ou l'autre ?

Les deux parties du document <html>

La tête <head>

Cette partie contient toute une catégorie d'informations, qui peuvent être lu par le navigateur mais pas de manière directe par l'internaute (sauf si celui ci appelle le code source de la page. On trouve donc des balises

<title>

<meta>

<script>

<style>

<link>

Le corps <body>

Cette partie apporte le contenu du document qui sera affcihé dans la fenêtre du navigateur.

La bonne sémentique

Il n'est pas rare de trouver ce genre d'erreur :

<p id="titre">Le titre</p>
<p id="sous_titre">Le sous titre</p>
<p>Et enfin un paragraphe</p>

Au lieu de trouver tout bêtement ceci:

<h2>Le titre</h2>
<h3>Le sous titre</h3>
<p>Et enfin un paragraphe</p>

Dans un premier temps, donc il est important de décomposer le rôle des diverses familles de balises et de décliner l'ensemble des élements qu'elles contiennent. Sans refaire l'inventaire du W3C, voici les principales familles et balises qu'elles contiennent.

Puce et Média