Scribd
Importer
3 vues19 pages

Création d'un site web avec HTML5

Transféré par

ziraxdesign
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
3 vues19 pages

Création d'un site web avec HTML5

Transféré par

ziraxdesign
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

11/11/2025

R é a l i s a t i o n d ’ u n s i t e w etb s t a t i q u e a v e c H T M L 5 Formateur
ILIAS EL KHODARI

HTML5

R éalisation d’un s ite w eb statique avec HTML5


Formateur
ILIAS EL KHODARI

HTML5 Liens utlis


[Link]

[Link]

Formateur
Introduction à HTML ILIAS EL KHODARI

1
11/11/2025

1 In t r oduction à HTML
Formateur
ILIAS EL KHODARI

1. Squelette d’une page HTML

2. Balises de bases (contenu)

3. Couleurs

4. Listes en HTML

5. Liens en HTML

6. Balises multimédia (images, audio, vidéo)

7. Tableaux en HTML

1 In t r oduction à HTML
Formateur
ILIAS EL KHODARI

1 - Squelette d’une page Web :

1- Déclaration du type de document (HTML 5)

2- Élément racine qui contient tous les éléments


du document HTML

3 – Contient des informations descriptives sur


le document

4- Contient tout ce que nous voulons afficher


dans la fenêtre du navigateur

1 In t r oduction à HTML
Formateur
ILIAS EL KHODARI

1 - Squelette d’une page Web :


Notion de balise :

• Une balise est un élément de texte encadrée par les caractères inférieur (<) et supérieur (>)
• Une balise correspond à un élément du code HTML d'une page web (un objet, une mise en forme, ..)
• Une balise a généralement la forme suivante :

<balise attribut = valeur> Contenu </balise>

Balise ouvrante On change ces valeurs pour modifier l'apparence de Balise fermante
l'objet

Figure 8 : Forme d’une balise HTML

2
11/11/2025

1 In t r oduction à HTML
Formateur
ILIAS EL KHODARI

1 - Squelette d’une page Web :


Notion d’encapsulation :

• Les balises doivent être correctement encapsulées :

<p> <p>
<b> <b>
Paragraphe Paragraphe
</b> </p>
</p> </b>
Exemple 1 : Code correct Exemple 2 : Code incorrect

1 In t r oduction à HTML
Formateur
ILIAS EL KHODARI

1 - Squelette d’une page Web :


Notion d’encapsulation :

<div>
<h1>titre</h1>
<h2>un sous titre</h2>
<p>un paragraphe avec
<em>des mots importants</em>
pour terminer avec une image
<img src="[Link]" alt="un logo"/>
</p>
</div>
Exemple 3 : Code correct Figure 1: Encapsulation des balises HTML

1 In t r oduction à HTML
Formateur
ILIAS EL KHODARI

1 - Squelette d’une page Web :


Les types d’éléments HTML :
Il existe deux types d'éléments : bloc (bloc) et en ligne (inline)
• Les éléments « bloc » s'étendent en largeur pour remplir totalement l'espace offert par son conteneur. Par défaut, la
boîte devient aussi large que son conteneur, occupant 100% de l'espace disponible. Le nouvel élément bloc commence
dans une nouvelle ligne.
• Les éléments « inline » se suivent en ligne

Bloc Inline
h1 img span a

p
Figure3: Exemples d’éléments « inline »
div

Figure 2 : Exemples d’éléments « bloc »

3
11/11/2025

1 In t r oduction à HTML
Formateur
ILIAS EL KHODARI

1 - Squelette d’une page Web :


Les types d’éléments HTML :
Éléments de niveau bloc en HTML :
<address> <article> <aside> <blockquote> <canvas> <dd> <div>
<dl> <dt> <fieldset> <figcaption> <figure> <footer> <form>
<h1> - < H6> <header> <hr> <li> <main> <nav> <noscript>
<ol> <p> <pre> <section> <table> <tfoot> <ul>
<video>

Éléments de niveau inline en HTML :

<a> <abbr> <acronym> <b> <bdo> <big> <br>


<button> <cite> <code> <dfn> <em> <i> <img>
<input> <kbd> <label> <map> <object> <output> <q>
<samp> <script> <select> <small> <span> <strong> <sub>
<sup> <textarea> <time> <tt> <var>

1 In t r oduction à HTML
Formateur
ILIAS EL KHODARI

2- Balises de bases (contenu)


Rappel : <!DOCTYPE htlm>
<html>
<head>
<!-- en-tête du document -->
<meta charset=«UTF-8»>
<meta name=«description» content=«………….»>
<meta name=«keywords» content=«………….»>
<meta name=«author» content=«………….»>
<meta name=«viewport» content=«width=device-width, initial-
scale=1.0»>
<meta http-equiv=«refresh» content=«30»>
<title>….</title>
</head>
<body>
<!-- corps du document-->
</head>
</html>

1 In t r oduction à HTML
Formateur
ILIAS EL KHODARI

2- Balises de bases (contenu)


L’entête du document HTML :

<!DOCTYPE html>
Cette balise spécifie la version du langage HTML (HTML5 dans notre cas).

< html lang="fr" dir="rtl">


L'élément racine d'une page web. Peut spécifier un certain nombre de métadonnées
comme la langue et l'orientation de la page.

<head>
C'est l'élément entête qui contient les métadonnées d'une page web.
Cet élément n’est pas visible sur la page web.

4
11/11/2025

1 In t r oduction à HTML
Formateur
ILIAS EL KHODARI

2- Balises de bases (contenu)


La balise <meta> :

• Les métadonnées meta sont des données (informations) sur les données. La balise <meta> fournit des métadonnées
sur le documentEn HTML.
• Les métadonnées ne seront pas affichées sur la page, mais seulement interprétables par les machines.:
<meta charset="UTF-8">
Spécifie le format d'encodage du contenu.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Cet élément est indispensable pour avoir une page web responsive (qui s'adapte la taille de l'écran utilisé).

<meta name="author " content=" x y z ">


<meta name="description " content=" Cours web ">
<meta name="keywords " content=" HTML,CSS,JavaScript ">
Ces éléments fournissent des informations sur le document html (utilisées par les moteurs de recherche)

1 In t r oduction à HTML
Formateur
ILIAS EL KHODARI

2- Balises de bases (contenu)


La balise <title> :

<title>Mon document</title>
Définit le texte à afficher sur la barre du titre.

La balise <body> :

<body>
C'est l'élément qui contient tous les composants visibles de la page web : les textes, les
paragraphes, les images, les tableaux, les animations…

1 In t r oduction à HTML
Formateur
ILIAS EL KHODARI

2- Balises de bases (contenu)


Exemple d’une page HTML vide :

5
11/11/2025

1 In t r oduction à HTML
Formateur
ILIAS EL KHODARI

2- Balises de bases (contenu)


Les paragraphes en HTML :
• La balise <p> désigne un nouveau paragraphe

<p attributs = ‘’ valeur ’’ > votre paragpraphe </p>


o L'attribut "title" permet d'afficher un infobulle quand la souris survole le paragraphe.
o L'attribut " style" permet d'Applique un style CSS directement à la balise
o L'attribut "dir" permet de préciser la Direction du texte : ltr (gauche à droite) ou rtl (droite à gauche)
o Etc.. (listes des attributs et propriétés)
Exemple de déclaration d’un paragraphe :
<p title="définition html" style="color: blue" dir="rtl" draggable="true">
Le HTML (HyperText Markup Language) est le langage utilisé pour créer et
structurer les pages web.
Il permet d’organiser le contenu à l’aide de balises qui indiquent la fonction de
chaque élément, comme les titres, les paragraphes ou les images.
</p>

1 In t r oduction à HTML
Formateur
ILIAS EL KHODARI

2- Balises de bases (contenu)


Les titres en HTML:

• Il existe 6 niveaux de titres (headers) en HTML. Les balises <h1>, <h2>, …<h6> permettent l'affichage
de ces titres.

<body>
<h1 style="color: blue">Titre de Niveau1</h1>
<h2 style="color: red">Titre de Niveau2</h2>
<h3 style="color: Brown">Titre de Niveau3</h3>
<h4 style="color:Yellow ">Titre de Niveau4</h4>
<h5 style="color: Orange">Titre de Niveau5</h5>
<h6 style="color: Maroon">Titre de Niveau6</h6>
</body>

1 In t r oduction à HTML
Formateur
ILIAS EL KHODARI

3- Les couleurs en HTML

En HTML, On peut spécifier les couleurs de 3 manières différentes :


• En utilisant la valeur Hex : HEX est un système de numérotation hexadécimale des couleurs (basé sur les
chiffres décimaux de 0 à 9 et les lettres latines A à F). La conception Web utilise le code de couleur
hexadécimal sous forme #RRGGBB : RR est le rouge, GG est le vert et BB est le bleu. Chaque fraction de
couleur est comprise entre 00 et FF.
• En utilisant les noms des couleurs : Les noms des couleurs doivent être spécifiés en anglais (blue, red,
etc.).
• En utilisant la valeur RGB (Red, Green, Blue) : Le code couleur RGB est représenté sous forme de 3 couples
de codes en chiffres compris entre 0 et 255. Les trois codes représentent respectivement le dosage du
rouge, du vert et du bleu.

6
11/11/2025

1 In t r oduction à HTML
Formateur
ILIAS EL KHODARI

3- Les couleurs en HTML

• L’attribut bgcolor : permet de préciser la couleur utilisée pour le fond du document :


<body bgcolor="#66dae0">
<body bgcolor="rgb(234,182,118)">

• La balise <font> (obsolète)


<font color="FF0000">
Le code #FF0000 est la même chose que la couleur rouge notée red .
</font>

<p style="color:#8ebf42;"> C'est un texte vert


<span style="color:red">Le texte est maintenant en rouge.</span>
<span style="color:#556B2F">Voici le code pour le vert olive foncé.</span>
<span style="color:#745"> Le code 745 est l'abréviation de 774455.</span>
</p>

1 In t r oduction à HTML
Formateur
ILIAS EL KHODARI

4 - Les listes en HTML:


Les listes en HTML:
 Les listes sont utiles pour apporter de la clarté et de l’ordre aux documents web.
 En HTML, il est possible de définir trois types de listes : les listes ordonnées, les listes non ordonnées, et
les listes de définition
Les balises et les attributs utilisées sont:

• Balise ul : définir une liste non ordonnée


• Balise ol : définir une liste ordonnée
• Balise dl : définir une liste de définition
• Balise li : définir un élément de liste
o L'attribut "type" permet de préciser le type de numérotation utilisée pour présenter la liste
o L'attribut "value" permet d'initialiser le numéro courant par la valeur souhaitée

1 In t r oduction à HTML
Formateur
ILIAS EL KHODARI

4 - Les listes en HTML:

Les listes non ordonnées :

<ul>
<li>Élément1</li>
Exemple de liste non ordonnée <li type="circle">Élément2</li>
<li type="square">Élément3</li>
</ul>

7
11/11/2025

1 In t r oduction à HTML
Formateur
ILIAS EL KHODARI

4 - Les listes en HTML:

Les listes ordonnées :

<ol>
<li type="I">Élément1</li>
Exemple 1 de liste ordonnée <li type="i">Élément2</li>
<li type="A">Élément3</li>
<li type="a">Élément4</li>
</ol>

<ol>
<li>Élément1</li>
<li>Élément2</li>
Exemple 2 de liste ordonnée <li value="1">Élément3</li>
<li>Élément4</li>
</ol>

1 In t r oduction à HTML
Formateur
ILIAS EL KHODARI

4 - Les listes en HTML:

Les listes de définition :


o La liste de définition est délimitée par les balises <dl> (Definition List),
o L'élément dt (Definition Title) est utilisé pour donner le titre de la définition et l'élément dd pour
donner la définition.
o Pour les deux éléments dt et dd, la balise fermante est optionnelle.

<dl>
<dt>Langages</dt>
<dd>C++</dd>
<dd>Java</dd>
<dd>Python</dd>
Exemple de liste de définition <dt>SGBD</dt>
<dd>MySQL</dd>
<dd>MS SQL Server</dd>
<dd>Oracle</dd>
</dl>

1 In t r oduction à HTML
Formateur
ILIAS EL KHODARI

5-Liens en HTML
La balise <a>

 La balise <a> permet de créer un lien hypertexte, c'est-à-dire rendre une partie active suite au clic de
l’utilisateur.
 Pour chaque lien on associe une adresse destination où l'utilisateur sera envoyé après son clic.
 Cette balise permet également de créer des liens à l'intérieur d'un document ainsi que l'envoi d'un mail.
Les principaux attributs des liens hypertextes sont :
• href : la cible du lien
• title : affiche une info bulle sur le lien.
• Target :
_blank : ouverture de la page cible dans une nouvelle fenêtre.
_parent : ouverture de la page cible dans le cadre parent (de niveau immédiatement supérieur).
_self : (valeur par défaut), ouverture de la page cible dans le cadre d'appel.
_top : ouverture de la page cible dans la fenêtre hôte (par-dessus le FRAMESET).

8
11/11/2025

1 In t r oduction à HTML
Formateur
ILIAS EL KHODARI

5-Liens en HTML

Exemples de liens

• Lien vers un autre document HTML(Lien relatif)

<a href="html/[Link]" title="Page inscription">


Cliquer ici pour s'inscrire…
</a>

• Lien vers une url (Lien absolu)

<a href="[Link] title="google">


allez vers google…
</a>

1 In t r oduction à HTML
Formateur
ILIAS EL KHODARI

5-Liens en HTML
Exemples de liens

• Un lien qui s'ouvre dans une nouvelle fenêtre

<a href="[Link] title="google" target="_blank">


allez vers google...
</a>

• Lien vers un emplacement dans le même document (Lien interne)

<body>
<h1 id="haut">ici haut de page </h1>
<br><br> ……
<a href="#haut"> vers le haut </a>

1 In t r oduction à HTML
Formateur
ILIAS EL KHODARI

5-Liens en HTML

Exemples de liens
• Lien pour envoyer un mail

<a href="[Link] target="_blank">


Contactez les services de la société digibus solutions…
</a>

• Lien hypertexte sur une image

<a href="[Link] title="contact DIGIBUS">


<img src="html/img/[Link]" width="50“height="50" alt="contact“
class="img-responsive"/>
</a>

9
11/11/2025

1 In t r oduction à HTML
Formateur
ILIAS EL KHODARI

6- Balises multimédia (images, audio, vidéo) :

 La balise <img> :

 La balise <img> permet d’insérer une image dans une page web.
 L’attribut src définit le chemin de l'image source
 l’attribut alt le texte alternatif si l'image n'est pas affichée.
 Les attributs width et height définissent la taille de l’image (en pixels)

Exemple :

<img src="html/img/[Link]" alt="Image non trouvée" width="160" height="100">


<br>
<img src=« lien_imag » alt="Image non trouvée" width="160" height="100">

1 In t r oduction à HTML
Formateur
ILIAS EL KHODARI

6- Balises multimédia (images, audio, vidéo) :

 La balise <picture>

 L'élément HTML <picture> permet d'afficher différentes images pour différents appareils ou tailles
d'écran. Le navigateur choisira la source la plus pertinente selon :
 La disposition de la page
 L'appareil utilisé
 Les formats pris en charge
 Si aucune correspondance n'est trouvée parmi les éléments <source>, c'est le fichier défini par l'attribut
src de l'élément <img> qui sera utilisé.

1 In t r oduction à HTML
Formateur
ILIAS EL KHODARI

6- Balises multimédia (images, audio, vidéo) :

 La balise <picture>

<picture>

<source srcset="html/img/[Link]" media="(min-width : 600px)">

<img src="html/img/[Link]" alt="Pas d'image" width="200px" height="140px">

</picture>

10
11/11/2025

1 In t r oduction à HTML
Formateur
ILIAS EL KHODARI

6- Balises multimédia (images, audio, vidéo) :

 La balise <audio>

 L'élément <audio> permet de lire un fichier audio dans la page HTML


 Controls : pour afficher les boutons play, stop, preview…
 Autoplay : pour démarrer la lecture automatique de l'audio lors du chargement de la page web.
 Le navigateur essaie de lire la première source. En cas d'erreur, il passe à la deuxième source.
 Si le navigateur ne prend pas en charge l'élément <audio>, il affiche le message en bas

<audio controls autoplay>


<source src="html/sons/[Link]" type="audio/ogg">
<source src="html/sons/son1.mp3" type="audio/mp3">
Votre navigateur ne supporte pas la balise "audio".
</audio>

1 In t r oduction à HTML
Formateur
ILIAS EL KHODARI

6- Balises multimédia (images, audio, vidéo) :

 La balise <video>

 L'élément <video> permet d'incorporer une vidéo dans une page Web.
 Controls : pour afficher les boutons play, stop, …
 Autoplay : pour démarrer la lecture automatique de la vidéo lors du chargement de la page web.
 Le navigateur essaie de lire la première source. En cas d'erreur, il passe à la deuxième source.
 Si le navigateur ne prend pas en charge l'élément <video>, il affiche le message en bas.

<video width="320" height="240"controls autoplay>


<source src="html/movies/[Link]" type="video/ogg">
<source src="html/movies/movie1.mp4" type="video/mp4">
Votre navigateur ne supporte pas la balise "video".
</video>

1 In t r oduction à HTML
Formateur
ILIAS EL KHODARI

6- Balises multimédia (images, audio, vidéo) :

 La balise <iframe>

 La balise <iframe> permet d’afficher une vidéo


 Pour ce faire, on peut utiliser l’identifiant de la vidéo pour y faire référence dans le code HTML.

<iframe width="560" height="315"


src="[Link]
title="YouTube video player" frameborder="0" allow="accelerometer;
autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-
picture; web-share" referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen></iframe>

11
11/11/2025

1 In t r oduction à HTML
Formateur
ILIAS EL KHODARI

6- Balises multimédia (images, audio, vidéo) :

 La balise <object>

 L'élément <object> est une solution polyvalente pour inclure des objets génériques.
 Cet élément permet aux auteurs HTML de spécifier tout ce qui est requis par un objet pour sa
présentation par un agent utilisateur.
Exemple 1 : intégrer un document HTML dans un autre document HTML

<object border="2" data = "html/[Link]" type = "text/html" width = "300"


height = "200"> alt : <a href = "html/[Link]">[Link]</a> </object>
Exemple 2 : intégrer un document PDF dans un document HTML

<object border="2" data = "html/data/[Link]" type = "application/pdf" width =


"300" height = "200">alt : <a href = "html/data/[Link]">[Link]</a></object>

1 In t r oduction à HTML
Formateur
ILIAS EL KHODARI

6- Balises multimédia (images, audio, vidéo) :

 a balise <figure>

 La balise <figure> est utilisée pour regrouper un contenu illustratif ou visuel accompagné, le plus
souvent, d’une légende (avec la balise <figcaption>).
 Autrement dit, elle sert à associer une image, un graphique, un code ou une illustration avec sa
description.

<figure>
<img src="html/img/[Link]" alt="tasse cafe" width="160" height="100">
<figcaption>Sur une table aux tons chauds repose une élégante tasse blanche,
remplie d’un café noir aux reflets ambrés.</figcaption>
</figure>

1 In t r oduction à HTML
Formateur
ILIAS EL KHODARI

7- Tableaux avec du HTML :

 La balise <table>

 Pour insérer un tableau, on utilise la balise <table>.


 À l’intérieur de la balise <table>, la balise <tr> (table row) signifie une ligne.
 Chaque ligne est composée d’une ou plusieurs cellules de données définies par la balise <td>.
 Pour l’entête du tableau, on utilise la balise <th> (table header).
 L’attribut Border permet de fixer la largeur des bordures des cellules.

<table border="1">
<caption align="bottom">Liste des employés</caption>
<tr><th>Nom</th><th>Prénom</th><th>Age</th></tr>
<tr><td>ENAANAI</td><td>Adil</td><td>40</td></tr>
<tr><td>SAFIR</td><td>Laila</td><td>32</td></tr>
<tr><td>HAMIM</td><td>Mohamed</td><td>39</td></tr>
</table>

12
11/11/2025

1 In t r oduction à HTML
Formateur
ILIAS EL KHODARI

7- Tableaux avec du HTML :

 La balise <table>

Espacement ses cellules

L’attribut "cellspacing" permet de définir l'espacement entre les cellules du tableau.


l'attribut "cellpadding" permet de définir l'espacement entre le contenu de la cellule et ses bords.

<table border="1" cellspacing=10 cellpadding=5 >


<caption align="bottom">Liste des employés</caption>
<tr><th>Nom</th><th>Prénom</th><th>Age</th></tr>
<tr><td>ENAANAI</td><td>Adil</td><td>40</td></tr>
<tr><td>SAFIR</td><td>Laila</td><td>32</td></tr>
<tr><td>HAMIM</td><td>Mohamed</td><td>39</td></tr>
</table>

1 In t r oduction à HTML
Formateur
ILIAS EL KHODARI

7- Tableaux avec du HTML :

 La balise <table>
Division des lignes et des colonnes (fusion des cellules)
Les attributs colspan et rowspan indiquent sur combien de colonnes et de lignes s'étend la cellule
Exemple : On souhaite que la première cellule du tableau prenne toute la largeur de la ligne. Elle doit donc
déborder sur 3 cellules horizontales.

<table width=60% border=1>


<tr>
<td colspan=3>cellule 1</td>
</tr>
<tr> <td width=33%>cellule 1</td>
<td width=33%>cel 2</td>
<td width=34%>3</td> </tr>
</table>

2 Les Balises de structuration

Les Balises de structuration

13
11/11/2025

2 Les Balises de structuration

 Les balises de structuration en HTML5 sont des éléments qui permettent

d'organiser le contenu d 'u ne page web de manière logique et

sé manti qu e. Cel a facilit e la c omp réh ens ion du cont enu p ou r les mote u rs

de recherche, ainsi que pour les personnes utilisant des technologies

d'assistance (comme les lecteurs d'écran)

2 Les Balises de structuration

Les Bal ises d e st r ucturation


Les Ba lises no n sémantiques L es B a lises sém a ntiq ues

• <header> • <aside>
• <div>
• <footer> • <main>
• <span>
• <article> • <figure> et <figcaption>
• <b> et <i>
• <section> • <mark>
• <font>
• <nav> • <details> et <summary>

2 Les Balises de structuration

L es B a lises sém a ntiq ues

 Les balises sémantiques en HT ML sont des balises qui décrivent

expliciteme nt le t ype de cont enu qu'elles contienne nt , ce qui pe rme t aux

navigateurs, moteurs de recherche, et développeurs de mieux

comprendre la structure et la signification d'une page web.

 L 'uti lis atio n de balises sémantiques améliore l 'ac ces sibil ité et le

référencement (SEO) du site, tout en facilitant sa maintenance.

14
11/11/2025

2 Les Balises de structuration

Les Ba lises no n sémantiques

 Les balises non sémanti ques en HTML sont des éléments qui ne

définissent pas de manière explicite la signification ou le rôle de leur

contenu.

 Autrement dit, ces balises sont utilisées pour structurer une page sans

indiquer directement le t ype ou la nature du contenu q u 'el les

contiennent.

3 Les Balises de structuration

Les Ba lises no n sémantiques

• La balise <div>
Usage : Utilisé pour grouper des éléments sans indiquer leur signification ou leur fonction particulière.

Exemple :
<div class="container" border="1">
<p>Contenu d’une balise div ici</p>
</div>

• La balise <span>

Usage : Utilisé pour styliser ou marquer une portion de texte dans une ligne sans changer sa structure ou
sa signification..

Exemple :
<p> Ceci es t un <s pan s tyle="color :re d ;">t exte coloré</s pan> </p >

2 Les Balises de structuration

L es B a lises sém a nt iq ues

• <header> • <aside>

• <footer> • <main>

• <article> • <figure> et <figcaption>

• <section> • <mark>

• <nav> • <details> et <summary>

15
11/11/2025

3 Les Balises de structuration

L es B a lises sém a nt iq ues

• Les balises <header> et <footer>

Une page est généralement composée d'un header et d'un footer.


• Le header peut comprendre (liste non exhaustive) :
<header>
o un menu,
Ici le contenu de mon header…
o un logo, </header>
o des liens vers des réseaux sociaux,
o …
• Le footer reprend en général des liens vers les crédits et les <footer>
<!-- Ici le contenu de mon footer -->
mentions légales, et aussi vers certaines pages qui ne sont pas </footer>
listées dans le menu.

2 Les Balises de structuration

L es B a lises sém a nt iq ues

• Les balises <main> et <section>

La balise <main> spécifie le contenu principal de la page web.


La balise <section> permet de segmenter le contenu en plusieurs sections.
<main>
<p>Texte d'introduction de mon contenu.</p>
<section>
<h2>Titre de ma section</h2>
Exemple <p>Texte de ma section.</p>
</section>
<section>
<h2>Titre de ma section</h2>
<p>Texte de ma section.</p>
</section>
</main>

3 Les Balises de structuration

L es B a lises sém a nt iq ues

• La balise <aside>

La balise <aside> permet d'afficher du contenu qui n'a pas de rapport direct avec le contenu
principal, souvent représenté comme une sidebarre

<main>
<p>
Texte de mon contenu.
</p>
Exemple <aside>
<p>
Texte sans rapport direct.
</p>
</aside>
</main>

16
11/11/2025

2 Les Balises de structuration

L es B a lises sém a nt iq ues

• La balise <mark>

La balise <mark> en HTML est utilisée pour mettre en surbrillance ou marquer un texte spécifique,
généralement pour signaler une correspondance ou un élément important.

<p>Le terme <mark>HTML</mark> est un langage de balisage utilisé pour


structurer les pages web.</p>

2 Les Balises de structuration

L es B a lises sém a nt iq ues

• Les balises <details> et <summary>

Les balises <details> et <summary> en HTML sont utilisées pour créer des éléments interactifs qui
permettent aux utilisateurs de développer ou de réduire du contenu supplémentaire, souvent
appelé "détails", au sein d'une page.

<details>
<summary>Cliquer pour voir plus de détails</summary>
<p>Voici le contenu caché que l'utilisateur peut voir en cliquant sur le résumé ci-dessus.</p>
</details>

3 Les Balises de structuration

L es B a lises sém a nt iq ues

• La balise <nav>

La balise <nav> (utilisée avec une balise <ul> ou <ol>) permet de spécifier les éléments de
navigation de la page (le menu).
Le menu consiste en une liste d'éléments permettant de naviger entre plusieurs pages du même
site, ou bien vers plusieurs sections de la page.

17
11/11/2025

3 Les Balises de structuration

L es B a lises sém a nt iq ues

• La balise <nav>

<nav>
<ul>
<li><a href="[Link]">Accueil</a></li>
<li><a href="[Link]">Inscription</a></li>
<li><a href="a_propos.html">À propos</a></li>
<li><a href="[Link]">Contact</a></li>
</ul>
</nav>

1 In t r oduction à HTML
Formateur
ILIAS EL KHODARI

L es B a lises sém a nt iq ues

• La balise <figure> -- rappel--

 La balise <figure> est utilisée pour regrouper un contenu illustratif ou visuel accompagné, le plus
souvent, d’une légende (avec la balise <figcaption>).
 Autrement dit, elle sert à associer une image, un graphique, un code ou une illustration avec sa
description.

<figure>
<img src="html/img/[Link]" alt="tasse cafe" width="160" height="100">
<figcaption>Sur une table aux tons chauds repose une élégante tasse blanche,
remplie d’un café noir aux reflets ambrés.</figcaption>
</figure>

1 In t r oduction à HTML
Formateur
ILIAS EL KHODARI

L es B a lises sém a nt iq ues

• recapitulatif_balises structuration
balise rôle exemple
En-tête du document, généralement logo +
header navigation <header>…</header>
footer Pied de page <footer>…</footer>
article Contenu autonome (article, billet) <article>…</article>
section Regroupe une section thématique <section>…</section>
nav Navigation principale ou secondaire <nav>…</nav>
aside Contenu secondaire (barre latérale) <aside>…</aside>
main Contenu principal de la page <main>…</main>
figure Figure contenant media <figure>…<figcaption>…</figcaption></figure>
figcaption Légende d'une figure <figcaption>…</figcaption>
Exemple mark Texte mis en surbrillance <mark>…</mark>
details Bloc déroulable <details><summary>…</summary></details>
summary Titre du bloc details <summary>…</summary>

18
11/11/2025

1 In t r oduction à HTML
Formateur
ILIAS EL KHODARI

MINI PROJET EN HTML

Enoncé de projet

Portfolio ilias el khodari

19

Vous aimerez peut-être aussi