Le X/HTML : initiation et indices de qualité du code

XP-Infos n° 7 – janvier 2010

Sommaire

Article : Le X/HTML : initiation et indices de qualité du code.
Trucs et astuces : Validateurs de code et cours sur le HTML
Dernières réalisations en date

Meilleurs vœux pour l’année 2009 à tous les lecteurs de XP-Infos !

Article

Comme déjà indiqué dans XP-Infos n° 6, le X/HTML est le langage de structuration des pages Web. Ce mois-ci, nous l’étudions un peu plus en détail et découvrons à quoi il ressemble.

Le code X/HTML

Voici à quoi ressemble le code d’une page HTML très simple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Le XHTML</title> </head> <body> <h1>Je suis un titre de niveau 1</h1> <p>Je suis un paragraphe et je contiens <a href="http://www.xp-internet.com" title="Sites Internet de qualité, conformes aux normes Web.">un lien</a> et une image : <img src="../images/Coucher de soleil.jpg" width="200" height="150" alt="Coucher de soleil."></p> <div id="division1">Je suis une division.</div> </body> </html>

Et voici le résultat dans un navigateur :

Je suis un titre de niveau 1.

Je suis un paragraphe et je contiens un lien et une image : Coucher de soleil

Je suis une division.

Les balises HTML

Le X/HTML est composé de balises, qui décrivent la structure d’une page Web. Le navigateur lit la page, interprète le code X/HTML et affiche le contenu en fonction des différentes informations collectées. Ainsi, la balise <h1></h1> décrit un titre de niveau 1, la balise <p></p> décrit un paragraphe, la balise <body></body> délimite le corps du document (où se trouve le texte visible).

Certaines balises sont composées d’un élément ouvrant (par exemple, <h1>) et d’un élément fermant (par exemple, </h1>) qui se distingue du premier par la barre oblique qu’il comporte. D’autres balises ne comportent qu’un seul élément, comme la balise <img>.

Les balises peuvent aussi comprendre des attributs, lesquels ajoutent des propriétés à la balise qui les comporte. Certains attributs sont obligatoires, par exemple :

l’attribut src="../images/Coucher de soleil.jpg", qui indique l’emplacement de l’image à afficher dans la balise <img>.

D’autres sont facultatifs, par exemple :

l’attribut id="division1", qui identifie la division de manière unique ;
l’attribut title="Sites Internet de qualité, conformes aux normes Web.", qui offre un texte que liront les navigateurs textuels ou qui sera affiché sous forme d’info-bulle par certains navigateurs visuels.

HTML ou XHTML

Le XHTML (eXtensible Hypertext Markup Language) est une reformulation du HTML selon la syntaxe plus exigeante du XML : aucune fonctionnalité ne différencie le XHTML et le HTML. Simplement, le XHTML exige une forme plus stricte et plus précise que le HTML.

Ainsi, la balise <li> qui décrit un élément de liste peut ne pas être fermée par la balise fermante </li> en HTML, alors qu’elle est obligatoire en XHTML. Ainsi :

code HTML :
<ul> <li>Élément de liste <li>Élément de liste
le même code en XHTML :
<ul> <li>Élément de liste</li> <li>Élément de liste</li> </ul>

Des éléments comme <html>, <head> et <body> sont implicites en HTML et peuvent donc être omis, alors qu’ils sont obligatoires en XHTML. Par ailleurs, les balises sans éléments de fermeture doivent se terminer par /> en XHTML ; par exemple, <img src="../images/Coucher de soleil.jpg" />.

Indices de qualité du code

Bien évidemment, il faut une certaine expertise pour juger de la qualité du code d’une page X/HTML. Mais comme dans de nombreux autres domaines, le bon sens peut aussi venir à votre secours :

Un code bien rangé, bien présenté, qui ne part pas dans tous les sens et ne présente pas de grands blancs est déjà le signe d’un travail soigné. Si l’auteur va jusqu’à soigner l’apparence du code, il est probable que le résultat final est soigné lui aussi.
L’utilisation de tableaux (balise <table></table>) pour autre chose que des données tabulaires (par exemple, pour créer une colonne à gauche, un texte central et une colonne à droite), qui plus est lorsqu’ils sont imbriqués sur plusieurs niveaux, est le signe d’un style de code dépassé, difficile à lire et à faire évoluer – donc plus coûteux à modifier –, mais aussi inutilement long à interpréter et donc à afficher par le navigateur.
La validation d’une page Web par les outils de validation du W3C est aussi une bonne indication de qualité du code, bien que cela ne soit pas une vérité absolue en soi : tout d’abord parce qu’il ne s’agit que d’une validation de la syntaxe du code, ensuite parce que ces validateurs peuvent parfois aussi comporter des bugs.

Trucs et astuces

Validateurs de code du W3C :

Pour le X/HTML : http://validator.w3.org/
Pour les liens brisés : http://validator.w3.org/checklink

Cours de X/HTML en ligne :

Débuter en HTML : http://www.pdimension.net/w3c/RaggettIntroduc-tionHTML.htm
Les techniques plus avancées : http://charlesmpiche.com/Creezun habitatweb/RaggettHTMLavance.html
Apprenez à créer votre site web : http://www.siteduzero.com/tutoriel-3-13666-apprenez-a-creer-votre-site-web.html

Dernières réalisations en date

Qualidis : interface graphique
Phister Traductions : http://www.phister.fr
Teresa Intrieri : http://www.ti-traductions.com

Le mois prochain

Les CSS : initiation et utilité pour un site Web.