032.2 Leçon 1
Certification : |
Web Development Essentials |
---|---|
Version : |
1.0 |
Thème : |
032 Balisage de documents HTML |
Objectif : |
032.2 Sémantique HTML et hiérarchie des documents |
Leçon : |
1 sur 1 |
Introduction
Dans la leçon précédente, nous avons appris que le HTML est un langage de balisage qui permet de décrire sémantiquement le contenu d’un site web. Un document HTML contient ce que l’on appelle un squelette qui se compose des éléments HTML <html>
, <head>
et <body>
. Alors que l’élément <head>
décrit un bloc de méta-informations pour le document HTML qui sera invisible pour le visiteur du site web, l’élément <body>
peut contenir de nombreux autres éléments pour définir la structure et le contenu du document HTML.
Dans cette leçon, nous allons aborder le formatage du texte, les éléments sémantiques fondamentaux du HTML et leur utilité, et la manière de structurer un document HTML. Nous utiliserons une liste de courses comme exemple.
Note
|
Tous les exemples de code suivants se trouvent dans l’élément |
Texte
En HTML, aucun bloc de texte ne doit être nu, en dehors d’un élément. Même un court paragraphe doit être enveloppé dans les balises HTML <p>
, qui est le nom raccourci pour paragraphe.
<p>Short text element spanning only one line.</p>
<p>A text element containing much longer text that may span across multiple lines, depending on the size of the web browser window.</p>
Ouvert dans un navigateur web, ce code HTML produit le résultat indiqué dans la Figure 1.
Par défaut, les navigateurs web ajoutent un espace avant et après les éléments <p>
pour améliorer la lisibilité. Pour cette raison, <p>
est appelé élément de bloc.
Titres
Le langage HTML définit six niveaux de titres (headings) pour décrire et structurer le contenu d’un document HTML. Ces titres sont marqués par les balises HTML <h1>
, <h2>
, <h3>
, <h4>
, <h5>
et <h6>
.
<h1>Heading level 1 to uniquely identify the page</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
Un navigateur web rend ce code HTML comme indiqué dans la Figure 2.
Si vous êtes familier avec les logiciels de traitements de texte tels que LibreOffice ou Microsoft Word, vous remarquerez peut-être certaines similitudes dans la façon dont un document HTML utilise différents niveaux de titres et comment ils sont rendus dans le navigateur web. Par défaut, le HTML utilise la taille pour indiquer la hiérarchie et l’importance des titres et ajoute un espace avant et après chaque titre pour le séparer visuellement du contenu.
Un titre utilisant l’élément <h1>
se trouve au sommet de la hiérarchie et il est donc considéré comme le titre le plus important qui identifie le contenu de la page. Il est comparable à l’élément <title>
abordé dans la leçon précédente, mais au sein du contenu du document HTML. Les éléments titres suivants peuvent être utilisés pour structurer davantage le contenu. Veillez à ne pas sauter de niveaux de titre entre eux. La hiérarchie du document doit commencer par <h1>
, se poursuivre par <h2>
, puis <h3>
et ainsi de suite. Il n’est pas nécessaire d’utiliser tous les éléments de titre jusqu’à <h6>
si votre contenu ne l’exige pas.
Note
|
Les titres sont des outils importants pour structurer un document HTML, tant sur le plan sémantique que visuel. Cependant, les titres ne doivent jamais être utilisés pour augmenter la taille d’un texte sans importance structurelle. Selon le même principe, il ne faut pas mettre un court paragraphe en gras ou en italique pour le faire ressembler à un titre ; utilisez les balises de titre pour marquer les titres. |
Commençons par créer le document HTML de la liste de courses en définissant son contour. Nous allons créer un élément <h1>
pour contenir le titre de la page, dans ce cas ` Garden Party`, suivi d’informations courtes enveloppées dans un élément <p>
. De plus, nous utilisons deux éléments <h2>
pour introduire les deux sections de contenu Agenda
et ` Please bring`.
<h1>Garden Party</h1>
<p>Invitation to John's garden party on Saturday next week.</p>
<h2>Agenda</h2>
<h2>Please bring</h2>
Ouvert dans un navigateur web, ce code HTML produit le résultat indiqué dans la Figure 3.
Sauts de ligne
Il peut parfois être nécessaire de provoquer un saut de ligne (line break) sans insérer un autre élément <p>
ou tout autre élément de bloc similaire. Dans ce cas, vous pouvez utiliser l’élément <br>
à fermeture automatique. Notez qu’il ne doit être utilisé que pour insérer des sauts de ligne qui appartiennent au contenu, comme c’est le cas pour les poèmes, les paroles de chansons ou les adresses. Si le contenu est séparé par le sens, il est préférable d’utiliser plutôt un élément <p>
.
Par exemple, nous pourrions diviser le texte du paragraphe d’information de notre exemple précédent comme suit :
<p>
Invitation to John's garden party.<br>
Saturday, next week.
</p>
Dans un navigateur web, ce code HTML produit le résultat indiqué dans la Figure 4.
Lignes horizontales
L’élément <hr>
définit une ligne horizontale, également appelée règle horizontale (horizontal rule). Par défaut, il s’étend sur toute la largeur de son élément parent. L’élément <hr>
peut vous aider à définir un changement thématique dans le contenu ou à séparer les sections du document. L’élément se ferme automatiquement et n’a donc pas de balise de fermeture.
Pour notre exemple, nous pourrions séparer les deux rubriques :
<h1>Garden Party</h1>
<p>Invitation to John's garden party on Saturday next week.</p>
<h2>Agenda</h2>
<hr>
<h2>Please bring</h2>
La Figure 5 montre le résultat de ce code.
Listes HTML
En HTML, vous pouvez définir trois types de listes :
- Listes ordonnées
-
où l’ordre des éléments de la liste est important
- Listes non ordonnées
-
où l’ordre des éléments de la liste n’est pas particulièrement important
- Listes de description
-
pour décrire plus précisément certains termes
Chacune contient un nombre quelconque d'éléments de liste (list items). Nous allons décrire chaque type de liste.
Listes ordonnées
Une liste ordonnée (ordered list) en HTML, désignée par l’élément HTML <ol>
, est une collection d’un nombre quelconque d'éléments de liste. La particularité de cet élément est que l’ordre de ses éléments de liste est important. Pour le souligner, les navigateurs web affichent par défaut des chiffres avant les éléments de liste enfants.
Note
|
Les éléments |
Pour notre exemple, nous pouvons remplir l’agenda de la garden-party en utilisant un élément <ol>
avec le code suivant :
<h2>Agenda</h2>
<ol>
<li>Welcome</li>
<li>Barbecue</li>
<li>Dessert</li>
<li>Fireworks</li>
</ol>
Dans un navigateur web, ce code HTML produit le résultat indiqué dans la Figure 6.
Options
Comme vous pouvez le voir dans cet exemple, les éléments de la liste sont numérotés avec des chiffres entiers commençant par 1 par défaut. Toutefois, vous pouvez modifier ce comportement en spécifiant l’attribut type
de la balise <ol>
. Les valeurs valides pour cet attribut sont 1
pour les chiffres entiers, A
pour les lettres majuscules, a
pour les lettres minuscules, I
pour les chiffres romains en majuscules et i
pour les chiffres romains en minuscules.
Si vous le souhaitez, vous pouvez également définir la valeur de départ en utilisant l’attribut start
de la balise <ol>
. L’attribut start
prend toujours une valeur numérique entière, même si l’attribut type
définit un autre type de numérotation.
Par exemple, nous pouvons ajuster la liste ordonnée de l’exemple précédent de sorte que les éléments de la liste soient préfixés par des lettres majuscules, en commençant par la lettre C, comme le montre l’exemple suivant :
<h2>Agenda</h2>
<ol type="A" start="3">
<li>Welcome</li>
<li>Barbecue</li>
<li>Dessert</li>
<li>Fireworks</li>
</ol>
Dans un navigateur web, ce code HTML est rendu comme dans la Figure 7.
L’ordre des éléments de la liste peut également être inversé en utilisant l’attribut reversed
sans valeur.
Note
|
Dans une liste ordonnée, vous pouvez également définir la valeur initiale d’un élément de liste spécifique en utilisant l’attribut |
Listes non ordonnées
Une liste non ordonnée (unordered list) contient une série d’éléments de liste qui, contrairement à ceux d’une liste ordonnée, n’ont pas d’ordre ou de séquence particulière. L’élément HTML de cette liste est <ul>
. Une fois de plus, <li>
est l’élément HTML pour marquer ses éléments de liste.
Note
|
Les éléments |
Pour notre site web d’exemple, nous pouvons utiliser la liste non ordonnée pour énumérer les articles que les invités peuvent apporter à la fête. Nous pouvons y parvenir avec le code HTML suivant :
<h2>Please bring</h2>
<ul>
<li>Salad</li>
<li>Drinks</li>
<li>Bread</li>
<li>Snacks</li>
<li>Desserts</li>
</ul>
Dans un navigateur web, ce code HTML produit l’affichage montré dans la Figure 8.
Par défaut, chaque élément de la liste est représenté par une puce de forme circulaire (disque). Vous pouvez modifier son apparence à l’aide du CSS, qui sera abordé dans les leçons suivantes.
Listes imbriquées
Les listes peuvent être imbriquées dans d’autres listes, comme les listes ordonnées dans les listes non ordonnées et vice versa. Pour ce faire, la liste imbriquée doit faire partie d’un élément de liste <li>
, car <li>
est le seul élément enfant valide des listes non ordonnées et ordonnées. Lors de l’imbrication, veillez à ne pas faire chevaucher les balises HTML.
Pour notre exemple, nous pouvons ajouter quelques informations sur l’agenda que nous avons créé auparavant, comme le montre l’exemple suivant :
<h2>Agenda</h2>
<ol type="A" start="3">
<li>Welcome</li>
<li>
Barbecue
<ul>
<li>Vegetables</li>
<li>Meat</li>
<li>Burgers, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li>
<li>Fireworks</li>
</ol>
Un navigateur web affiche le code comme indiqué dans la Figure 9.
Vous pouvez même aller plus loin et imbriquer plusieurs niveaux de profondeur. Théoriquement, il n’y a pas de limite au nombre de listes que vous pouvez imbriquer. Toutefois, tenez compte de la lisibilité pour vos visiteurs.
Listes de description
Une liste de description (description list) est définie à l’aide de l’élément <dl>
et elle représente un dictionnaire de clés et de valeurs. La clé est un terme ou un nom que vous souhaitez décrire, et la valeur est la description. Les listes de description peuvent aller de simples paires clé-valeur à des définitions exhaustives.
Une clé (ou terme) est définie à l’aide de l’élément <dt>
, tandis que sa description est définie à l’aide de l’élément <dd>
.
Un exemple d’une telle liste descriptive pourrait être une liste de fruits exotiques expliquant à quoi ils ressemblent.
<h3>Exotic Fruits</h3>
<dl>
<dt>Banana</dt>
<dd>
A long, curved fruit that is yellow-skinned when ripe. The fruit's skin
may also have a soft green color when underripe and get brown spots when
overripe.
</dd>
<dt>Kiwi</dt>
<dd>
A small, oval fruit with green flesh, black seeds, and a brown, hairy
skin.
</dd>
<dt>Mango</dt>
<dd>
A fruit larger than a fist, with a green skin, orange flesh, and one big
seed. The skin may have spots ranging from green to yellow or red.
</dd>
</dl>
Dans un navigateur web, cela donne le résultat indiqué dans la Figure 10.
Note
|
Contrairement aux listes ordonnées et aux listes non ordonnées, dans une liste de description, tout élément HTML peut être considéré comme un enfant direct. Cela vous permet de regrouper des éléments et de les styliser ailleurs à l’aide de CSS. |
Mise en forme du texte
En HTML, vous pouvez utiliser des éléments de mise en forme pour modifier l’apparence du texte. Ces éléments peuvent être classés comme des éléments de présentation ou des éléments de phrase.
Éléments de présentation
Les éléments de présentation de base modifient la police ou l’apparence du texte ; ce sont les éléments <b>
, <i>
, <u>
et <tt>
. Ces éléments ont été définis à l’origine avant que les CSS ne permettent de mettre du texte en gras, en italique, etc. Il existe aujourd’hui de meilleures façons de modifier l’apparence du texte, mais vous verrez encore ces éléments.
Texte en gras
Pour rendre le texte en gras (bold), vous pouvez l’envelopper dans l’élément <b>
comme illustré dans l’exemple suivant. Le résultat apparaît dans la Figure 11.
This <b>word</b> is bold.
<b>
utilisée pour rendre le texte en gras.Selon la spécification HTML5, l’élément <b>
doit être utilisé uniquement lorsqu’il n’existe pas de balises plus appropriées. L’élément qui produit le même résultat visuel, mais qui ajoute une importance sémantique au texte marqué, est <strong>
.
Texte en italique
Pour mettre du texte en italique, vous pouvez l’envelopper dans l’élément <i>
comme illustré dans l’exemple suivant. Le résultat apparaît dans la Figure 12.
This <i>word</i> is in italics.
<i>
utilisée pour mettre le texte en italique.Selon la spécification HTML5, l’élément <i>
ne doit être utilisé que lorsqu’il n’existe pas de balises plus appropriées.
Texte souligné
Pour souligner (underline) du texte, vous pouvez l’envelopper dans l’élément <u>
comme illustré dans l’exemple suivant. Le résultat apparaît dans la Figure 13.
This <u>word</u> is underlined.
<u>
utilisée pour souligner du texte.Selon la spécification HTML5, l’élément <u>
ne doit être utilisé que lorsqu’il n’existe pas de meilleur moyen de souligner du texte. CSS fournit une alternative moderne.
Police à largeur fixe ou monospace
Pour afficher du texte dans une police monospace (à largeur fixe), souvent utilisée pour afficher du code informatique, vous pouvez utiliser l’élément <tt>
comme illustré dans l’exemple suivant. Le résultat apparaît dans la Figure 14.
This <tt>word</tt> is in fixed-width font.
<tt>
utilisée pour afficher du texte dans une police à largeur fixe.La balise <tt>
n’est pas prise en charge par HTML5. Les navigateurs web la rendent toujours comme prévu. Toutefois, vous devez utiliser des balises plus appropriées, notamment <code>
, <kbd>
, <var>
et <samp>
.
Éléments de phrase
Les éléments de phrase ne modifient pas seulement l’apparence du texte, mais ajoutent également une importance sémantique à un mot ou à une phrase. En les utilisant, vous pouvez mettre en valeur un mot ou le marquer comme important. Ces éléments, contrairement aux éléments de présentation, sont reconnus par les lecteurs d’écran, ce qui rend le texte plus accessible aux visiteurs malvoyants et permet aux moteurs de recherche de mieux lire et évaluer le contenu de la page. Les éléments de phrase que nous utilisons tout au long de cette leçon sont <em>
, <strong>
, et <code>
.
Texte mis en évidence
Pour mettre du texte en évidence (Emphasized Text), vous pouvez l’entourer de l’élément <em>
, comme le montre l’exemple suivant :
This <em>word</em> is emphasized.
<em>
utilisée pour mettre en évidence le texte.Comme vous pouvez le constater, les navigateurs web affichent <em>
de la même manière que <i>
, mais <em>
ajoute une importance sémantique en tant qu’élément de phrase, ce qui améliore l’accessibilité pour les visiteurs malvoyants.
Texte important
Pour marquer le texte comme important, vous pouvez l’envelopper dans l’élément <strong>
comme illustré dans l’exemple suivant. Le résultat apparaît dans la Figure 16.
This <strong>word</strong> is important.
Comme vous pouvez le constater, les navigateurs web affichent <strong>`de la même manière que `<b>
, mais `<strong>`ajoute une importance sémantique en tant qu’élément de phrase, ce qui améliore l’accessibilité pour les visiteurs malvoyants.
Code informatique
Pour insérer un morceau de code informatique, vous pouvez l’envelopper dans l’élément <code>
comme illustré dans l’exemple suivant. Le résultat apparaît dans la Figure 17.
The Markdown code <code># Heading</code> creates a heading at the highest level in the hierarchy.
<code>
utilisée pour insérer un morceau de code informatique.Texte marqué
Pour mettre en évidence un texte sur un fond jaune, à la manière d’un surligneur, vous pouvez utiliser l’élément <mark>
comme illustré dans l’exemple suivant. Le résultat apparaît dans la Figure 18.
This <mark>word</mark> is highlighted.
<mark>
utilisée pour mettre en évidence du texte sur un fond jaune.Formatage du texte de notre liste d’achats en HTML
En nous inspirant de nos exemples précédents, nous allons insérer quelques éléments de phrase pour modifier l’apparence du texte tout en lui donnant une importance sémantique. Le résultat apparaît dans la Figure 19.
<h1>Garden Party</h1>
<p>
Invitation to <strong>John's garden party</strong>.<br>
<strong>Saturday, next week.</strong>
</p>
<h2>Agenda</h2>
<ol>
<li>Welcome</li>
<li>
Barbecue
<ul>
<li><em>Vegetables</em></li>
<li><em>Meat</em></li>
<li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li>
<li><mark>Fireworks</mark></li>
</ol>
<hr>
<h2>Please bring</h2>
<ul>
<li>Salad</li>
<li>Drinks</li>
<li>Bread</li>
<li>Snacks</li>
<li>Desserts</li>
</ul>
Dans cet exemple de document HTML, les informations les plus importantes concernant la garden-party elle-même sont marquées comme importantes à l’aide de l’élément <strong>
. Les aliments disponibles pour le barbecue sont mis en évidence à l’aide de l’élément <em>
. Les feux d’artifice sont simplement mis en évidence à l’aide de l’élément <mark>
.
À titre d’exercice, vous pouvez essayer de formater d’autres morceaux de texte en utilisant également les autres éléments de formatage.
Texte préformaté
Dans la plupart des éléments HTML, l’espace blanc est généralement réduit à un seul espace, voire entièrement ignoré. Toutefois, il existe un élément HTML nommé <pre>
qui permet de définir ce que l’on appelle du texte préformaté. L’espace blanc dans le contenu de cet élément, y compris les espaces et les sauts de ligne, est préservé et rendu dans le navigateur web. En outre, le texte s’affiche dans une police à largeur fixe, comme l’élément <code>
.
<pre>
field() {
shift $1 ; echo $1
}
</pre>
<pre>
préserve les espaces blancs.Regroupement des éléments
Par convention, les éléments HTML sont divisés en deux catégories :
- Éléments de niveau bloc
-
Ils apparaissent sur une nouvelle ligne et occupent toute la largeur disponible. Les exemples d’éléments de niveau bloc dont nous avons déjà parlé sont
<p>
,<ol>
, et<h2>
. - Éléments de niveau ligne
-
Ils apparaissent sur la même ligne (inline) que les autres éléments et le texte, n’occupant que l’espace nécessaire à leur contenu. Des exemples d’éléments de niveau ligne sont
<strong>
,<em>
, et<i>
.
Note
|
HTML5 a introduit des catégories d’éléments plus précises et plus exactes, en essayant d’éviter toute confusion avec les blocs CSS et les boîtes en ligne. Pour simplifier, nous nous en tiendrons ici à la subdivision classique en éléments en bloc et éléments en ligne. |
Les éléments fondamentaux pour regrouper plusieurs éléments sont les éléments <div>
et <span>
.
L’élément <div>
est un conteneur de niveau bloc pour d’autres éléments HTML et n’ajoute pas de valeur sémantique par lui-même. Vous pouvez utiliser cet élément pour diviser un document HTML en sections et structurer votre contenu, tant pour la lisibilité du code que pour appliquer des styles CSS à un groupe d’éléments, comme vous l’apprendrez dans une leçon ultérieure.
Par défaut, les navigateurs web insèrent toujours un saut de ligne avant et après chaque élément <div>
afin qu’ils s’affichent sur leur propre ligne.
En revanche, l’élément <span>
sert de conteneur pour le texte HTML et il est généralement utilisé pour regrouper d’autres éléments en ligne afin d’appliquer des styles à l’aide de CSS à une plus petite partie du texte.
L’élément <span>
se comporte comme du texte ordinaire et ne commence pas sur une nouvelle ligne. Il s’agit donc d’un élément en ligne.
L’exemple suivant compare la représentation visuelle de l’élément sémantique <p>
et des éléments de regroupement <div>
et <span>
:
<p>Text within a paragraph</p>
<p>Another paragraph of text</p>
<hr>
<div>Text wrapped within a <code>div</code> element</div>
<div>Another <code>div</code> element with more text</div>
<hr>
<span>Span content</span>
<span>and more span content</span>
Un navigateur web affiche ce code comme indiqué dans la Figure 21.
p
(paragraph), div
et span
du langage HTML.Nous avons déjà vu que par défaut, le navigateur web ajoute un espacement avant et après les éléments <p>
. Cet espacement n’est appliqué à aucun des éléments de regroupement <div>
et <span>
. Cependant, les éléments <div>
sont formatés comme leurs propres blocs, tandis que le texte des éléments <span>
sont affichés sur la même ligne.
Structure de page HTML
Nous avons vu comment utiliser les éléments HTML pour décrire le contenu d’une page web d’un point de vue sémantique, c’est-à-dire pour donner un sens et un contexte au texte. Un autre groupe d’éléments est conçu dans le but de décrire la structure sémantique d’une page web, une expression ou sa structure. Ces éléments sont des éléments bloc, c’est-à-dire qu’ils se comportent visuellement de la même manière qu’un élément <div>
. Leur but est de définir la structure sémantique d’une page web en spécifiant des zones bien définies telles que les en-têtes, les pieds de page et le contenu principal de la page. Ces éléments permettent le regroupement sémantique du contenu afin qu’il puisse être compris par un ordinateur également, y compris les moteurs de recherche et les lecteurs d’écran.
Élément <header>
L’élément <header>
contient des informations d’introduction aux éléments sémantiques dans un document HTML. Un en-tête est différent d’un titre, mais un en-tête comprend souvent un élément de titre (<h1>
, … , <h6>
).
En pratique, cet élément est le plus souvent utilisé pour représenter l’en-tête de la page, comme une bannière avec un logo. Il peut également être utilisé pour introduire le contenu de l’un des éléments suivants : <body>
, <section>
, <article>
, <nav>
, ou <aside>
.
Un document peut comporter plusieurs éléments <header>
, mais un élément <header>
ne peut pas être imbriqué dans un autre élément <header>
. Un élément <footer>
ne peut pas non plus être utilisé à l’intérieur d’un <header>
.
Par exemple, pour ajouter un en-tête de page à notre document d’exemple, nous pouvons procéder comme suit :
<header>
<h1>Garden Party</h1>
</header>
Il n’y aura aucun changement visible dans le document HTML, car <h1>
(comme tous les autres éléments d’en-tête) est un élément de niveau bloc sans autres propriétés visuelles.
Élément de contenu <main>
L’élément <main>
est un conteneur pour le contenu central d’une page web. Il ne doit pas y avoir plus d’un élément <main>
dans un document HTML.
Dans notre document d’exemple, tout le code HTML que nous avons écrit jusqu’à présent serait placé à l’intérieur de l’élément <main>
.
<main>
<header>
<h1>Garden Party</h1>
</header>
<p>
Invitation to <strong>John's garden party</strong>.<br>
<strong>Saturday, next week.</strong>
</p>
<h2>Agenda</h2>
<ol>
<li>Welcome</li>
<li>
Barbecue
<ul>
<li><em>Vegetables</em></li>
<li><em>Meat</em></li>
<li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li>
<li><mark>Fireworks</mark></li>
</ol>
<hr>
<h2>Please bring</h2>
<ul>
<li>Salad</li>
<li>Drinks</li>
<li>Bread</li>
<li>Snacks</li>
<li>Desserts</li>
</ul>
</main>
Comme l’élément <header>
, l’élément <main>
ne provoque aucun changement visuel dans notre exemple.
Élément <footer>
L’élément <footer>
contient des notes de bas de page, par exemple des informations sur l’auteur, des informations de contact ou des documents connexes, pour les éléments sémantiques environnants, par exemple <section>
, <nav>
, ou <aside>
. Un document peut avoir plusieurs éléments <footer>
qui permettent de mieux décrire les éléments sémantiques. Toutefois, un élément <footer>
ne peut pas être imbriqué dans un autre élément <footer>
, et un élément <header>
ne peut pas non plus être utilisé dans un <footer>
.
Pour notre exemple, nous pouvons ajouter des informations de contact pour l’hôte (John) comme indiqué dans l’exemple suivant :
<footer>
<p>John Doe</p>
<p>john.doe@example.com</p>
</footer>
Élément <nav>
L’élément <nav>
décrit une unité de navigation majeure, telle qu’un menu, qui contient une série d’hyperliens.
Note
|
Les hyperliens ne doivent pas tous être enveloppés dans un élément |
Les hyperliens n’ayant pas encore été abordés, l’élément de navigation ne sera pas inclus dans l’exemple de cette leçon.
Élément <aside>
L’élément <aside>
est un conteneur pour le contenu qui n’est pas nécessaire dans l’ordre du contenu de la page principale, mais qui est généralement indirectement lié ou complémentaire. Cet élément est souvent utilisé pour les barres latérales qui affichent des informations secondaires, comme un glossaire.
Dans notre exemple, nous pouvons ajouter des informations sur l’adresse et le trajet, qui ne sont qu’indirectement liées au reste du contenu, en utilisant l’élément <aside>
.
<aside>
<p>
10, Main Street<br>
Newville
</p>
<p>Parking spaces available.</p>
</aside>
Élément <section>
L’élément <section>
définit une section logique dans un document qui fait partie de l’élément sémantique qui l’entoure, mais qui ne fonctionnerait pas comme un contenu autonome, tel qu’un chapitre.
Dans notre document d’exemple, nous pouvons envelopper les sections de contenu pour l’ordre du jour et introduire des sections de liste comme le montre l’exemple suivant :
<section>
<header>
<h2>Agenda</h2>
</header>
<ol>
<li>Welcome</li>
<li>
Barbecue
<ul>
<li><em>Vegetables</em></li>
<li><em>Meat</em></li>
<li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li>
<li><mark>Fireworks</mark></li>
</ol>
</section>
<hr>
<section>
<header>
<h2>Please bring</h2>
</header>
<ul>
<li>Salad</li>
<li>Drinks</li>
<li>Bread</li>
<li>Snacks</li>
<li>Desserts</li>
</ul>
</section>
Cet exemple ajoute également d’autres éléments <header>
à l’intérieur des sections, de sorte que chaque section contient son propre élément <header>
.
Élément <article>
L’élément <article>
définit un contenu indépendant et autonome qui a un sens par lui-même sans le reste de la page. Son contenu est potentiellement redistribuable ou réutilisable dans un autre contexte. Les exemples typiques ou le matériel approprié pour un élément <article>
sont un article de blog, une liste de produits pour une boutique et une publicité pour un produit. La publicité pourrait alors exister à la fois en tant que telle et dans une page plus grande.
Dans notre exemple, nous pouvons remplacer la première <section>
qui enveloppe l’agenda par un élément <article>
.
<article>
<header>
<h2>Agenda</h2>
</header>
<ol>
<li>Welcome</li>
<li>
Barbecue
<ul>
<li><em>Vegetables</em></li>
<li><em>Meat</em></li>
<li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li>
<li><mark>Fireworks</mark></li>
</ol>
</article>
L’élément <header>
que nous avons ajouté dans l’exemple précédent peut persister ici aussi, car les éléments <article>
peuvent avoir leurs propres éléments <header>
.
Dernier exemple
En combinant tous les exemples précédents, le document HTML final de notre invitation se présente comme suit :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Garden Party</title>
</head>
<body>
<main>
<h1>Garden Party</h1>
<p>
Invitation to <strong>John's garden party</strong>.<br>
<strong>Saturday, next week.</strong>
</p>
<article>
<h2>Agenda</h2>
<ol>
<li>Welcome</li>
<li>
Barbecue
<ul>
<li><em>Vegetables</em></li>
<li><em>Meat</em></li>
<li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li>
<li><mark>Fireworks</mark></li>
</ol>
</article>
<hr>
<section>
<h2>Please bring</h2>
<ul>
<li>Salad</li>
<li>Drinks</li>
<li>Bread</li>
<li>Snacks</li>
<li>Desserts</li>
</ul>
</section>
</main>
<aside>
<p>
10, Main Street<br>
Newville
</p>
<p>Parking spaces available.</p>
</aside>
<footer>
<p>John Doe</p>
<p>john.doe@example.com</p>
</footer>
</body>
</html>
Dans un navigateur web, la page entière est affichée comme indiqué dans la Figure 22.
Exercices guidés
-
Pour chacune des balises suivantes, indiquez la balise fermante correspondante :
<h5>
<br>
<ol>
<dd>
<hr>
<strong>
<tt>
<main>
-
Pour chacune des balises suivantes, indiquez si elle marque le début d’un élément de bloc ou d’un élément en ligne :
<h3>
<span>
<b>
<div>
<em>
<dl>
<li>
<nav>
<code>
<pre>
-
Quels types de listes pouvez-vous créer en HTML ? Quelles balises devez-vous utiliser pour chacune d’entre elles ?
-
Quelles balises entourent les éléments de bloc que vous pouvez utiliser pour structurer une page HTML ?
Exercices d’exploration
-
Créez une page HTML basique avec le titre “Form Rules”. Vous utiliserez cette page HTML pour tous les exercices d’exploration, chacun d’entre eux étant basé sur les précédents. Ajoutez ensuite un titre de niveau 1 avec le texte “How to fill in the request form”, un paragraphe avec le texte “To receive the PDF document with the complete HTML course, it is necessary to fill in the following fields:” et une liste non ordonnée avec les éléments de liste suivants : “Name”, “Surname”, “Email Address”, “Nation”, “Country”, et “Zip/Postal Code”.
-
Mettez les trois premiers champs (“Name”, “Surname” et “Email Address”) en gras, tout en leur donnant une importance sémantique. Ajoutez ensuite un titre de niveau 2 avec le texte “Required fields” et un paragraphe avec le texte “Bold fields are mandatory.”
-
Ajoutez un autre titre de niveau 2 avec le texte “Steps to follow”, un paragraphe avec le texte “There are four steps to follow:”, et une liste ordonnée avec les éléments de liste suivants : “Fill in the fields”, “Click the Submit button”, “Check your e-mail and confirm your request by clicking on the link you receive”, et “Check your e-mail - You will receive the full HTML course in minutes”.
-
En utilisant
<div>
, créez un bloc pour chaque section qui commence par un titre de niveau 2. -
En utilisant
<div>
, créez un autre bloc pour la section commençant par le titre de niveau 1. Divisez ensuite cette section des deux autres avec une ligne horizontale. -
Ajoutez l’élément header avec le texte “Form Rules - 2021” et l’élément
<footer>
avec le texte “Copyright Note - 2021”. Enfin, ajoutez l’élément<main>
qui doit contenir les trois blocs<div>
.
Résumé
Dans cette leçon, vous avez appris :
-
Comment créer des balises pour le contenu d’un document HTML
-
La structure hiérarchique du texte HTML
-
La différence entre les éléments HTML en bloc et en ligne
-
Comment créer des documents HTML avec une structure sémantique
Les termes suivants ont été abordés dans cette leçon :
<h1>
,<h2>
,<h3>
,<h4>
,<h5>
,<h6>
-
Les balises de titre.
<p>
-
La balise de paragraphe.
<ol>
-
La balise de liste ordonnée (ordered list).
<ul>
-
La balise de liste non ordonnée (unordered list).
<li>
-
La balise de l’élément de liste (list item).
<dl>
-
La balise de la liste de description (description list).
<dt>
,<dd>
-
Les balises de chaque terme et de chaque description pour une liste de descriptions.
<pre>
-
La balise de mise en forme préservée.
<b>
,<i>
,<u>
,<tt>
,<em>
,<strong>
,<code>
,<mark>
-
Les balises de mise en forme.
<div>
,<span>
-
Les balises de regroupement.
<header>
,<main>
,<nav>
,<aside>
,<footer>
-
Les balises utilisées pour fournir une structure et une mise en page simples à une page HTML.
Réponses aux exercices guidés
-
Pour chacune des balises suivantes, indiquez la balise fermante correspondante :
<h5>
</h5>
<br>
N’existe pas
<ol>
</ol>
<dd>
</dd>
<hr>
N’existe pas
<strong>
</strong>
<tt>
</tt>
<main>
</main>
-
Pour chacune des balises suivantes, indiquez si elle marque le début d’un élément de bloc ou d’un élément en ligne :
<h3>
Élément de bloc
<span>
Élément en ligne
<b>
Élément en ligne
<div>
Élément de bloc
<em>
Élément en ligne
<dl>
Élément de bloc
<li>
Élément de bloc
<nav>
Élément de bloc
<code>
Élément en ligne
<pre>
Élément de bloc
-
Quels types de listes pouvez-vous créer en HTML ? Quelles balises devez-vous utiliser pour chacune d’entre elles ?
En HTML, vous pouvez créer trois types de listes : des listes ordonnées constituées d’une série d’éléments de liste numérotés, des listes non ordonnées constituées d’une série d’éléments de liste qui n’ont pas d’ordre ou de séquence particulière, et des listes de description représentant des entrées comme dans un dictionnaire ou une encyclopédie. Une liste ordonnée est comprise entre les balises
<ol>
et</ol>
, une liste non ordonnée est comprise entre les balises<ul>
et</ul>
, et une liste de description est comprise entre les balises<dl>
et</dl>
. Chaque élément d’une liste ordonnée ou non ordonnée est inclus entre les balises<li>
et</li>
, tandis que chaque terme d’une liste de description est inclus entre les balises<dt>
et</dt>
et sa description est incluse entre les balises<dd>
et</dd>
. -
Quelles balises contiennent les éléments de bloc que vous pouvez utiliser pour structurer une page HTML ?
Les balises
<header>
et</header>
renferment l’en-tête de la page, les balises<main>
et</main>
renferment le contenu principal de la page HTML, les balises<nav>
et</nav>
contiennent la barre de navigation, les balises<aside>
et</aside>
contiennent la barre latérale et les balises<footer>
et</footer>
contiennent le pied de page.
Réponses aux exercices d’exploration
-
Créez une page HTML basique avec le titre “Form Rules”. Vous utiliserez cette page HTML pour tous les exercices d’exploration, chacun d’entre eux étant basé sur les précédents. Ajoutez ensuite un titre de niveau 1 avec le texte “How to fill in the request form”, un paragraphe avec le texte “To receive the PDF document with the complete HTML course, it is necessary to fill in the following fields:” et une liste non ordonnée avec les éléments de liste suivants : “Name”, “Surname”, “Email Address”, “Nation”, “Country”, et “Zip/Postal Code”.
<!DOCTYPE html> <html> <head> <title>Form Rules</title> </head> <body> <h1>How to fill in the request form</h1> <p> To receive the PDF document with the complete HTML course, it is necessary to fill in the following fields: </p> <ul> <li>Name</li> <li>Surname</li> <li>Email Address</li> <li>Nation</li> <li>Country</li> <li>Zip/Postal Code</li> </ul> </body> </html>
-
Mettez les trois premiers champs (“Name”, “Surname” et “Email Address”) en gras, tout en leur donnant une importance sémantique. Ajoutez ensuite un titre de niveau 2 avec le texte “Required fields” et un paragraphe avec le texte “Bold fields are mandatory.”
<!DOCTYPE html> <html> <head> <title>Form Rules</title> </head> <body> <h1>How to fill in the request form</h1> <p> To receive the PDF document with the complete HTML course, it is necessary to fill in the following fields: </p> <ul> <li><strong> Name </strong></li> <li><strong> Surname </strong></li> <li><strong> Email Address </strong></li> <li>Nation</li> <li>Country</li> <li>Zip/Postal Code</li> </ul> <h2>Required fields</h2> <p>Bold fields are mandatory.</p> </body> </html>
-
Ajoutez un autre titre de niveau 2 avec le texte “Steps to follow”, un paragraphe avec le texte “There are four steps to follow:”, et une liste ordonnée avec les éléments de liste suivants : “Fill in the fields”, “Click the Submit button”, “Check your e-mail and confirm your request by clicking on the link you receive”, et “Check your e-mail - You will receive the full HTML course in minutes”.
<!DOCTYPE html> <html> <head> <title>Form Rules</title> </head> <body> <h1>How to fill in the request form</h1> <p> To receive the PDF document with the complete HTML course, it is necessary to fill in the following fields: </p> <ul> <li><strong> Name </strong></li> <li><strong> Surname </strong></li> <li><strong> Email Address </strong></li> <li>Nation</li> <li>Country</li> <li>Zip/Postal Code</li> </ul> <h2>Required fields</h2> <p>Bold fields are mandatory.</p> <h2>Steps to follow</h2> <p>There are four steps to follow:</p> <ol> <li>Fill in the fields</li> <li>Click the Submit button</li> <li> Check your e-mail and confirm your request by clicking on the link you receive </li> <li> Check your e-mail - You will receive the full HTML course in minutes </li> </ol> </body> </html>
-
En utilisant
<div>
, créez un bloc pour chaque section qui commence par un titre de niveau 2.<!DOCTYPE html> <html> <head> <title>Form Rules</title> </head> <body> <h1>How to fill in the request form</h1> <p> To receive the PDF document with the complete HTML course, it is necessary to fill in the following fields: </p> <ul> <li><strong> Name </strong></li> <li><strong> Surname </strong></li> <li><strong> Email Address </strong></li> <li>Nation</li> <li>Country</li> <li>Zip/Postal Code</li> </ul> <div> <h2>Required fields</h2> <p>Bold fields are mandatory.</p> </div> <div> <h2>Steps to follow</h2> <p>There are four steps to follow:</p> <ol> <li>Fill in the fields</li> <li>Click the Submit button</li> <li> Check your e-mail and confirm your request by clicking on the link you receive </li> <li> Check your e-mail - You will receive the full HTML course in minutes </li> </ol> </div> </body> </html>
-
En utilisant
<div>
, créez un autre bloc pour la section commençant par le titre de niveau 1. Divisez ensuite cette section des deux autres avec une ligne horizontale.<!DOCTYPE html> <html> <head> <title>Form Rules</title> </head> <body> <div> <h1>How to fill in the request form</h1> <p> To receive the PDF document with the complete HTML course, it is necessary to fill in the following fields: </p> <ul> <li><strong> Name </strong></li> <li><strong> Surname </strong></li> <li><strong> Email Address </strong></li> <li>Nation</li> <li>Country</li> <li>Zip/Postal Code</li> </ul> </div> <hr> <div> <h2>Required fields</h2> <p>Bold fields are mandatory.</p> </div> <div> <h2>Steps to follow</h2> <p>There are four steps to follow:</p> <ol> <li>Fill in the fields</li> <li>Click the Submit button</li> <li> Check your e-mail and confirm your request by clicking on the link you receive </li> <li> Check your e-mail - You will receive the full HTML course in minutes </li> </ol> </div> </body> </html>
-
Ajoutez l’élément header avec le texte “Form Rules - 2021” et l’élément
<footer>
avec le texte “Copyright Note - 2021”. Enfin, ajoutez l’élément<main>
qui doit contenir les trois blocs<div>
.<!DOCTYPE html> <html> <head> <title>Form Rules</title> </head> <body> <header> <h1>Form Rules - 2021</h1> </header> <main> <div> <h1>How to fill in the request form</h1> <p> To receive the PDF document with the complete HTML course, it is necessary to fill in the following fields: </p> <ul> <li><strong> Name </strong></li> <li><strong> Surname </strong></li> <li><strong> Email Address </strong></li> <li>Nation</li> <li>Country</li> <li>Zip/Postal Code</li> </ul> </div> <hr> <div> <h2>Required fields</h2> <p>Bold fields are mandatory.</p> </div> <div> <h2>Steps to follow</h2> <p>There are four steps to follow:</p> <ol> <li>Fill in the fields</li> <li>Click the Submit button</li> <li> Check your e-mail and confirm your request by clicking on the link you receive </li> <li> Check your e-mail - You will receive the full HTML course in minutes </li> </ol> </div> </main> <footer> <p>Copyright Note - 2021</p> </footer> </body> </html>