Les éléments HTML

Hiérarchie d’un document HTML

Un document HTML est structuré par les définitions de titres, paragraphes et listes.

Les titres

Les titres sont une des premières approches permettant la structuration de documents. Ils permettent de distinguer plusieurs parties qui composeront le document suivant une hiérarchie.

En html on associe à chaque définition de titre, une valeur entière comprise entre 1 et 6.
Cette valeur, qui peut être comparée à un rang ou niveau, permet de définir « l’importance » d’un titre.

Les balises <h1> et </h1> définissent le titre de plus grande importance
et <h6> associée à </h6> définissent le titre de plus petite importance.

Le W3C définit le titre de section comme un élément qui décrit brièvement le sujet de la section qu’il introduit. Ce titre de section ne doit pas être confondu avec le titre de la page, balisé avec title, exclusivement dans le head du document.

La hiérarchie des titres d’une page web doit être :

  • Logique : elle doit suivre le schéma d’une table des matières comme pour tout document textuel.
  • Continue : elle doit commencer par un H1 et ne pas comporter de sauts de niveau (un H1 ne peut être directement suivi d’un H3, il doit y avoir au moins un H2 entre les deux).
  • Pensée pour l’utilisateur, et non pour le référencement : les titres doivent être des titres et non des mots clés sans rapport avec ce qui suit, ni des paragraphes complets.
  • Sémantique, et non visuelle : un élément Hn doit être utilisé pour sa valeur sémantique (titre de niveau n) et non pour son rendu visuel (qui peut être totalement transformé avec CSS).
  • Ergonomique : Les utilisateurs sont habitués aux titres, ils les aident à se retrouver dans la page, tant papier que virtuelle, et à aller à l’essentiel de l’information. La présence de titres de section rend également le texte plus digeste et lisible et de fait aide à retenir l’attention, très volatile sur Internet, du lecteur.

Les paragraphes

Les paragraphes permettent de structurer les informations ayant une relation directe entre elles.

En HTML la définition d’un paragraphe permet également l’indentation du texte, ainsi que les passages à la ligne avant et après le paragraphe.

Définition d’un paragraphe

Un paragraphe se définit à l’aide des balises <p> et </p> (pour « Paragraph »).
Le texte contenu entre la balise de début de paragraphe <p> et la balise de fin du paragraphe </p> définit le contenu du paragraphe.

Lignes et sauts de lignes

À l’aide de la balise <br /> (pour « Break line »), Il est possible de demander explicitement un saut de lignes au sein d’un paragraphe, sans pour autant souhaiter terminer le paragraphe.

Au même titre que les sauts de lignes, il est possible d’insérer des lignes horizontales dans le document HTML avec la balise <hr>. Nous verrons par la suite qu’il est possible de modifier l’aspect de ces lignes de séparation.

Les listes

Liste descriptive

Les listes descriptives permettent de présenter un ensemble d’informations dans une forme proche de celle adoptée par les dictionnaires : le mot clé est placé sur la première ligne et la définition correspondante est placée sur les lignes suivantes.

Il existe donc une balise d’ouverture de la liste <dl> (pour « Definition List »), à laquelle correspond naturellement une balise de fermeture de la liste </dl>.

Le mot clé est placé entre les balises <dt> et </dt> (pour « Definition Term »).

Enfin, la définition associée est placée entre les balises <dd> et </dd> (pour « Definition Description »).

<dl>
<dt>Café</dt>
<dd>Boisson noire chaude</dd>
<dt>Lait</dt>
<dd>Boisson blanche froide</dd>
</dl>
Café
Boisson noire chaude
Lait
Boisson blanche froide

Liste non-ordonnée (ou liste à puce)

L’élément HTML <ul> (pour « Unordered List ») représente une liste d’éléments non ordonnés. C’est une collection d’éléments qui n’ont pas d’ordre numérique et dont leur position dans la liste n’a pas d’importance.
En règle générale une liste d’élements non ordonnée est affichée avec une puce qui peut prendre plusieurs formes : un simple point, un cercle ou un carré. Le style de la puce n’est pas défini dans le code HTML de la page, mais dans le code CSS associé utilisant la propriété list-style-type.

<ul>
<li>Ligne 1</li>
<li>Ligne 2</li>
<li>Ligne 3</li>
</ul>
  • Ligne 1
  • Ligne 2
  • Ligne 3

Liste ordonnée

Élément HTML <ol> (pour « Ordered List »).

<ol>
<li>Ligne 1</li>
<li>Ligne 2</li>
<li>Ligne 3</li>
</ol>
  1. Ligne 1
  2. Ligne 2
  3. Ligne 3

Imbrication de listes

<ul>
<li>Ligne 1
    <ul>
        <li>Ligne 1.1</li>
        <li>Ligne 1.2</li>
    </ul>
</li>
<li>Ligne 2</li>
<li>Ligne 3
    <ul>
        <li>Ligne 3.1
            <ul>
                <li>Ligne 3.1.1</li>
            </ul>
        </lI>
    </ul>
</li>
</ul>
  • Ligne 1
    • Ligne 1.1
    • Ligne 1.2
  • Ligne 2
  • Ligne 3
    • Ligne 3.1
      • Ligne 3.1.1

Section de contenu

L’élément <div> (pour « Division ») permet de diviser une page web en plusieurs sections. C’est un élément de type bloc.

<div class="section" id="section-1">
<h3>Ceci est un titre</h3>
<p>Ceci est un paragraphe.</p>
</div>

Les liens hypertextes

Qu’est ce qu’un lien hypertetxe ?

  • L’élément HTML <a> (pour « Anchor ») est une référence permettant de passer d’un document consulté à un document lié.
  • Un lien peut pointer :
    • vers une page sur un autre site
    • vers une page du site courant
    • vers un élément de la page (ancre nommée)
    • vers une adresse de courriel

Exemples de liens hypertextes

Exemple de lien absolu <a href="http://www.univ-lyon2.fr">
  Site de Lyon 2
</a>
Site de Lyon 2
Exemple de lien relatif <a href="page1.html">
  Page 1
</a>
Page 1
Exemple de lien avec options <a href="presentation.php" target="_blank" class="special">
  Qui sommes-nous ?
</a>
Qui sommes-nous ?

Les liens absolus

  • URL complète
  • Ne pas oublier le protocole http://
  • Principalement pour pointer vers l’extérieur

<a href="http://www.univ-lyon2.fr">Site de Lyon 2</a>

Les liens relatifs

  • Chemin pour aller de la page courante vers la cible
  • Dépend de l’organisation des fichiers
  • Déplacer un fichier brise le lien

<a href="page.html">Page</a>

Naviguer dans l’arborescence ?

  • Entrer dans un dossier
    nom_dossier/
  • Sortir d’un dossier
    ../

Lien relatif vers la page A depuis la page index : <a href="partA/pageA.html">Page A</a>

Lien relatif vers index depuis la page A : <a href="../index.html">Page A</a>

Lien de messagerie

  • Nécessite un client de messagerie
  • Laisser le courriel visible
  • Possibilités de sécuriser l’adresse

Exemple de liens de messagerie

        <!-- Exemple de lien de messagerie-->
        <a href="mailto:contact@site.com">Écrivez-nous</a>

        <!-- Exemple avec plusieurs destinataires -->
        <a href="mailto:contact@site.com,support@site.com">Écrivez-nous</a>

        <!-- Exemple avec option-->
        <a href="mailto:contact@site.com?subject=Demande Info">Écrivez-nous</a>
        

Les ancres nommées

        <!-- Exemple d'ancre nommée -->
        <a href="#ancre">Afficher le paragraphe</a>
        <!-- Élément à afficher -->
        <p id="ancre">
            Texte
        </p>
        

Exemple d’ancre classique : ¶ Retourner en haut de la page

Lien vers un fichier ???

  • Lien vers un fichier HTML, il s’affiche….
  • Lien vers un autre type de fichier ?
    • Vers un fichier reconnu par le navigateur ?
    • Vers un fichier non-reconnu par le navigateur ?
  • Nivagateur lit une multitude de fichiers différents

Précisions sur la cible

  • Différencier les liens sortants
  • Si le fichier cible du lien n’et pas .html, préciser le format et le poids du fichier
    • Catalogue (pdf-1,2Mo)
    • Document (doc-35Ko)
  • Il peut être utile de spécifier la langue de la cible
    • Directement dans l’intitulé du lien
    • Attribut « hreflang » de la balise « a »
    • <a href="http://www.w3schools.com" hreflang="en">Le site du W3Schools</a>

Intitulés des liens

  • Les intitulés des liens doivent être pertinents et compréhensibles hors du contexte
  • Exemple :
    • <a href="colloque.html">En savoir plus</a>
    • Faible valeur informative
  • Exemple pertinent :
    • Cliquez ici pour plus d'informations concernant le <a href="colloque.html">colloque sur l'accessibilité numérique en Europe</a>
  • Limitez le nombre de caractères du lien à 80 caractères (7 – 8 mots en moyenne)
  • N’utilisez pas sur la même page le même intitulé pour les liens différents
    • <a href="somme.html">En savoir plus</a>
    • <a href="difference.html">En savoir plus</a>
  • N’utilisez pas des intitulés différents pour la même cible

Nombre de liens par page

  • Le nombre de liens dépend de la nature du site
  • Certains auteurs conseillent un maximum de 20 hyperliens sur la page d’accueil et 5 intégrés au contenu
  • D’autres estiment qu’un maximum de 50 liens reste confortable
  • Google (pour des raisons de référencement) recommande de ne pas dépasser 100 liens par page

Paramètres des liens

  • href : adresse du lien
  • target : _blank || _self (défaut)
  • title : information complémentaire sur le lien
  • download : nom_fichier (html5 peu fiable)

Que se passe t’il si l’on clique sur les liens suivants ?

  1. Cliquer ici <a href="image.png">Cliquer ici</a>
  2. Cliquer ici <a href="app.exe">Cliquer ici</a>
  3. Cliquer ici <a href="#chapitre3">Cliquer ici</a>
  4. Cliquer ici <a href="doc.pdf">Cliquer ici</a>
  5. Cliquer ici <a href="google.fr">Cliquer ici</a>

Exemple d’une page web dynamique

Page web dynamique

Les images

La balise <img />

  • La balise <img /> (pour « Image ») permet d’insérer une image
    • <img src="ballon.jpg" />
  • Source (src)
    • même syntaxe que pour un lien
    • chemin d’accès vers l’image
    • image locale ou distante

Dimensions des images

  • En HTML ou en CSS
    • width / height
    • Une seule dimension pour conserver ratio
  • Favoriser les images en taille réelle

L’attribut alt

  • Commentaire sur le contenu de l’image
  • À ajouter à toutes les balises <img />
  • Doit être le plus informatif possible (évitez « photo » ou « graphique »)
  • Ne dépassez pas 60 caractères (10 – 12 mots)
  • Présentez le contenu ET la fonction des images utilisées
    <img src="ballon.jpg" alt="Mongolfière dessinée en vectoriel pour illustré l'exemple" />

L’attribut longdesc

  • Description longues pour les balises img
  • N’a aucune influence visuelle dans les pages web
  • Conçu pour accroitre l’accessibilité des images : perceptible seulement par les aides techniques (lecteurs d’écran)
  • Comporte un line vers une page HTML contenant une description détaillée de l’image
  • Améliore le référencement dans les moteurs de recherche

Exemples

<!-- Exemple image distante-->
<img src="http://www.site.fr/images/image.jpg" />

<!-- Exemple image stockée sur l'hébergeur -->
<img src="images/image.jpg" />

<!-- Exemple image avec options -->
<img src="images/logo.jpg" title="Logo du site" width="150" height="150" />

<!-- Exemple image avec description complète -->
<img src="poles.jpg" alt="Diminution de la surface de la calotte polaire de 1997 à 2003." longdesc="desc.html" />

Autre médias

Média audio

HTML 5 fournis une manière rapide et simple d’ajouter des fichiers audio sur une page web avec l’élément HTML <audio></audio> (pour « Audio file »). Comme pour l’image <img /> l’élément <audio> accepte une URL source dans l’attribut src. Contrairement à l’image <img /> l’élément <audio> à besoin d’une balise d’ouverture et une balise de fermeture.

<audio src="jazz.ogg"></audio>

Attributs

D’autres attributs que src peuvent accompagner l’élément <audio> :

  • autoplay
    • Par défaut l’élément <audio> n’est pas affiché sur la page.
    • Si l’attribut autoplay est spécifié dans l’élément <audio> rien n’apparaitra sur la page web mais le fichier audio sera jouer automatiquement.
    • <audio src="jazz.ogg" autoplay></audio>
  • controls
    • Pour afficher l’élément <audio> sur la page l’attribut controls est nécessaire.
    • Quand il est spécifié l’attribut controls va afficher les contrôles audio par défaut du navigateur web, incluant lecture, pause, barre de recherche et contrôles du volume.
    • <audio src="jazz.ogg" controls></audio>
  • loop
    • Permet de jouer le fichier audio en boucle du début à la fin.
    • <audio src="jazz.ogg" loop></audio>
  • preload
    • Permet d’identifier, si il y en a, les informations du fichier audio qui devraient être chargées avant que le morceau soit joué.
    • Il accepte les valeurs none, auto et metadata.
    • <audio src="jazz.ogg" preload="metadata"></audio>

Média vidéo

Ajouter une vidéo à une page web et très similaire à ajouter un fichier audio. On utilise l’élément HTML <video> (pour « Video file »)

<video src="earth.ogv" controls></video>

Exemple d’une video

Iframe

L’élément <iframe> (pour « Inline frame ») permet d’intégrer et afficher une page web à l’intérieur d’une autre page web.

<iframe src="https://www.google.com/maps/embed?..."></iframe>

Exemple d’une iframe

Figure & Captions

Figure

L’élément <figure> (pour « Figure ») est un block qui spécifie son propre contenu en tant que média.

<figure>
<img src="chien.jpg" alt="Un chien qui porte un chapeau">
</figure>

Figcaption

L’élément <figcaption> (pour « Figure caption ») améliore la sémantique autour d’un média, par exemple pour afficher une légende sous une image.

<figure>
<img src="chien.jpg">
<figcaption>Un chien qui porte un chapeau.</figcaption>
</figure>