HTML

I. Introduction :

1. Sémantique des éléments HTML

À 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.2. Éléments de type bloc, éléments de type en ligne

• 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.

1. Groupements d'élémentsII. Éléments usuels

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.2. Hiérarchisation de l'information : entêtes et paragraphes

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.

a. Introduction3. Listes

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 :b. Listes à puces et ordonnées

<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...c. Listes de définitions

<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>

a. Présentation4. Les tableaux

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.b. Structuration

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,5. Formulaires

<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 srcpointe 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.6. Images

7. Liens hypertexte

a. Adresse relative, adresse absolue

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 fichierfichier2.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.

b. Types de liens

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.III. Autres éléments

1. Emphase

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.2. Citation

1. Les références bibliographiques sont codées grâce à l'élément cite.
2. 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 : <qcite="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) :3. Insérer des marques de mise à jour

• 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).4. Abréviations et acronymes


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 :5. Formatage de code

1. code, qui désigne un morceau de code de programmation ;
2. var, qui désigne une variable ;
3. kbd, qui désigne une saisie faite au clavier par l'utilisateur ;
4. samp, qui désigne une sortie faite par un programme.

6. Définition en ligne : l'élément dfn

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>