Université Abdelmalek Essaadi

Faculté des Sciences et Techniques

Tanger

Initiation au HTML

Préparé Par :
Douae El Karout Youssra Aziz
Chaimae Chouaa Amina Jbilou
Fatima Ezzahrae El halloufi Amina Fikri
Oumaima Ezzahraa Jami Myriam Touil
Amal Elhadyne Khaoula Ziani Tan Tan
Abdelmajid Benjelloun

Département Génie Informatique

Cours pour les étudiants Licence Sciences et Techniques en Informatique
Module : Digital Skills
Pr : A. AZMANI – Année universitaire 2025–2026
Table des matières
I. Introduction au Web & à HTML ...................................................................................................4
I.1. Qu’est-ce qu’une page web ?.....................................................................................................4
I.2. Fonctionnement Client - Serveur ...............................................................................................4
I.2.1. Client ..................................................................................................................................4
I.2.2. Le serveur...........................................................................................................................4
I.2.3. Interaction client – serveur .................................................................................................5
I.3. Introduction à HTML .................................................................................................................5
I.3.1. Définition ...........................................................................................................................5
I.3.2. Création d’une première page HTML ..................................................................................5
I.3.3. Structure d’un fichier HTML ................................................................................................8
...................................................................................................................................................8
II. HTML : Notions de base ..............................................................................................................9
II.1. Balise vs Élément ? ...................................................................................................................9
II.2. Les balises imbriquées (Nested tags) ...................................................................................... 11
II.3. Les fondamentaux du HTML : des balises clés ......................................................................... 11
II.3.1. Head .............................................................................................................................. 11
II.3.2. Paragraphes : <p>….</p>................................................................................................. 15
II.3.3. Titres : <h1>….</h6> ....................................................................................................... 15
II.4. Les attributs ........................................................................................................................... 16
II.5. Les commentaires .................................................................................................................. 16
III. Intégration des Images ......................................................................................................... 16
III.1. Comment intégrer une image à une page web ? .................................................................... 16
III.2. Les formats d'image .............................................................................................................. 19
III.3. L’attribut srcset et sizes ......................................................................................................... 20
III.4. Optimiser le chargement avec l’attribut loading..................................................................... 22
IV. Les Liens en HTML et présentation des URL et chemins ........................................................ 22
IV.1. Balise <a> .............................................................................................................................. 22
IV.2. Attribut « href » ..................................................................................................................... 23
IV.3. Attribut « target » .................................................................................................................. 23
IV.4. Utiliser une image comme lien............................................................................................... 24
IV.5. Attribut « title » ..................................................................................................................... 24
IV.6. Comprendre les URL et les chemins (paths) ........................................................................... 25
IV.6.1. Qu’est-ce qu’une URL ? ................................................................................................... 25
 IV.6.2. Notion de chemin (path) ................................................................................................. 25
IV.6.3. Exemple de structure de répertoires ............................................................................... 25
 Lier des fichiers dans le même dossier.............................................................................. 26
 Lier vers un sous-dossier .................................................................................................. 26
 Remonter dans un dossier parent .................................................................................... 26
 Chemins plus complexes .................................................................................................. 27
IV.6.4. Fragments de documents (ancres) .................................................................................. 27
IV.6.5. URL absolues et URL relatives ......................................................................................... 28
IV.6.6. Liens de courriel ([Link] ............................................................................................... 30
V. Structurer l'information avec les listes ....................................................................................... 30
V.1. Listes non ordonnées (<ul>) .................................................................................................... 31
V.2. Listes ordonnées (<ol>) ........................................................................................................... 31
V.3. Imbrication de listes (listes imbriquées) .................................................................................. 32
V.4. Listes de description (<dl>) ..................................................................................................... 32
VI. Intégrer du contenu multimédia : Audio et Vidéo ................................................................. 33
VI.1. Audio .................................................................................................................................... 33
VI.2. Video .................................................................................................................................... 34
VII. HTML Sémantique ................................................................................................................ 35
VII.1. Eléments sémantiques Vs Non Sémantiques ......................................................................... 35
VII.2. Éléments sémantiques HTML pour structurer une page ........................................................ 37
VII.2.1. Élément HTML <section> ............................................................................................... 37
VII.2.2. Élément HTML <article> ................................................................................................ 38
VII.2.3. Élément HTML <header> ............................................................................................... 38
VII.2.4. Élément HTML <footer>................................................................................................. 39
VII.2.5. Élément HTML <nav> ..................................................................................................... 39
VII.2.6. Élément HTML <aside> .................................................................................................. 40
VII.2.7. Élément HTML <figure> et <figcaption> ......................................................................... 40
VII.3. Balises de style VS Balises Sémantiques ................................................................................ 40
VIII. Interagir avec l’utilisateur : les Formulaires ........................................................................... 41
VIII.1. L’élément <form> ................................................................................................................ 41
VIII.2. <select> : l'élément de liste déroulante ............................................................................... 42
VIII.3. L’élément <textarea> .......................................................................................................... 43
VIII.4. <input> : l'élément de saisie dans un formulaire .................................................................. 44
VIII.5. L’élément <label> ................................................................................................................ 48
IX. Organiser les données avec les tableaux ............................................................................... 49
X. Bibliothèques et extensions....................................................................................................... 52
X.1. Canvas et WebGL.................................................................................................................... 52
X.2. [Link] .................................................................................................................................. 53
X.3. <model-viewer> ..................................................................................................................... 53
 I. Introduction au Web & à HTML
I.1. Qu’est-ce qu’une page web ?
Document numérique accessible via Internet et affiché dans un navigateur web
Elle est :
 Identifiée par une adresse (URL : Uniform Resource Locator, c’est l'adresse
unique d'une ressource sur Internet, comme une page web, une image ou une
vidéo, indiquant au navigateur où et comment y accéder)
 Stockée sur un serveur
 Affichée à l’utilisateur sous forme visuelle (texte, images, boutons, etc.)

Une page web peut contenir :

 Du texte
 Des images
 Des boutons
 Des formulaires
 De l’audio et de la vidéo
 Des liens pour naviguer vers d’autres pages ou sections
=> Un site web est un ensemble de pages web reliées entre elles par des liens.

I.2. Fonctionnement Client - Serveur

L;es ordinateurs connectés au Web jouent généralement deux rôles : client ou serveur.

I.2.1. Client
Un client est :
 L’appareil de l’utilisateur (ordinateur, smartphone, tablette)
 Et le logiciel permettant d’accéder au Web (le plus souvent un navigateur web comme
Chrome, Firefox ou Edge) utilisé par l’utilisateur
Exemples de clients :
 Un ordinateur connecté au Wi-Fi
 Un téléphone connecté au réseau mobile

I.2.2. Le serveur
Un serveur est un ordinateur :
 Connecté en permanence à Internet
 Stocke les fichiers qui composent un site web (les fichiers HTML, CSS, JavaScript,
images…)
 I.2.3. Interaction client – serveur
Au niveau le plus simple, Le fonctionnement du Web repose sur l’échange suivant :
 Le client envoie une requête au serveur lorsqu’un utilisateur saisit une adresse ou clique
sur un lien
 Le serveur vérifie que l'URL demandée correspond à un fichier existant.
 Si c'est le cas, Le serveur répond aux requêtes des utilisateurs par l’envoi des documents
demandés
 Si le fichier n'existe pas ou que le traitement est impossible, le serveur web renvoie un
message d'erreur au navigateur. Le message d'erreur le plus fréquemment rencontré
est 404 Page non trouvée (cette erreur étant plutôt fréquente, certains ont même
personnalisé et adapté les pages d'erreurs 404 de leurs sites).
 Le client reçoit la réponse contenant les fichiers de la page web.
 Le navigateur interprète les fichiers reçus :

 Il analyse le HTML pour comprendre la structure de la page,

 Applique le CSS pour le style,
 Exécute le JavaScript pour le comportement et l’interactivité.

 Enfin, le navigateur affiche la page web à l’utilisateur.

I.3. Introduction à HTML

I.3.1. Définition
- HTML signifie « HyperText Markup Language » ou « langage de balises pour
l'hypertexte », L' hypertexte désigne les liens qui relient les pages web entre elles,
que ce soit au sein d'un même site web ou entre différents sites web. Les liens sont
un aspect fondamental du Web. Ce sont eux qui forment cette « toile » (ce mot est
traduit par web en anglais). En téléchargeant du contenu sur l'Internet et en le reliant
à des pages créées par d'autres personnes, vous devenez un participant actif du World
Wide Web.
- Définit la structure et le contenu de la page, il sert à décrire un texte au navigateur
si c’est un titre, paragraphe, tableau, liste, texte important…
- Compilé par le navigateur
- D'autres technologies sont utilisées avec HTML pour décrire la présentation d'une
page (CSS) et/ou ses fonctionnalités interactives (JavaScript). Pour la présentation
visuelle (couleurs, tailles, mise en page)

I.3.2. Création d’une première page HTML

Avant de commencer à écrire du code HTML, il est important de disposer des outils nécessaires.
a. Outils nécessaires
Pour créer et exécuter une page HTML, nous avons besoin de :
 Un éditeur de texte
 Un éditeur de texte permet d’écrire le code HTML.
Il existe plusieurs éditeurs possibles :
 Bloc-notes (Notepad) : simple, mais très limité.
 Éditeurs plus avancés (recommandés) :
o Visual Studio Code (VS Code) (fortement recommandé pour ce
cours)
o Notepad++
o Sublime Text

Visual Studio Code offre des fonctionnalités très utiles pour les débutants :
 Coloration automatique du code,
 Aide à l’écriture (auto-complétion),
 Extensions (comme Live Server),
 Interface claire et moderne.
Installation de VS Code :
1. Aller sur le site officiel : [Link]
2. Télécharger la version adaptée à votre système (Windows, macOS ou
Linux)
3. Installer le logiciel en suivant les étapes proposées
 Un navigateur web
Le navigateur permet d’afficher la page HTML.
C’est lui qui interprète le code HTML et le transforme en éléments graphiques (texte, images,
liens…).
Exemples de navigateurs :
 Google Chrome
 Mozilla Firefox
 Microsoft Edge
b. Création d’une première page HTML
Méthode 1 : Utilisation de Visual Studio Code + Live Server (recommandée)
Live Server est une extension de VS Code qui permet d’exécuter une page HTML
automatiquement dans le navigateur.
Installation de Live Server :
1. Ouvrir Visual Studio Code
2. Aller dans l’onglet Extensions
3. Rechercher Live Server
4. Cliquer sur Installer
Exécution de la page HTML :
1. Créer un dossier de travail sur l’ordinateur
(exemple : MonPremierSite)
2. Ouvrir Visual Studio Code
3. Dans VS Code, cliquer sur Fichier → Ouvrir un dossier et sélectionner le dossier créé
4. Créer un nouveau fichier dans ce dossier
(exemple : [Link])
5. Écrire le code HTML dans le fichier
6. Faire un clic sur Go Live en bas à droite sur l’interface

 La page s’ouvre automatiquement dans le navigateur.

 Toute modification (après enregistrement) est affichée sans recharger la page.
 Live Server ne fonctionne que sur des fichiers HTML enregistrés (.html).
Avantages de Live Server :
 Actualisation automatique de la page à chaque modification du code
 Gain de temps
 Très pratique pour apprendre et tester rapidement
Méthode 2 : Méthode classique
 Étapes :
1. Créer un fichier texte vide
2. Renommer le fichier en changeant l’extension .txt par .html
(exemple : [Link])
3. Ouvrir le fichier avec un éditeur de texte (ex : VS Code)
4. Écrire le code HTML
5. Double-cliquer sur le fichier ou faire clic droit → Ouvrir avec → Navigateur
 Cette méthode est simple et idéale pour débuter, mais nécessite de recharger
manuellement la page après chaque modification.

I.3.3. Structure d’un fichier HTML

Ce que vous devez écrire dans tout document HTML :

Figure 1 - Code Minimal HTML

Un document HTML respecte une structure bien définie, comprise par le navigateur.
- Un document HTML bien formé est encapsulé dans l'élément <html> qui représente
la racine du document.
Tout autre élément du document doit être à l’intérieur de cet élément.
- Un document HTML se divise en deux parties principales :
o <head>
o <body>
- La partie <head> est utilisé pour :
o Définir le titre de la page
o Lier des fichiers externes
o Déclarer des métas-données
- La partie <body> contient le contenu visible de la page web (texte, images, liens,
etc.).
- Selon la documentation officielle de HTML, « doctype » est une directive
obligatoire dans une page HTML :
 o En son absence, le navigateur utilise le quirks mode, un mode de rendu
ancien pouvant provoquer des problèmes d’affichage.
o Sa présence permet au navigateur d’utiliser le mode standard, conforme aux
spécifications modernes de HTML
 Cette structure est indispensable et sera présente dans tous les fichiers HTML.

II. HTML : Notions de base

II.1. Balise vs Élément ?
- Un élément HTML est défini par une balise de début, un contenu, et une balise de
fin (si elle existe).
- Une balise HTML est un mot-clé entouré par des < >
- Les balises indiquent au navigateur comment interpréter le contenu.
- Exemple :

Figure 2 - Exemple de balise HTML

 <p> est une balise ouvrante

 </p> est une balise fermante
- Les balises qui ont une ouverture et fermeture (<html></html>) s’appellent des
balises doubles.
- Remarques :
Certains éléments HTML n’ont pas de contenu (comme l’élément <hr/>).
Ces éléments sont appelés éléments vides.
Les éléments vides ont seulement une balise ouvrante, et n’ont pas de balise de
fermeture.
Les balises qui n’ont pas de fermeture s’appellent aussi balises auto fermantes.

Figure 3 - Exemple balise double et balise autofermante

Figure 4 - Résultat sur le navigateur

Liste des éléments vides :
 <area>
 <base>
 <br>
 <col>
 <embed>
 <hr>
 <img>
 <input>
 <link>
 <meta>
 <param> Deprecated (obsolète)
 <source>
 <track>
 <wbr>
Le reste des balises est double.
Une balise peut être :
o Block : Une balise avec largeur de 100% de l’écran
o Inline : Une balise avec largeur égale à son contenu

Figure 5 - Résultat sur le navigateur

Figure 6 - Exemple balise block et inline

Figure 7 - Inspection d'une balise de type bloc sur le navigateur

 Figure 8 - Inspection d'une balise de type inline sur le navigateur

II.2. Les balises imbriquées (Nested tags)

Les éléments HTML peuvent être imbriqués (cela signifie que des éléments peuvent en
contenir d’autres).

Tous les documents HTML sont composés d’éléments HTML imbriqués.

Voici un exemple HTML basique montrant l’imbrication des éléments :

Figure 9 - Exemple de Balises Imbriquées

Explication simple :

 <html> contient tout le document

 <body> est à l’intérieur de <html>
 <h1> et <p> sont à l’intérieur de <body>

II.3. Les fondamentaux du HTML : des balises clés

II.3.1. Head
a. Title
 Figure 10 - Balise title Figure 11 - Titre dans l'onglet du navigateur

 L'élément <title> définit le titre du document (qui est affiché dans la barre de titre du
navigateur ou dans l'onglet de la page).
 L'élément <title> est toujours utilisé au sein de l'élément <head> de la page.
 Le titre est important, car il fait partie des éléments principaux qui sont scannés lors de
l'indexation d'une page par les moteurs de recherche, les algorithmes des moteurs de
recherche l'utilisent pour déterminer l'ordre d'affichage des pages dans les résultats de
recherche.

Voici quelques conseils pour créer de bons titres :

 Optez pour un titre long et descriptif (évitez les titres d’un ou deux mots)
 Les moteurs de recherche affichent environ 50 à 60 caractères du titre, le dépassement
de 60 caractères affichera des points au lieu de terminer le titre sur les moteurs de
recherche. Alors si un mot clé important est à la fin, il sera éliminé.

Figure 12 - Exemple de dépassement

 Le titre doit être descriptif et précis. Évitez le remplissage de mots-clés. (Exemple :

Alors, tandis que …).
 Placement des mots clés : Placer les mots-clés les plus importants au début du titre. C'est
là qu'ils ont le plus de poids pour le SEO.

b. Liaison avec fichiers

La partie head est utilisée aussi pour lier une page HTML avec un fichier CSS ou
Javascript externe

Figure 13 – Exemple de liaison avec des fichiers externes

 Figure 14 - Liaison avec fichier css

 Cette ligne permet de lier un fichier CSS à la page HTML

 rel signifie « relationship » (relation).
Cet attribut est utilisé dans la balise <link> pour indiquer au navigateur le rôle du fichier
lié.
 stylesheet est la valeur qui indique au navigateur que le fichier lié est une feuille de style
destinée à être appliquée à la page courante.
 href="[Link]" est le chemin vers ce fichier CSS
 Le navigateur comprend alors qu’il doit utiliser les règles CSS contenues dans ce fichier
pour mettre en forme les éléments HTML (couleurs, tailles, mise en page, etc.)

Figure 15 - Liaison avec fichier Javascript

 Cette balise permet d’importer un fichier JavaScript

 src="[Link]" indique le fichier JavaScript à charger
 JavaScript sert à rendre la page interactive (clics, animations, formulaires, etc.)

c.Méta-données

Figure 16 - Exemple des balises meta

• Les métadonnées HTML sont des informations à propos d’un document HTML qui ne
s’affichent pas directement sur la page web, mais qui sont utilisées par les navigateurs,
les moteurs de recherche et d’autres services web pour comprendre et traiter le contenu.

• Les métadonnées se trouvent toujours à l’intérieur de la balise <head> du document

HTML.
• Les balises <meta> servent à définir une page HTML : Description, mots clé, Encodage,
Auteur et autres informations.
 • La balise <meta description> fournit le texte qui s’affiche au-dessous du titre dans les
moteurs de recherche.

Figure 17 - Exemple description

D’autres exemples d’utilisation des balises meta :

 <meta charset=‘’UTF-8’’> : Définit l’encodage des caractères du document

 <meta name=‘’description’’>: Donne une courte description à la page web. Ne pas
depasser 150 caractères.
 <meta name=‘’keywords’’> : Pour définir les mots clés, les mots clés doivent référer
le contenu de la page.
 <meta name=‘’author’’> : Pour définir le nom du responsable du contenu
 <meta name=‘’creator’’> : Pour définir le nom du développeur.

a. <style> : l'élément d'information de style

 L'élément <style> contient des informations de mise en forme pour un document ou une
partie d'un document. Il contient du CSS, qui est appliqué au contenu du document
contenant l'élément <style>.

Figure 18 - Résultat sur le navigateur

Figure 19 - exemple d'utilisation de style
  L'élément <style> doit être inclus dans l'élément <head> du document. En général, il est
préférable de placer vos styles dans des feuilles de style externes reliées à l’aide de la
balise <link> afin de mieux organiser et maintenir le code.

II.3.2. Paragraphes : <p>….</p>

 La balise <p> sert à définir un paragraphe.
 Une balise double, de type block.
 Conseils d’utilisation d’accessibilité :
o Utilisez une balise <p> par paragraphe de texte.
o Assurez-vous que chaque <p> contient du contenu réel, et non pas des espaces
vides
o La mise en forme (retour à la ligne, espacement) doit être géré avec le CSS.

Figure 21 - code html Figure 20 - Résultat sur le navigateur

Une structure HTML correcte facilite la compréhension et la navigation pour les technologies
d’assistance ce qui permet aux lecteurs d’écran de naviguer facilement dans le contenu.

II.3.3. Titres : <h1>….</h6>

 Balises doubles et Blocks.
 Les éléments HTML <h1> à <h6> représentent les six niveaux de titre
 Elles organisent le contenu, <h1> correspond au niveau le plus haut et <h6> correspond
au niveau le plus faible.
 Conseils d’utilisation :
o On utilise un seul H1 dans une page HTML.
o Respect de l’ordre : Ne pas commencer par un H2 puis un H1.
o Il ne faut pas sauter de niveaux entre les titres : par exemple, ne pas passer
directement d'un <h2> à un <h4>
o Utilisez les titres pour la structure sémantique, pas pour le style visuel.
o Intégrez des mots-clés pertinents dans vos titres.
 Figure 23 - code HTML Figure 22 - Affichage sur le navigateur

II.4. Les attributs

Tous les éléments HTML peuvent avoir des attributs.
- Les attributs fournissent des informations supplémentaires sur les éléments.
- Les attributs sont toujours spécifiés dans la balise de début.
- Les attributs sont généralement écrits sous forme de paires nom/valeur, comme :
nom="valeur".

Figure 24 - Exemple d'utilisation des attributs

Certains attributs sont spécifiques à certains éléments, tandis que d’autres (comme id et
class) peuvent être utilisés sur presque tous les éléments HTML.

II.5. Les commentaires

Figure 25 - Commentaire en HTML

Les commentaires HTML permettent d’ajouter des notes dans le code afin de faciliter la
compréhension et la maintenance.

III. Intégration des Images

III.1. Comment intégrer une image à une page web ?
 Pour insérer une image sur une page web, on utilise l’élément <img>.
  C’est un élément vide, ce qui signifie qu’il ne contient ni texte ni balise de fermeture.
 C’est une balise de type Inline.
 L’attribut obligatoire pour <img> est src, qui indique le chemin vers l’image. Ce
chemin peut être relatif (dans le même dossier ou un sous-dossier) ou absolu (une URL
complète).

Figure 26 - Exemple d’image dans le même dossier que la page HTML

Figure 27 - Exemple d’image dans un sous-dossier images

Figure 28 - Exemple d’image via une URL absolue

 Conseils SEO et performance :

Préférez garder vos images sur le même serveur que votre site :

o Quand le navigateur doit charger une image, il doit faire une requête au serveur où
l’image est hébergée. Si l’image est sur un serveur externe, la récupération du fichier
depuis un autre serveur prend plus de temps.
o Si l’image est sur le même serveur, elle est récupérée directement, ce qui accélère le
chargement.
o Si l’image est sur un serveur externe et que ce serveur tombe en panne, que l’image est
supprimée ou déplacée, votre site affichera une image manquante.
o En hébergeant les images sur le même serveur, vous avez le contrôle total sur leur
disponibilité.

Donnez des noms de fichiers significatifs ([Link] plutôt que [Link]) car les moteurs
de recherche lisent aussi les noms de fichiers image et s'en servent pour optimiser la recherche.
Attention aux droits d’auteur :
Ne publiez jamais une image sur votre site sans :
o Être le créateur,
o Avoir reçu une permission écrite,
 o Savoir que l’image appartient au domaine public.
o Ne faites pas non plus de "hotlinking" (utiliser une image depuis un site externe
sans en avoir l'autorisation)

 Texte alternatif
L’attribut alt permet de décrire l’image sous forme de texte lorsque celle-ci ne peut pas
s’afficher. Il est essentiel et pratique en plusieurs occasions :
o L'utilisateur est un déficient visuel qui utilise un lecteur d'écran qui s'en sert pour
"lire" le web. En fait, avoir du texte alt disponible pour décrire les images est très
utile à beaucoup d'utilisateurs.
o En cas de mal épellation du nom ou du chemin du fichier.
o Le navigateur ne gère pas ce type d'image. Certains utilisent encore des navigateurs
en terminal, affichant seulement du texte (comme Lynx), qui affichent le texte alt
des images.
o Fournir du texte que pourraient utiliser les moteurs de recherche. Par exemple, ils
mettront en relation le texte alt avec des requêtes de recherche.
Exemple d’utilisation de « alt » en cas de non disponibilité de l’image :

Figure 30 - Exemple d'utilisation de alt Figure 29 - Résultat sur le navigateur

 Dimensions : width et height

Vous pouvez définir la largeur et la hauteur d’une image avec les attributs width et height.

Figure 31 - Exemple utilisation de width et height

o Si la page et qu'elle n'est pas encore chargée, ces attributs réservent un espace
pour l’image pendant le chargement, ce qui améliore l’expérience utilisateur.
  Conseil :
o Ne redimensionnez pas trop vos images avec HTML : cela peut les déformer et
gaspiller de la bande passante. Utilisez un éditeur d’image pour les adapter à la bonne
taille avant de les mettre sur le site.
o Si vous devez absolument modifier une taille d' image sur le site, vous devriez
vous servir de CSS.

 Titre d’image : title

Vous pouvez ajouter un attribut title pour afficher une info-bulle lorsqu’on survole
l’image.
Exemple d’utilisation :

Figure 32 - Exemple d'utilisation de l'attribut title

Figure 33 - Résultat sur le navigateur

III.2. Les formats d'image

Il existe de nombreux formats de fichiers d'images qu'on rencontre le plus fréquemment sur le
Web :

 APNG (Animated Portable Network Graphics) pour les séquences animées avec une
compression sans perte (le format GIF est moins performant)
 AVIF (AV1 Image File Format) pour les images et les images animées avec de hautes
performances
 GIF (Graphics Interchange Format) pour les images et animations simples
 JPEG (Joint Photographic Expert Group image) pour une compression avec pertes
d'images statiques, il s'agit du format le plus utilisé
 PNG (Portable Network Graphics) pour une compression sans perte d'images statiques,
de meilleure qualité que le JPEG, pour les photos avec arrière plan transparent, comme les
Logos.
  SVG (Scalable Vector Graphics) pour un format d'image vectorielle (qui permet de
dessiner une image précisément à différentes échelles)
 WebP (Web Picture format) pour les images statiques et animées
Les formats comme WebP et AVIF sont recommandés, car avec de meilleures
performances que PNG, JPEG, GIF tant pour les images animées que statiques. WebP
dispose d'une large prise en charge tandis qu'AVIF n'est pas pris en charge par Safari.
SVG reste le format recommandé pour les images qui doivent être dessinées avec précision
quelle que soit la taille.
Conseil pratique :
Avant d’utiliser un format récent comme .avif ou .webp, vous pouvez vérifier le support
des navigateurs sur des sites comme [Link]. Le choix du format dépend du projet et
du profil des utilisateurs.

Figure 34 - Support de l'extension webp

Si vous avez toujours des doutes : Vous pouvez travailler avec <picture> et <source>

III.3. L’attribut srcset et sizes

Sur un site web, une image peut s’afficher sur des écrans de différentes tailles, comme
téléphone ou écran d’ordinateur.

L’objectif est de charger l’image la plus adaptée pour que :

 L’image reste nette

 La page se charge rapidement
 On n’utilise pas trop de données

 srcset et sizes aident le navigateur à choisir la meilleure version d’une image.

 srcset définit l'ensemble des images offertes au choix du navigateur, et la taille de

chaque image.
 Figure 35 - Exemple d'utilisation de srcset

Avant chaque virgule, on spécifie :

 Un nom de fichier image

 Espace
 Largeur intrinsèque en pixels ; (w) est un descripteur de largeur indiquant la taille
réelle de l'image, qui peut être trouvée en examinant les propriétés du fichier image
sur l'ordinateur.

Remarque :

 Les navigateurs les plus anciens qui ne prennent pas en charge cette fonctionnalité
chargent normalement l'image référencée dans l'attribut src.

 sizes définit un ensemble de conditions pour le média (par ex. des largeurs d'écran) et
indique quelle taille d'image serait la plus adaptée si certaines conditions sont satisfaites.

Figure 36 - Exemple d'utilisation de sizes

Avant chaque virgule, on a spécifié :

 Condition pour le média ((max-width:600px)) : cette condition pour le média décrit

un état possible de l'écran. Dans notre cas, nous disons « si la largeur de fenêtre est
de 600 pixels ou moins »,
 Espace,
 Largeur de la place occupée par l'image si la condition pour le média est vraie
(480px).

Ainsi, une fois ces attributs en place, le navigateur va :

  Noter la largeur du périphérique,
 Vérifier quelle est la première condition vraie pour le média dans la liste des tailles,
 Noter la largeur d'emplacement demandée par le média,
 Charger l'image référencée dans la liste srcset qui est la plus proche de la taille
choisie.

III.4. Optimiser le chargement avec l’attribut loading

L’attribut loading indique si le navigateur doit charger une image immédiatement ou
différer le chargement des images situées hors de l’écran (par exemple lorsque
l’utilisateur fait défiler la page).

Valeurs de l’attribut loading :

Eager : Par défaut. L’image est chargée immédiatement

Lazy : Le chargement de l’image est différé jusqu’à ce que certaines conditions soient
remplies (ex. l’image devient visible à l’écran)

• Exemple : Page longue avec 10 images.

– Les 3 premières images visibles à l’écran au chargement → chargées
immédiatement.
– Images 4 à 10, plus bas → chargées uniquement au moment où l’utilisateur fait
défiler la page et qu’elles approchent du viewport.

Figure 37 - Exemple utilisation de l'attribut loading

IV. Les Liens en HTML et présentation des URL et

chemins
IV.1. Balise <a>
 La balise <a> sert à afficher un lien vers un autre contenu.
 Ce contenu peut être une autre page interne, externe, email ou juste une position
différente dans la même page.
 IV.2. Attribut « href »
 L’attribut obligatoire pour la balise <a> est « href », car il indique la destination du
contenu visé.
 « texte de lien » ici est la partie visible à l’utilisateur, en cliquant, elle envoie l’utilisateur
au contenu visé.

Figure 38 - syntaxe de la balise <a>

IV.3. Attribut « target »

 Par défaut, la page liée s’ouvre dans la fenêtre (ou l’onglet) actuelle du navigateur. Pour
modifier ce comportement, vous devez spécifier une autre cible pour le lien.
 L’attribut target indique où ouvrir le document lié.
 L’attribut target peut prendre l’une des valeurs suivantes :
o _self – Valeur par défaut. Ouvre le document dans la même fenêtre ou le même
onglet.
o _blank – Ouvre le document dans une nouvelle fenêtre ou un nouvel onglet.

Figure 39 - Exemple des liens

Figure 40 - Résultat sur le navigateur

Explication :
 Le premier lien redirige vers une page locale ([Link]) et s’ouvre dans le même onglet
grâce à target="_self" (valeur par défaut).
 Le deuxième lien redirige vers un site externe (Google) et s’ouvre dans un nouvel onglet
avec target="_blank".
 Le troisième lien utilise mailto: pour ouvrir le logiciel de messagerie par défaut et
permettre d’envoyer un email à l’adresse indiquée.
 Le dernier lien est un lien interne (ancre) qui permet de naviguer vers une section de la
même page ayant l’identifiant presentation.
 IV.4. Utiliser une image comme lien
Pour utiliser une image comme lien, il suffit de placer la balise <img> à l’intérieur de la
balise <a>.

Figure 41 - Exemple d'utilisation d'une image comme lien

Explication :
 <a href="..."> : définit le lien
 <img src="..."> : l’image cliquable
 Quand on clique sur l’image, on est redirigé vers l’URL du lien

IV.5. Attribut « title »

 L’attribut title est un autre attribut que l’on peut ajouter à un lien.
 Il sert à fournir des informations supplémentaires et utiles sur le lien comme la nature
du contenu de la page ou des indications à connaître avant de cliquer.
Par exemple :

Figure 42 - Utilisation de l'attribut title

Figure 43 - Résultat sur le navigateur

 Le title d'un lien n'est révélé que lors du survol de la souris, ce qui signifie que les
personnes utilisant les commandes clavier pour naviguer dans les pages web auront des
difficultés à accéder aux informations de title. Si une information de title est vraiment
 importante pour l'utilisation d'une page, alors vous devez la présenter de manière plus
accessible, par exemple, en la mettant dans le texte normal.

IV.6. Comprendre les URL et les chemins (paths)

Pour bien comprendre les cibles des liens (attribut href), il est essentiel de maîtriser deux
notions fondamentales : les URL et les chemins (paths).

IV.6.1. Qu’est-ce qu’une URL ?

Une URL (Uniform Resource Locator, que l’on peut traduire par localisateur uniforme de
ressource) est une chaîne de caractères qui indique l’emplacement d’une ressource sur le Web
(page web, image, fichier PDF, etc.).

Exemple :
La page d’accueil française de Mozilla se trouve à l’adresse suivante :
[Link]

Cette URL indique précisément où se situe la ressource sur Internet.

IV.6.2. Notion de chemin (path)

Les URL utilisent des chemins pour localiser les fichiers à l’intérieur d’un site web.
Un chemin indique où se trouve un fichier dans l’arborescence (structure de dossiers) du site.

IV.6.3. Exemple de structure de répertoires

Imaginons la structure suivante :

Figure 44 - Exemple Structure d'un dossier

 creating-hyperlinks est la racine du site

 [Link] est généralement la page d’accueil
 [Link] est une autre page du site
 projects et pdfs sont des sous-dossiers
  Il est tout à fait possible d’avoir plusieurs fichiers [Link], tant qu’ils se
trouvent dans des dossiers différents

 Lier des fichiers dans le même dossier

Si vous êtes dans [Link] (à la racine) et que vous souhaitez créer un lien vers [Link],
il suffit d’indiquer le nom du fichier, car il se trouve dans le même dossier.

Figure 45 - Lier un fichier du même dossier

 Lier vers un sous-dossier

Pour créer un lien vers projects/[Link] depuis [Link] (racine), il faut descendre dans le
dossier projects.

Figure 46 - Lier vers un sous-dossier

Règle : NomDuDossier/nomDuFichier

 Remonter dans un dossier parent

Si vous êtes dans projects/[Link] et que vous voulez créer un lien vers pdfs/[Link], vous
devez :

 Remonter d’un niveau (.. signifie : remonter au dossier parent)

 Entrer dans le dossier pdfs

Figure 47 - Remonter dans un dossier parent

  Chemins plus complexes

Il est possible de combiner plusieurs montées et descentes dans dans des URL complexes si
nécessaire

IV.6.4. Fragments de documents (ancres)

Il est possible de créer un lien vers une partie précise d’un document HTML, appelée fragment
de document, plutôt que vers le début de la page.

a. Définir une cible avec id

Pour créer un fragment, il faut d’abord attribuer un attribut id unique à l’élément vers lequel on
souhaite pointer.
On utilise le plus souvent des titres de section.

Figure 48 - Définir une cible avec id

L’attribut id :

o Doit être unique dans la page

o Ne doit pas contenir d’espaces
o Est sensible à la casse (Contact ≠ contact)

b. Créer un lien vers un fragment d’un autre document

Pour pointer vers un fragment précis, on ajoute le nom de l’id à la fin de l’URL, précédé du
symbole #.

Figure 49 - lien vers un fragment d’un autre document

Ce lien ouvrira la page [Link] directement à la section “Adresse de contact”.

c. Créer un lien vers un fragment dans le même document

Il est également possible de créer un lien vers une autre section dans la même page, en utilisant
uniquement le fragment :
 Figure 50 - lien vers un fragment dans le même document

IV.6.5. URL absolues et URL relatives

Sur le Web, on distingue deux types d’URL : absolues et relatives.
a. URL absolue
Une URL absolue indique l’emplacement complet d’une ressource sur le Web, en incluant :
 Le protocole (https)
 Le nom de domaine
 Le chemin complet vers la ressource
Exemple : [Link]
Une URL absolue :
 Pointe toujours vers le même emplacement
 Fonctionne indépendamment de l’endroit où elle est utilisée
b. URL relative
Une URL relative dépend de l’emplacement du fichier courant.
Elle ne contient ni protocole ni nom de domaine.
Exemple :
 Depuis [Link]
 Vers un fichier PDF situé dans le même dossier :

Figure 51 - Exemple URL relative vers un fichier dans le même dossier

 Si le PDF est dans un sous-dossier pdfs :

 Figure 52 - Exemple URL relative d'un fichier dans un sous dossier

 URL absolue équivalente :

[Link]
 Attention lors du déplacement des fichiers
Si vous déplacez [Link] du dossier projects vers la racine du site :
 le lien pdfs/[Link] pointera désormais vers
[Link]
Les fichiers cibles n’ayant pas bougé, le lien deviendra incorrect.
Les URL relatives exigent donc une attention particulière à la structure des dossiers.
[Link] pratiques pour les liens
Créer un lien fonctionnel ne suffit pas : il doit aussi être clair, accessible et compréhensible.

 Utiliser un texte de lien explicite

Les liens doivent être compréhensibles hors contexte :
 Les lecteurs d’écran lisent les liens séparément
 Les moteurs de recherche analysent le texte des liens
 Les utilisateurs visuels scannent la page rapidement

Bon exemple :

Figure 53 - Bon exemple pour l'utilisation d'un lien

Mauvais exemple :

Figure 54 - mauvais exemple pour l'utilisation d'un lien

  Conseils généraux

 Ne répétez pas l’URL dans le texte du lien

 Utilisez des libellés courts et descriptifs
 Évitez plusieurs liens différents avec le même texte
 Chaque lien doit être auto-explicatif

 Indiquer clairement les ressources non HTML

Lorsque le lien :

 Télécharge un fichier (PDF, Word…)

 Ouvre un nouvel onglet
 Lance une vidéo ou un audio

Il faut prévenir l’utilisateur.

Figure 55 - Exemple d'indication d'une ressource non HTML

IV.6.6. Liens de courriel ([Link]

Il est possible de créer un lien qui ouvre le client de messagerie de l’utilisateur.

Figure 56 - Exemple lien de courriel

mailto: sans adresse ouvre un nouveau message sans destinataire.

V. Structurer l'information avec les listes

Les listes constituent une forme d’organisation de l’information largement répandue, qu’il
s’agisse de listes de courses, de procédures à suivre, de consignes, de menus de navigation
ou encore de définitions. Elles permettent de structurer les idées, de hiérarchiser les
informations et de faciliter leur compréhension par le lecteur.
 Sur le Web, on distingue trois types de listes :

 Les listes non ordonnées

 Les listes ordonnées
 Les listes de description

V.1. Listes non ordonnées (<ul>)

Les listes non ordonnées sont utilisées lorsque l’ordre des éléments n’a pas d’importance.

On utilise :

 <ul> : unoredered list, pour définir la liste

 <li> pour chaque élément

Figure 57 - Résultat sur le navigateur

Figure 58 - Utilisation des listes non ordonnées

V.2. Listes ordonnées (<ol>)

Les listes ordonnées sont utilisées lorsque l’ordre des éléments est important, par
exemple pour des instructions ou des étapes à suivre.

On utilise :

 <ol> : ordered list, pour définir la liste

 <li> pour chaque élément
 Figure 60 - Utilisation des listes ordonnées Figure 59 - Résultat sur le navigateur

V.3. Imbrication de listes (listes imbriquées)

Il est possible (et courant) d’imbriquer une liste dans une autre, par exemple pour représenter
des sous-étapes ou des choix.

Figure 62 - Exemple d'imbrication de listes Figure 61 - Résultat sur le navigateur

V.4. Listes de description (<dl>)

Les listes de description servent à associer un terme à une ou plusieurs descriptions

Elles sont idéales pour :

 Définitions
 Glossaires
 Questions / réponses
 Paires clé–valeur
 Figure 64 - Exemple de Liste de description Figure 63 - Résultat sur le navigateur

 <dl> : description list

 <dt> : terme
 <dd> : description

o Plusieurs descriptions pour un même terme

Un même terme peut être associé à plusieurs descriptions.

Figure 66 - Exemple d'association d'un meme terme à plusieurs descriptions Figure 65 - Résultat sur le navigateur

VI. Intégrer du contenu multimédia : Audio et Vidéo

VI.1. Audio
 L'élément HTML <audio> est utilisé afin d'intégrer un contenu sonore (musique, voix,
effets sonores) dans un document. Il peut contenir une ou plusieurs sources audio,
représentées à l'aide de l'attribut src.
 Pour afficher un lecteur audio à l’utilisateur, on utilise l’attribut controls.
 L’attribut controls affiche les boutons de lecture, pause et volume.
Figure 68 - Utilisation de la balise audio Figure 67 - Résultat sur le navigateur

Vous pouvez à la place de src utiliser l'élément <source> à l'intérieur du bloc audio pour définir
l'audio à intégrer.

Figure 69 - Utilisation de source avec audio

 type précise le format du fichier audio

 audio/mpeg correspond au format MP3

Attributs principaux de <audio> :

 Autoplay : Lecture automatique. Cependant, pour des raisons d’expérience utilisateur,

la plupart des navigateurs bloquent la lecture automatique du son sans interaction de
l’utilisateur ou si la vidéo n’est pas muted.
 Loop : Pour la lecture de l’audio en boucle
 Muted : Démarre le son en mode muet

VI.2. Video
• L'élément HTML <video> est utilisé afin d'intégrer un contenu video dans un document.
• Le chemin vers le média à afficher est fourni via l'attribut src.
• Pour afficher un lecteur vidéo à l’utilisateur, on utilise l’attribut controls (boutons de
lecture, pause, volume et plein écran)

Figure 70 - Utilisation de la balise video

Figure 71 - Résultat sur le navigateur

L'élément <source> peut également être utilisé dans l'élément <video> afin d'indiquer la vidéo
à intégrer, ou pour proposer plusieurs formats.

Figure 72 - Utilisation de source avec plusieurs formats

Le navigateur lit le premier format compatible.

Attributs principaux de <video> :

 Loop : Pour la lecture de la vidéo en boucle

 Muted : Un attribut booléen qui indique s'il faut couper le son contenu dans la vidéo. Si
cet attribut est utilisé, le son sera coupé au lancement de la vidéo. Sa valeur par défaut
est false, ce qui signifie que l'audio sera lu lorsque la vidéo sera lue.
 Autoplay : lecture automatique de la vidéo.
Cependant, pour des raisons d’expérience utilisateur, la plupart des navigateurs bloquent
la lecture automatique des vidéos contenant du son.
La lecture automatique est généralement autorisée uniquement si la vidéo est muette
(muted) ou après une interaction de l’utilisateur.
 Poster : Une URL qui contient Une image pour occuper l’espace de la video tant qu’il
n’est pas chargé. Si cet attribut n'est pas utilisé, rien n'est affiché jusqu'à ce que la
première image de la vidéo soit disponible, ensuite, c'est cette image qui est affichée
comme vignette sur la vidéo.

Figure 74 - Utilisation de Poster avec Video Figure 73 - Résultat sur le navigateur

VII. HTML Sémantique

VII.1. Eléments sémantiques Vs Non Sémantiques
Un élément sémantique décrit clairement sa signification à la fois pour le navigateur et pour le
développeur.
 a. Éléments non sémantiques

Les éléments non sémantiques ne donnent aucune information sur le contenu qu’ils contiennent.

Exemples :

 <div> : (division) est un conteneur de type bloc utilisé pour regrouper des éléments
HTML sans leur donner de signification particulière.
Il sert principalement à structurer la page et à appliquer du style avec CSS.
 <span> : est un conteneur en ligne (inline) utilisé pour cibler ou styliser une petite
partie de texte ou un élément précis, sans signification sémantique.

Ces balises n’indiquent rien sur le rôle ou le sens du contenu.

b. Éléments sémantiques

Les éléments sémantiques définissent clairement le type de contenu qu’ils contiennent.

Exemples :

 <img>
 <table>
 <article>

Leur rôle est compréhensible sans lire le contenu interne.

Figure 75 - Non Semantic HTML code Vs Semantic HTML code

 VII.2. Éléments sémantiques HTML pour structurer une
page
De nombreux sites web utilisent du code HTML comme :

Ce code sert à indiquer la navigation, l’en-tête et le pied de page, mais sans balises sémantiques
dédiées.

En HTML, plusieurs éléments sémantiques permettent de définir clairement les différentes

parties d’une page web, comme :

 <article>
 <aside>
 <details>
 <figcaption>
 <figure>
 <footer>
 <header>
 <main>
 <mark>
 <nav>
 <section>
 <summary>
 <time>

VII.2.1. Élément HTML <section>

L’élément <section> définit une section, un regroupement thématique de contenu, dans

un document HTML.

Exemples d’utilisation de <section>

L’élément <section> peut être utilisé pour structurer :

 Des chapitres
 Une introduction
  Des articles d’actualité
 Des informations de contact

Une page web peut généralement être divisée en plusieurs sections, par exemple :

 Une section d’introduction

 Une section de contenu principal
 Une section de contact

Figure 76 - Exemple d'utilisation de section

VII.2.2. Élément HTML <article>

L’élément <article> contient un contenu indépendant et autonome.

Il doit pouvoir être compris seul et distribué séparément.

 Exemples : billets de blog, commentaires, articles de journal.

Figure 77 - Exemple d'utilisation de article

VII.2.3. Élément HTML <header>

Le <header> contient du contenu d’introduction ou des liens de navigation.

Il peut contenir : titres (<h1>-<h6>), logo, informations sur l’auteur.
On peut avoir plusieurs <header> dans une page, mais pas dans <footer>, <address> ou
un autre <header>.
 Figure 78 - Exemple d'utilisation de header

VII.2.4. Élément HTML <footer>

Le <footer> définit le pied de page d’un document ou d’une section.

Il contient souvent : informations d’auteur, copyright, contact, liens de retour en haut,
documents liés.
On peut avoir plusieurs <footer> par page.

Figure 79 - Exemple d'utilisation de footer

VII.2.5. Élément HTML <nav>

Le <nav> contient un ensemble de liens de navigation importants.

Tous les liens de la page ne doivent pas être dans <nav>, seulement les principaux.
 Figure 80 – Exemple d’utilisation de nav

VII.2.6. Élément HTML <aside>

Figure 81 - Exemple d'utilisation de aside

Le <aside> contient du contenu annexe, comme une barre latérale.

Le contenu doit être indirectement lié au contenu principal.

VII.2.7. Élément HTML <figure> et <figcaption>

<figure> contient du contenu autonome comme une image, un diagramme ou un code.

<figcaption> fournit une légende pour ce contenu.
La légende peut être avant ou après le contenu de <figure>

Figure 82 - Exemple d'utilisation de figure et figcaption

VII.3. Balises de style VS Balises Sémantiques

En HTML, il existe plusieurs balises permettant de modifier l’apparence d’un texte.
Balises de mise en forme (non sémantiques)
 <b> : texte en gras
 <i> : texte en italique
 <u> : texte souligné
 <s> : texte barré
Ces balises modifient uniquement l’apparence du texte et n’ont aucune signification sémantique
particulière.
Balises sémantiques
HTML propose également des balises qui modifient l’apparence tout en donnant du sens au
contenu :
 <strong> : texte important
 <em> : emphase (texte à lire avec insistance)
 <ins> : texte ajouté dans une version révisée
 <del> : texte supprimé ou devenu obsolète
La présence de ces balises fournit une information supplémentaire au navigateur, aux moteurs
de recherche et aux technologies d’assistance.
En HTML moderne, on privilégie les balises sémantiques pour exprimer le sens du texte, et on
utilise le CSS pour gérer l’apparence visuelle.

VIII. Interagir avec l’utilisateur : les Formulaires

Un formulaire HTML est utilisé pour collecter les données saisies par l’utilisateur.
Ces données sont le plus souvent envoyées à un serveur pour être traitées.

VIII.1. L’élément <form>

L’élément HTML <form> est utilisé pour créer un formulaire HTML destiné à la saisie des
informations par l’utilisateur.

L’élément <form> est un conteneur qui peut inclure différents types d’éléments de saisie,
tels que :

 Des champs de texte

 Des cases à cocher
 Des boutons radio
 Des boutons de soumission
 etc.

Attributs Principaux de <form> :

action : indique où les données du formulaire doivent être envoyées après la soumission. Cela
peut être une URL ou un fichier serveur.

method : définit comment les données sont envoyées. Il existe deux méthodes principales :

 GET :
o Les données sont ajoutées à l’URL sous forme de paires nom/valeur. Utile pour
des requêtes simples ou des recherches.
o Ne doit pas être utilisé pour envoyer des données sensibles (elles sont visibles
dans l’URL)
o Utile pour les formulaires dont le résultat peut être enregistré en favori
(bookmark)
o Limitée par la taille maximale de l’URL (environ 2048 caractères pour la plupart
des navigateurs
 POST :
o Les données sont envoyées de manière invisible dans le corps de la requête. Utile
pour des formulaires sensibles ou volumineux.
o Aucune limitation de taille
o Les formulaires envoyés avec POST ne peuvent pas être enregistrés en favori

VIII.2. <select> : l'élément de liste déroulante

L'élément HTML <select> représente un contrôle qui propose un menu d'options.

Figure 83 - Résultat sur le navigateur

Figure 84 - Utilisation de select

L’élément <select> est utilisé pour créer une liste déroulante.

L’attribut name est nécessaire pour récupérer la valeur sélectionnée après l’envoi du formulaire
Si l’attribut name est omis, aucune donnée de la liste déroulante ne sera envoyée.

L’attribut id est nécessaire pour associer la liste déroulante à un <label>.

Les balises <option> à l’intérieur de l’élément <select> définissent les différentes options disponibles
dans la liste déroulante.

Quelques Attributs de <select> :

Disabled : Désactive la liste déroulante (elle n’est pas cliquable).

Form : Associe la liste déroulante à un formulaire spécifique grâce à son id.

Multiple : Permet de sélectionner plusieurs options en même temps.

Name : Définit le nom de la liste déroulante pour l’envoi des données du formulaire.

Required : Oblige l’utilisateur à sélectionner une option avant d’envoyer le formulaire.

VIII.3. L’élément <textarea>

La balise <textarea> définit un champ de saisie de texte sur plusieurs lignes.

L’élément <textarea> est souvent utilisé dans un formulaire pour collecter des données saisies par
l’utilisateur, comme des commentaires ou des avis.

Une zone de texte peut contenir un nombre illimité de caractères.

La taille d’une zone de texte est définie par les attributs cols (colonnes) et rows (lignes), ou à l’aide
du CSS.

L’attribut name est nécessaire pour récupérer les données après l’envoi du formulaire.
Si l’attribut name est omis, aucune donnée ne sera envoyée.

L’attribut id est nécessaire pour associer la zone de texte à un <label>.

Figure 86 - Utilisation du textarea Figure 85 - Résultat sur le navigateur

Quelques Attributs de <textarea> :

Cols : Définit la largeur visible de la zone de texte (en nombre de caractères).

Rows : Définit le nombre de lignes visibles de la zone de texte.

Required : Oblige l’utilisateur à remplir la zone de texte avant l’envoi du formulaire.

Disabled : Désactive la zone de texte (elle n’est pas modifiable).

Form : Associe la zone de texte à un formulaire précis grâce à son id.

Maxlength : Définit le nombre maximum de caractères autorisés.

Name : Définit le nom de la zone de texte pour l’envoi des données du formulaire.

Placeholder : Affiche un texte indicatif décrivant ce que l’utilisateur doit saisir.

 Readonly : Rend la zone de texte en lecture seule (modifiable interdite, mais sélection possible).

VIII.4. <input> : l'élément de saisie dans un formulaire

L’élément HTML <input> est l’élément de formulaire le plus utilisé.

Un élément <input> peut être affiché de différentes manières, selon la valeur de l’attribut
type.
Par défaut, lorsque l’attribut type n’est pas présent, sa valeur est text.

Parmi les différents types <input>

 <input type="text">
Affiche un champ de saisie de texte sur une seule ligne

 <input type="email">
Permet de saisir une adresse e-mail avec validation
intégrée

et clavier adapté sur les appareils compatibles.

 <input type="radio">
Affiche un bouton radio

(permet de choisir une seule option parmi plusieurs)

 <input type="checkbox">
Affiche une case à cocher

(permet de choisir zéro, une ou plusieurs options)

 <input type="password">

Champ texte sur une seule ligne dont la valeur est masquée

 <input type="submit" value= "Inscription" >

Affiche un bouton pour envoyer le formulaire
 <input type="button" value= "Cliquez" >
Affiche un bouton cliquable

 <input type="number">

Permet de saisir uniquement des nombres, et affiche des flèches pour augmenter ou diminuer
la valeur

Quelques Attributs de <input> :

Certains attributs de l’élément <input> ne s’appliquent qu’à certains types spécifiques. Ils permettent
de limiter ou contrôler les valeurs saisies par l’utilisateur.

 id : Attribut global valide pour tous les éléments, y compris tous les types de input. Il définit
un identifiant unique (ID) qui doit être unique dans tout le document. Son rôle est d’identifier
l’élément lors de la liaison. Cette valeur est utilisée comme valeur de l’attribut for de
l’élément <label> afin d’associer le label au champ du formulaire. ( Voir la partie <label>)
 min et max : définissent la valeur minimale et maximale autorisée. Ils peuvent être utilisés
avec les types suivants : date, month, week, time, datetime-local, number, range.

Exemple :

Figure 87 - Utilisation de min et max avec number

L’utilisateur ne peut saisir qu’un nombre entre 1 et 10.

Figure 88 - Utilisation de min et max avec date

La date choisie doit être comprise entre ces deux dates.

 Step
L’attribut step définit l’intervalle entre les valeurs possibles.

Il s’applique principalement aux types : date, month, week, time, datetime-local, number,
range

Exemple :
 Figure 89 - Utilisation de step

Les valeurs possibles seront : 0, 5, 10, 15, etc.

 maxlength et minlength

Ces attributs définissent le nombre maximum et minimum de caractères autorisés.

Ils s’appliquent principalement aux champs de type : text, search, url, tel, email, password

Figure 90 - Utilisation de minlength et maxlength

Le texte doit contenir au moins 3 caractères et au maximum 20 caractères.

 Placeholder :

Valide pour les champs text, search, url, tel, email, password et number, l’attribut
placeholder fournit un court indice indiquant le type d’information attendu dans le champ.
Il doit s’agir d’un mot ou d’une courte phrase, et non d’une explication.

Figure 91 - Utilisation de placeholder

Figure 92 - Résultat

 Name :

L’attribut name permet de donner un nom à un champ de formulaire.

Ce nom est envoyé avec la valeur du champ lors de l’envoi du formulaire.

Sans attribut name, la valeur du champ n’est pas envoyée.

C’est pourquoi on considère name comme indispensable dans un formulaire.
 Figure 93 - Utilisation de name

Lors de l’envoi, le navigateur envoie par exemple :

email=exemple@[Link]

Cas des boutons radio :

Les boutons radio ayant le même name forment un groupe.

Un seul bouton du groupe peut être sélectionné à la fois.

À l’envoi du formulaire, une seule valeur est envoyée :

gender=female ou gender=male

 Pattern

L’attribut pattern permet de définir un format obligatoire pour la valeur saisie dans un
champ.
La valeur du champ doit respecter ce format, sinon le formulaire ne sera pas envoyé.

Il s’applique aux types suivants :

text, search, url, tel, email, password.

Le format est défini à l’aide d’une expression régulière (regex).

Exemple de pattern :
 Figure 94 - Utilisation de pattern

Les crochets [] (plage de caractères) servent à indiquer un seul caractère autorisé parmi une
liste ou une plage.

[A-Z] → une lettre majuscule (de A à Z)

[0-9] → un chiffre (de 0 à 9)

Les quantificateurs {min,max} : définissent combien de fois un caractère peut apparaître

 {min,max} → le caractère précédent doit apparaître au moins min fois et au plus max
fois.
 {Exact} → le caractère doit apparaître exactement ce nombre de fois.
 {min,} → le caractère doit apparaître au moins min fois.

 Required :

L’attribut required en HTML permet de rendre un champ de formulaire obligatoire. Cela

signifie qu’une valeur vide est inacceptable. Il fonctionne pour la plupart des types d’input
comme text, email, password, ou checkbox, mais pas pour les types hidden, range, color ou
button.

Figure 95 - Utilisation de required

 inputmode :

Valeur globale valide pour tous les éléments. Elle fournit aux navigateurs une indication sur
le type de clavier virtuel à afficher lors de la saisie dans cet élément ou son contenu. Les
valeurs possibles incluent : none, text, tel, url, email, numeric, decimal et search.

VIII.5. L’élément <label>

L’élément <label> définit une étiquette (texte descriptif) pour les éléments de formulaire.

Il est très utile pour :

 Les utilisateurs de lecteurs d’écran, car le texte du label est lu lorsque l’utilisateur
sélectionne le champ
 Les utilisateurs ayant des difficultés à cliquer sur de petites zones (boutons radio, cases
à cocher)

Cliquer sur le texte du <label> active automatiquement le champ associé.

 Attribut for du <label>

L’attribut for du <label> doit avoir la même valeur que l’attribut id du <input> afin de les
lier, cette association améliore l’accessibilité et facilite l’interaction de l’utilisateur avec le
formulaire (Activation lors du clic sur le texte du label)

Figure 96 - Utilisation de l'attribut for avec label

Ils ne sont pas affichés dans le navigateur et n’ont aucun impact sur le rendu de la page.

Les commentaires sont souvent utilisés pour expliquer une section de code ou désactiver
temporairement du contenu.

IX. Organiser les données avec les tableaux

• L'élément HTML <table> permet de représenter un tableau de données, c'est-à-dire des
informations exprimées sur un tableau en deux dimensions.
• <tr> indique les lignes, <th> indique les titres de colonnes, <td> indique les cellules et
<caption> indique le titre du tableau.
• Ces 2 attributs peuvent être ajouté à <td> pour la fusion : colspan pour la fusion des
colonnes, et rowspan pour la fusion des lignes.
• Avant l’introduction de CSS, HTML était utilisé à la fois pour structurer et mettre en
forme le contenu, des attributs comme border et cellspacing permettaient de rendre
les tableaux visibles. Aujourd’hui, ces attributs sont obsolètes et la mise en forme doit
être réalisée exclusivement avec CSS. Dans ce cours, nous les utilisons uniquement afin
de rendre le tableau lisible visuellement.
Figure 98 - Exemple d'utilisation de la balise table Figure 97 - Résultat sur le navigateur

Figure 100 - Ajout du border du tableau Figure 99 - Résultat

Figure 102 - Ajout du cellspacing Figure 101 - Résultat

Figure 104 - Utilisation du caption Figure 103 -

Résultat
Figure 106 - Utilisation du rowspan Figure 105 - Résultat

Figure 108 - Utilisation du colspan Figure 107 -

Résultat

X. Bibliothèques et extensions
HTML permet de structurer le contenu d’une page web.
Pour créer des interfaces plus riches, interactives ou graphiquement avancées, il existe des
bibliothèques et technologies complémentaires utilisées avec JavaScript.

X.1. Canvas et WebGL

<canvas> est un élément HTML qui permet de dessiner des graphiques en deux dimensions
directement dans le navigateur à l’aide de JavaScript.
Il est souvent utilisé pour créer des animations, des jeux simples ou des visualisations
graphiques.
WebGL (Web Graphics Library) est une technologie permettant d’afficher des graphiques 3D
interactifs dans le navigateur, sans nécessiter de plugins supplémentaires.
Il s’appuie sur l’élément HTML <canvas> pour afficher le rendu graphique et utilise la carte
graphique (GPU) pour de meilleures performances.

L’élément <canvas> fournit la zone d’affichage graphique, tandis que WebGL est responsable
du rendu 3D à l’intérieur de cette zone.
JavaScript permet de faire le lien entre le canvas et WebGL.

X.2. [Link]
[Link] est une bibliothèque JavaScript qui simplifie l’utilisation de WebGL pour créer des
scènes 3D dans le navigateur.
Elle permet de créer plus facilement des objets 3D et des animations, sans avoir à manipuler
directement les fonctionnalités complexes de WebGL.

[Link] s’appuie sur :

 l’élément HTML <canvas> comme surface d’affichage,

 WebGL pour le rendu graphique 3D,
 JavaScript pour contrôler la scène.

Cette bibliothèque est largement utilisée pour créer des visualisations 3D, des animations
interactives et des expériences immersives sur le web.

HTML seul permet de structurer le contenu, mais l’ajout de bibliothèques JavaScript permet de
créer des interfaces interactives et visuellement riches.

X.3. <model-viewer>
<model-viewer> est une balise HTML personnalisée (Web Component) qui permet d’afficher
des modèles 3D interactifs directement dans le navigateur.
Elle est particulièrement simple à utiliser comparée à WebGL ou [Link], car elle ne nécessite
pas de code complexe pour charger et afficher le modèle.

Attributs principaux :

 src : chemin du fichier 3D (format GLB ou glTF).

 alt : description du modèle pour l’accessibilité.
 auto-rotate : fait tourner le modèle automatiquement.
 camera-controls : permet à l’utilisateur de zoomer, tourner et déplacer la vue autour du
modèle.
 background-color : couleur d’arrière-plan de la scène.

HTML seul permet de structurer le contenu, mais l’ajout de bibliothèques JavaScript permet de
créer des interfaces interactives et visuellement riches.