Les éléments HTML – Webcreateur

Hiérarchie d’un document HTML

Un document HTML est structuré par les déﬁnitions 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éﬁnition 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éﬁnir « l’importance » d’un titre.

Les balises <h1> et </h1> déﬁnissent le titre de plus grande importance
et <h6> associée à </h6> déﬁnissent 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éﬁnition 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éﬁnit à 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 ﬁn du paragraphe </p> déﬁnit 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 modiﬁer 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éﬁnition correspondante est placée sur les lignes suivantes.

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

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

Enﬁn, la déﬁnition associée est placée entre les balises <dd> et </dd> (pour « Deﬁnition 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>

Ligne 1
Ligne 2
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 »

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 ?

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

Exemple d’une page web dynamique

Page web dynamique

Les images

Les différents formats
- .jpg (.jpeg)
- .png
- .gif
Optimiser les images pour le web
- Choix du bon format en fonction des besoins (Voir cours en ligne « Différences entre image Jpeg et une image Png »
- Dimensionner les images via logiciel adapté (Gimp) ou en ligne (PixelR)

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.
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.
loop
- Permet de jouer le fichier audio en boucle du début à la fin.
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.

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>