Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.
Cours précédent : Introduction
Liste des fichiers associés à ce fichier HTML :
version 1.10, dernière mise à jour le 4 juillet 2011.
À l'origine, HTML a été conçu pour être un langage de balisage porteur de sens. Cela signifiait que chaque élément codait un type de contenu
particulier. Dans la deuxième moitié des années 1990, lorsque le « Web » a pris son essor, bon nombre d'auteurs de site ont
émis le souhait que des éléments puissent être créés, qui leur permettent de gérer plus finement l'apparence du document quand
il est affiché sur un navigateur graphique. Les éditeurs de navigateur ont suivi. Par la suite au tournant du siècle, les
navigateurs supportant mieux les feuilles de style CSS, il est devenu possible de revenir à la séparation initiale du fond et sa mise en forme. Ce chapitre expose les éléments
de la spécification plus spécialement consacrés au balisage « sémantique » du contenu.
Il existe en HTML deux types d'éléments : les éléments en ligne et les éléments de type bloc.
Les éléments en ligne sont destinés à être placés au fil du texte. Il s'agit par exemple des éléments d'emphase (em), des images (img), des liens (a)... Normalement, ces éléments n'ont pas vocation à être placés sur une page, mais à être affichés dans le contexte de l'élément
parent qui les encadre. Un élément en ligne ne peut contenir que des éléments en ligne ou du texte.
Les éléments de type bloc sont ceux qui, par défaut, ont un rendu visuel « en bloc » sur un navigateur graphique : c'est le
cas par exemple des titres (h1...6), des paragraphes (p), des tableaux (table)... Ils peuvent être positionnés sur une page. À l'écran, ces éléments sont précédés et suivis d'un retour à la ligne. Les
éléments de type bloc peuvent contenir des éléments en ligne. Tous les éléments de type bloc, sauf les paragraphes et les
titres, peuvent de plus contenir d'autres éléments de type bloc.
Avant d'aborder les éléments porteurs d'une information sémantique à proprement parler, nous allons aborder deux éléments
dont la fonction n'est que d'en contenir d'autres, sans aucune connotation sémantique propre : les éléments div et span. Il est parfois nécessaire de grouper plusieurs éléments soit pour organiser le contenu, soit pour mettre en page à l'aide
d'une feuille de styles, tels que par exemple des titres et des paragraphes partageant un point commun (table des matières
en tête d'un document, ensemble de liens sponsorisés et de publicités...). C'est là l'unique fonction de ces éléments. div est un élément de type bloc et peut contenir d'autres éléments de type bloc, span est un élément en ligne.
Un texte se structure à l'aide de titres (éléments h1... h6) et de paragraphes (éléments p). Tous sont des éléments de type bloc.
Il existe six niveaux de titres, par ordre d'importance décroissante h1 à h6. Ces niveaux de titre sont interprétés par certaines aides techniques, et fournissent une table des matières pour la page
Web. Il est donc important de respecter la hiérarchie de ces titres. Il faut également prendre garde à ne pas émietter l'information
(il est rare d'avoir à faire appel à h5 ou h6 !).
Un paragraphe se signale dans la plupart des cas par l'élément p. Il est possible également d'utiliser l'élément pre (pour preformatted), qui permet, sur un navigateur graphique ou textuel, d'afficher le paragraphe en respectant les retours chariot et nombre
d'espaces indiqués dans le code source.
L'élément br permet d'insérer un saut de ligne à l'intérieur d'un paragraphe. Avant de l'utiliser, il faut se demander si ce saut de ligne
s'intercale logiquement au sein du paragraphe, ou bien s'il n'y a pas lieu de scinder ce dernier en deux éléments p distincts.
On distingue trois types de listes : listes à puces (éléments ul) et listes numérotées (éléments ol) qui partagent l'utilisation de l'élément li, et les listes de définitions (élément dl). Tous ces éléments sont de type bloc.
Les listes à puces sont les listes les plus simples, quand l'ordre de présentation des items est important ; elles comportent
des items (éléments li). Il est possible d'imbriquer des listes. Attention toutefois au fait qu'un élément ul ne peut contenir que des éléments li :
<ul>
<li>(....)</li>
<li>(....)</li>
<li>
<ul>
<li>(...)</li>
<li>(...)</li>
<li>(...)</li>
</ul>
</li>
<li>(....)</li>
</ul>
Les listes numérotées sont des énumérations ordonnées (comme dans le cas de la présente liste) ; elles comportent des items
(éléments li) et peuvent être imbriquées, tout comme les listes à puces. Par exemple, dans une recette de cuisine, on utilisera plutôt
une liste non ordonnée pour les ingrédients, et une liste ordonnée pour indiquer la séquence des opérations.
Les listes de définition sont des suites de termes (éléments dt) et de définitions pour ces termes (éléments dd). Plusieurs définitions peuvent être indiquées pour un terme. Il est à noter que Google possède la fonctionnalité define, qui tire parti de ces listes pour extraire des définitions sur le Web. On écrira par exemple...
<dl>
<dt>Maison</dt>
<dd>Une maison est une habitation.</dd>
<dt>Château</dt>
<dd>Un château est une grande maison.</dd>
<dt>Palais</dt>
<dd>Château somptueux</dd>
<dd>Partie supérieure de la cavité buccale.</dd>
</dl>
Pour plus de détails, voir le chapitre consacré aux listes.
Un tableau se déclare à l'aide de l'élément table. Cet élément doit contenir des données sous format tabulaire, présentes dans des cellules. Ces dernières sont soit des cellules
de données (élément td), soit des cellules d'entête (élément th). L'attribut summary de l'élément table donne une description du tableau. Tous les éléments mentionnés dans cette partie sont de type bloc.
Les tableaux ont souvent été utilisés pour la mise en page, afin de pallier le support partiel de CSS par les navigateurs. Dans la mesure où ce support est maintenant largement répandu, cet usage obsolète qui détournait l'élément
table de sa signification première, est à abandonner.
Un tableau de données doit contenir une légende (élément caption), des entêtes de lignes et/ou de colonnes (éléments th). On peut également utiliser les éléments thead, tfoot et tbody, qui permettent d'organiser les grands blocs d'informations dans le tableau. thead est destiné à contenir les lignes d'entêtes, tfoot éventuellement leur reprise en fin de tableau (à noter que cet élément se place dans le code lorsqu'il est utilisé, entre
les éléments thead et tbody). tbody contient les informations du corps du tableau ; il est possible d'en compter plusieurs par tableau, ce qui permet d'isoler
des blocs de données indépendants.
Dans les cellules d'entête th, l'utilisation de l'attribut id, couplée à celle de l'attribut headers dans les cellules de données td permet de lier les cellules aux entêtes dont elles dépendent. Il est possible également d'utiliser l'attribut scope, pouvant prendre les valeurs col ou row, liant la cellule d'entête respectivement à une colonne ou une rangée de cellules de données.
<table summary="Description du tableau">
<caption>Légende du tableau</caption>
<thead>
<tr>
<th id="id1">Titre de la première colonne</th>
<th id="id2">Titre de la deuxième colonne</th>
<th id="id3">Titre de la troisième colonne</th>
<th id="id4">Titre de la quatrième colonne</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Titre de la première colonne</th>
<th>Titre de la deuxième colonne</th>
<th>Titre de la troisième colonne</th>
<th>Titre de la quatrième colonne</th>
</tr>
</tfoot>
<tbody>
<tr>
<td headers="id1">Cellule de la deuxième ligne, première colonne</td>
<td headers="id2">Cellule de la deuxième ligne, deuxième colonne</td>
<td headers="id3">Cellule de la deuxième ligne, troisième colonne</td>
<td headers="id4">Cellule de la deuxième ligne, quatrième colonne</td>
</tr>
<tr>(...)</tr>
<tr>(...)</tr>
</tbody>
</table>
Pour plus de détails, voir le chapitre consacré aux tableaux.
Pour introduire un minimum d'interactivité dans un site Web, il est souvent bienvenu d'utiliser un formulaire. Il s'agit d'une
zone d'une page dans laquelle l'utilisateur est invité à entrer des informations. Un formulaire est indiqué par l'élément
de type bloc form. Cet élément peut contenir divers autres éléments (tous de type en ligne) de saisie (éléments input, textarea ou select), d'interaction (élément button) ou des étiquettes destinées à informer l'utilisateur de la nature du champ à remplir (élément label). Lorsque des ambiguïtés sont susceptibles de perturber le bon remplissage du formulaire, on peut utiliser un élément fieldset accompagné d'une légende (élément legend) pour lever les incertitudes. Par exemple,
<form method="(...)" action="(...)">
<fieldset>
<legend>Adresse de facturation</legend>
<label for="nomFac">Nom</label>
<input type="text" id="nomFac">
<label for="numrueFac">Numéro et rue</label>
<input type="text" id="numrueFac">
<label for="codepostalFac">Code postal</label>
<input type="text" id="codepostalFac">
<label for="villeFac">Ville</label>
<input type="text" id="villeFac">
</fieldset>
<fieldset>
<legend>Adresse de livraison</legend>
<label for="nomLiv">Nom</label>
<input type="text" id="nomLiv">
<label for="numrueLiv">Numéro et rue</label>
<input type="text" id="numrueLiv">
<label for="codepostalLiv">Code postal</label>
<input type="text" id="codepostalLiv">
<label for="villeLiv">Ville</label>
<input type="text" id="villeLiv">
</fieldset>
</form>
Pour plus de détails, voir le chapitre consacré aux formulaires.
Il est facile d'indiquer qu'une image doit être présente sur une page Web ; pour cela, on utilise l'élément img. Cet élément utilise deux attributs obligatoires : l'attribut src pointe vers l'image à insérer, et l'attribut alt en donne une alternative à destination des agents utilisateurs qui ne sont pas en mesure de restituer les images (navigateurs
graphiques dans lesquels la visualisation des images a été désactivée, lecteurs d'écran, moteurs de recherche...). Pour plus
de détails, voir le chapitre consacré aux images.
Quand, à partir d’une page donnée, on fait référence à une autre ressource (ce peut être une image, ou un autre fichier HTML), il est possible de le faire de deux manières : relative ou absolue.
Une adresse absolue commence par http:// : concrètement, le poste client (celui sur lequel se trouve le navigateur) doit alors déterminer le chemin vers le serveur
à chacune de ces requêtes, et ce, que ce chemin lui soit réellement connu ou pas (via son serveur de nom de domaine (DNS).
Une adresse relative spécifie le chemin menant au fichier cible, à partir du fichier courant, en utilisant une syntaxe similaire
à la navigation dans une arborescence Unix. Par exemple, pour indiquer que le fichier fichier1.html se trouve dans le répertoire rep1, fils du répertoire courant, on écrira rep1/fichier1.html. Si le fichier fichier2.html se trouve dans le répertoire parent, on écrira ../fichier2.html et enfin, si le fichier image1.png se trouve dans le répertoire images frère du répertoire courant, on écrira ../images/image1.png.
Il existe deux types de liens dans une page :
Les liens « classiques » que l'on a l'habitude de suivre quand on consulte une page Web se codent à l'aide de l'élément a, pour lequel on précise l'attribut href qui pointe vers l'adresse de la page ou, plus généralement, de la ressource à visiter. Il est possible aussi de spécifier
la langue dans laquelle est rédigée cette ressource à l'aide de l'attribut hreflang. Il s'agit d'un élément de type en ligne. Par exemple, <p>Ceci est un paragraphe contenant un lien vers l’<a href="http://www.upmc.fr/">Université
Pierre-et-Marie Curie</a>.</p>
Il est possible d'ajouter à un document une deuxième sorte de liens qui n'apparaissent pas dans le corps de la page, grâce
à l'élément link. Cet élément, à utiliser dans l'entête du fichier, permet de spécifier aux outils capables de le traiter des « méta-liens »,
comme un lien vers des informations sur l'auteur, sur une table des matières, vers l'accueil... L'exemple ci-après permet
d'indiquer au navigateur l'existence d'un lien vers un fichier censé être le suivant dans l'ordre logique de lecture des pages
du site, puis l'existence d'une version alternative au format Postscript :
<link rel="next" type="text/html" href="fichier_suivant.html">
<link rel="alternate" type="application/postscript" href="document.ps">
Sauf exception, tous les éléments mentionnés ci-après sont des éléments de type en ligne.
Une emphase est réalisée grâce à l'élément em ; si on a besoin d'une emphase plus forte, on utilise strong. Ces éléments étaient parfois mal utilisés pour mettre du texte respectivement en italique ou en gras, alors qu'il ne s'agit
là que de la manière dont elles sont traduites par un navigateur graphique, et donc d'un détournement de leur signification.
La notion de citation prête à confusion en français, par rapport à l'anglais. Dans cette langue en effet, il existe deux sortes de citations au sens français : d'une part les « citations », qui désignent des références de type bibliographique, comme par exemple des titres de livres ou des noms d'auteur, et d'autre part les « quotations » qui sont des extraits de texte.
Les références bibliographiques sont codées grâce à l'élément cite.
Les citations de texte se font en ligne grâce à l'élément q, et quand il s'agit d'un bloc de texte, grâce à l'élément blockquote qui est de type bloc. Ces deux éléments peuvent être précisés avec l'attribut cite, dont le but est de donner, quand cela est possible, l'URL de la ressource qui est citée.
Par exemple,
<p>Le célèbre poème de Pierre de Ronsard intitulé <cite>À Cassandre</cite> commence par ces mots : <q cite="http://fr.wikisource.org/wiki/Mignonne%2C_allons_voir_si_la_rose...">"Mignonne, allons voir si la rose Qui ce matin avait déclose..."</q>.</p>
<blockquote cite="http://fr.wikisource.org/wiki/Son_Excellence_Eug%C3%A8ne_Rougon_-_10">
<p>Cependant, M. Kahn, qui avait dîné avec le ministre et le préfet, était très questionné sur la solennité du lendemain. On
devait se rendre à une lieue de la ville, dans le quartier dit des Moulins, devant l'entrée d'un tunnel projeté pour le chemin
de fer de Niort à Angers ; et là Son Excellence le ministre de l'Intérieur mettrait lui-même le feu à la première mine. Cela
parut touchant.</p>
<p>Rougon faisait le bonhomme. Il voulait simplement honorer l'entreprise si laborieuse d'un vieil ami. D'ailleurs, il se considérait
comme le fils adoptif du département des Deux-Sèvres, qui l'avait autrefois envoyé à l'Assemblée législative. À la vérité,
le but de son voyage, vivement conseillé par Du Poizat, était de le montrer dans toute sa puissance à ses anciens électeurs,
afin d'assurer complètement sa candidature, s'il lui fallait jamais un jour entrer au Corps législatif.</p>
</blockquote>
Il est parfois nécessaire de conserver les traces des mises à jour successives d'une page mise en ligne. Deux éléments complémentaires
ont ce rôle : del et ins. Ces deux éléments possèdent deux attributs, datetime et cite. cite donne l'URL d'une ressource expliquant éventuellement les raisons de la modification. datetime indique la date et l'heure de la modification, sous une forme normalisée (YYYY-MM-DDThh:mm:ssTZD) :
YYYY désigne l'année ;
MM désigne le mois ;
DD désigne le jour ;
hh:mm:ss désigne l'heure en heures, minutes, secondes ;
T sépare date et heure ;
TZD désigne le fuseau horaire.
Cette notation assez lourde peut être tronquée quand une telle précision n'est pas nécessaire. On peut ainsi écrire <del datetime="2005-06-13">texte supprimé</del> <ins datetime="2005-06-13">texte corrigé</ins>.
On distingue en français acronymes et sigles. Les acronymes, codés à l'aide d'éléments acronym, sont prononcés comme des mots (par exemple, OTAN ou CAPES). Les sigles sont codés grâce à l'élément abbr, de l'anglais abbreviation, à ne pas écrire selon l'orthographe française abréviation (par exemple UE ou URSS).
HTML étant un langage informatique, ses concepteurs ont eu tendance à multiplier les éléments destinés à la transcription des
langages de programmation. On dénombre ainsi :
code, qui désigne un morceau de code de programmation ;
var, qui désigne une variable ;
kbd, qui désigne une saisie faite au clavier par l'utilisateur ;
samp, qui désigne une sortie faite par un programme.
L'élément dfn permet d'écrire une définition dans un corps de texte. Par exemple,
<p><dfn>Un château est une grande maison</dfn>, et Louis XIV a fait construire celui de Versailles.</p>
Un élément multimédia est inclus dans une page Web de la même manière que par exemple un programme Java, à l'aide de l'élément object. Cet élément, qui est de type bloc, possède plusieurs éléments-enfants param destinés à préciser les conditions de fonctionnement de l'objet multimédia.
On consultera avec profit une liste des valeurs possibles et des attributs de cet élément dans cet article sur object.
Il est temps maintenant de faire un sort à quelques derniers éléments, qui sont plutôt des éléments de présentation pour la plupart.
l'élément vide hr n'a en soi aucun contenu sémantique. Il n'apporte aucune information supplémentaire dans une page, puisqu'il n'agit que comme
séparateur graphique.
big, small, tt, i et b sont des éléments de présentation permettant respectivement d'augmenter la taille de caractères, de la diminuer, d'afficher
le texte à la manière des télétypes avec une police à espacement fixe, de placer le texte en italiques et de le mettre en
gras, encore présents dans les recommandations strictes de HTML 4.01 et XHTML 1.0. Leur utilisation est donc plutôt à éviter.
sub et sup servent respectivement à placer un texte en indice ou exposant. Leur usage est par exemple utile dans le cas de l'écriture
de formules mathématiques.
address sert à indiquer l'adresse de contact de l'auteur de la page consultée, et non une adresse quelconque.
Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.
Cours précédent : Introduction
Liste des fichiers associés à ce fichier HTML :
Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.