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

XP-Infos n° 7 – janvier 2010

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&nbsp;: <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 :

D’autres sont facultatifs, par exemple :

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 :

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 :

Trucs et astuces

Validateurs de code du W3C :

Cours de X/HTML en ligne :

Dernières réalisations en date

Le mois prochain

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

Partenaires

Consultant SEO88x31wout_animLe Centre d'affaires du Pays d'Aix

Contact

Votre nom est obligatoire.Ne pas dépasser 45 caractères.Caractère non accepté dans le nom.

Votre e-mail est obligatoire.E-mail non valide.Ne pas dépasser 150 caractères.

Votre message est obligatoire.Ne pas dépasser 500 caractères.URL et scripts interdits (anti-spam).