cours gratuit en ligne : Cours de HTML - Éléments HTML



Contenu du cours
  • I. Introduction
    1. Sémantique des éléments HTML
    2. Éléments de type bloc, éléments de type en ligne

  • II. Éléments usuels
    1. Groupements d'éléments
    2. Hiérarchisation de l'information : entêtes et paragraphes
    3. Listes
      1. Introduction
      2. Listes à puces et ordonnées
      3. Listes de définitions
    4. Les tableaux
      1. Présentation
      2. Structuration
    5. Formulaires
    6. Images
    7. Liens hypertexte

  • III. Autres éléments
    1. Emphase
    2. Citation
    3. Insérer des marques de mise à jour
    4. Abréviations et acronymes
    5. Formatage de code
    6. Définition en ligne : l'élément dfn
    7. Éléments multimédia
    8. Éléments divers
  • _______________________

    Cette création est mise à disposition par le professeur Gilles Chagnon sous un contrat Creative Commons.

    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.

    2. Éléments de type bloc, éléments de type en ligne

    Il existe en HTML deux types d'éléments : les éléments en ligne et les éléments de type bloc.

    II. Éléments usuels

    1. Groupements d'éléments

    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.

    2. Hiérarchisation de l'information : entêtes et paragraphes

    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.

    3. Listes

    a. Introduction

    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.

    b. Listes à puces et ordonnées

    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.

    c. Listes de définitions

    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.

    4. Les tableaux

    a. Présentation

    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.

    b. Structuration

    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.

    5. Formulaires

    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.

    6. Images

    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.

    7. Liens hypertexte

    Il existe deux types de liens dans une page :

    III. Autres éléments

    Sauf exception, tous les éléments mentionnés ci-après sont des éléments de type en ligne.

    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.

    2. Citation

    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.

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

    3. Insérer des marques de mise à jour

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

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

    4. Abréviations et acronymes

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

    5. Formatage de code

    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 :

    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>

    7. Éléments multimédia

    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.

    8. Éléments divers

    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.




    Conditions d'utilisation et licence

    Creative Commons License
    Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.


    Source : www.gchagnon.fr/cours/html/index.html