JOUR 01 / 07
Introduction au HTML
Comprendre la structure d'une page web et écrire vos premières
lignes de code
Formation Frontend Professionnelle · Jour 01 sur 07
Niveau : Débutant · Durée estimée : 2 h · Auteur : Équipe Pédagogique
Au programme de cette leçon
· Qu'est-ce que le HTML et pourquoi l'apprendre ?
· Anatomie d'un élément HTML : balises, attributs, contenu
· Structure de base d'une page HTML5 complète
· Les balises essentielles : titres, paragraphes, liens, images…
· Exercice pratique guidé
FORMATION FRONTEND | JOUR 1 : INTRODUCTION AU HTML Module 1 / 7
TABLE DES MATIÈRES
1. Qu'est-ce que le HTML ? 3
1.1 HTML dans l'écosystème du Web 3
1.2 Comment fonctionne un navigateur ? 3
2. Anatomie d'un élément HTML 4
2.1 Balise ouvrante et balise fermante 4
2.2 Les attributs 5
2.3 Éléments vides (auto-fermants) 5
3. Structure d'une page HTML5 6
3.1 Le squelette minimal 6
3.2 La section <head> 7
3.3 La section <body> 7
4. Les balises fondamentales 8
4.1 Titres h1 à h6 8
4.2 Paragraphes et sauts de ligne 9
4.3 Liens hypertextes 9
4.4 Images 10
4.5 Listes ordonnées et non ordonnées 10
4.6 Mise en forme du texte 11
5. Bonnes pratiques & erreurs fréquentes 12
6. Exercice pratique guidé 13
7. Glossaire & Récapitulatif 14
© Formation Frontend Professionnelle — Tous droits réservés —2—
FORMATION FRONTEND | JOUR 1 : INTRODUCTION AU HTML Module 1 / 7
SECTION 1
Qu'est-ce que le HTML ?
HTML signifie HyperText Markup Language. C'est le langage de base qui permet de structurer le
contenu d'une page web. Concrètement, HTML décrit ce que chaque élément d'une page est : un
titre, un paragraphe, une image, un lien… Il ne s'occupe pas de l'apparence visuelle (c'est le rôle de
CSS) ni du comportement interactif (c'est le rôle de JavaScript).
Une analogie simple : si une page web était une maison, HTML serait les murs, le toit et les
fondations — la structure. CSS serait la peinture, la décoration, et JS serait l'électricité et la
plomberie.
HTML CSS JavaScript
Structure & contenu Présentation & style Interactivité & logique
Les murs de la maison La peinture & déco L'électricité
Le trio fondamental du développement web
1.1 HTML dans l'écosystème du Web
Depuis sa création par Tim Berners-Lee en 1991, HTML a évolué jusqu'à sa version actuelle :
HTML5 (2014). Chaque navigateur — Chrome, Firefox, Safari, Edge — contient un moteur de rendu
capable d'interpréter le HTML et d'afficher le résultat à l'écran. C'est pour ça qu'on dit que HTML est
un langage compris nativement par tous les navigateurs modernes.
1.2 Comment fonctionne un navigateur ?
Quand vous tapez une adresse dans la barre de votre navigateur, voici ce qui se passe :
1 Votre navigateur envoie une requête au serveur web.
2 Le serveur répond avec un fichier .html.
3 Le navigateur lit le fichier HTML de haut en bas.
4 Il construit le DOM (Document Object Model) — une représentation en arbre de la page.
5 Il affiche le résultat à l'écran.
✓ CONSEIL
Vous n'avez pas besoin d'installer quoi que ce soit pour commencer ! Un simple éditeur de texte
(VS Code, Notepad++) et un navigateur web suffisent.
© Formation Frontend Professionnelle — Tous droits réservés —3—
FORMATION FRONTEND | JOUR 1 : INTRODUCTION AU HTML Module 1 / 7
SECTION 2
Anatomie d'un élément HTML
Un élément HTML est composé de trois parties : une balise ouvrante, du contenu, et une balise
fermante. Regardons ça en détail.
2.1 Balise ouvrante et balise fermante
Chaque élément HTML s'écrit entre des chevrons (< et >). La balise fermante est identique à la
balise ouvrante, mais précédée d'un slash /.
Exemple — Élément paragraphe
<p>Bonjour, je suis un paragraphe.</p>
<p> Mon texte ici </p>
Balise ouvrante Contenu Balise fermante
Décomposition visuelle d'un élément HTML
2.2 Les attributs
Les attributs permettent de donner des informations supplémentaires à une balise. Ils se placent
dans la balise ouvrante, sous la forme nom="valeur".
Exemple — Lien avec attributs
<a href="[Link] target="_blank">Visitez ce site</a>
Attribut Valeur Rôle
href "[Link] URL de destination du lien
target "_blank" Ouvrir dans un nouvel onglet
src "[Link]" Source d'une image
alt "Description" Texte alternatif (accessibilité)
class "mon-style" Identifiant de style CSS
id "titre-principal" Identifiant unique de l'élément
© Formation Frontend Professionnelle — Tous droits réservés —4—
FORMATION FRONTEND | JOUR 1 : INTRODUCTION AU HTML Module 1 / 7
Attributs HTML les plus courants
2.3 Éléments vides (auto-fermants)
Certains éléments HTML n'ont pas de contenu textuel et n'ont donc pas besoin de balise fermante.
On les appelle des éléments vides ou auto-fermants.
Exemples — Éléments auto-fermants
<img src="[Link]" alt="Ma photo">
<br>
<hr>
<input type="text" placeholder="Votre nom">
■ NOTE
En HTML5, vous n'êtes pas obligé d'ajouter un slash avant le > pour les éléments vides (comme
<br />). Les deux formes sont acceptées, mais <br> est la forme recommandée en HTML5.
© Formation Frontend Professionnelle — Tous droits réservés —5—
FORMATION FRONTEND | JOUR 1 : INTRODUCTION AU HTML Module 1 / 7
SECTION 3
Structure d'une page HTML5
3.1 Le squelette minimal d'une page HTML5
Chaque page HTML valide doit respecter une structure précise. Voici le squelette minimal que vous
devrez mémoriser et utiliser comme point de départ pour chacun de vos projets.
Structure de base — HTML5
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ma première page</title>
</head>
<body>
<h1>Bienvenue !</h1>
<p>Mon premier paragraphe.</p>
</body>
</html>
3.2 Explication ligne par ligne
<!DOCTYPE html>
Déclare que ce document est du HTML5. Cette ligne DOIT être la première de tout fichier HTML.
<html lang="fr">
La balise racine qui englobe tout le document. L'attribut lang améliore l'accessibilité et le
référencement (SEO).
<head>
Contient les métadonnées (informations sur la page) qui ne s'affichent pas directement dans le
navigateur.
<meta charset="UTF-8">
© Formation Frontend Professionnelle — Tous droits réservés —6—
FORMATION FRONTEND | JOUR 1 : INTRODUCTION AU HTML Module 1 / 7
Définit l'encodage des caractères. UTF-8 supporte tous les caractères, y compris les accents
français, les emojis, etc.
<meta name="viewport"…>
Indispensable pour les appareils mobiles. Garantit que la page s'adapte correctement aux petits
écrans.
<title>
Le texte affiché dans l'onglet du navigateur. Très important pour le référencement Google.
<body>
Contient tout le contenu visible de la page : textes, images, liens, formulaires…
■ ATTENTION
Sauvegardez toujours vos fichiers HTML avec l'extension .html (exemple : [Link]). Le fichier
principal d'un site web s'appelle toujours [Link] par convention.
© Formation Frontend Professionnelle — Tous droits réservés —7—
FORMATION FRONTEND | JOUR 1 : INTRODUCTION AU HTML Module 1 / 7
SECTION 4
Les balises fondamentales
4.1 Les titres — h1 à h6
HTML propose 6 niveaux de titres, de h1 (le plus important) à h6 (le moins important). Ils créent une
hiérarchie dans votre contenu, essentielle pour l'accessibilité et le référencement.
Balises de titres
<h1>Titre principal de la page</h1>
<h2>Sous-titre de section</h2>
<h3>Sous-sous-titre</h3>
■ ATTENTION
Une page bien structurée ne doit avoir qu'un seul <h1> — c'est le titre principal. Les h2 sont les
grandes sections, les h3 les sous-sections, etc. Ne choisissez pas le niveau de titre pour son style
visuel, mais pour sa valeur sémantique.
4.2 Paragraphes et sauts de ligne
Le texte courant se place dans des balises <p> (paragraph). Pour un simple retour à la ligne à
l'intérieur d'un paragraphe, utilisez <br>.
Paragraphes et <br>
<p>
Voici mon premier paragraphe.
Il peut contenir plusieurs phrases.
</p>
<p>
Première ligne du paragraphe.<br>
Deuxième ligne (même paragraphe).
</p>
4.3 Les liens hypertextes
© Formation Frontend Professionnelle — Tous droits réservés —8—
FORMATION FRONTEND | JOUR 1 : INTRODUCTION AU HTML Module 1 / 7
La balise <a> (anchor) crée des liens. C'est elle qui donne toute sa puissance au HyperText de
HTML.
Balise <a> — Les liens
<a href="[Link] target="_blank">
Aller sur Google
</a>
<a href="[Link]">Contactez-nous</a>
<a href="#section-2">Aller à la section 2</a>
4.4 Les images
La balise <img> insère une image. Elle est auto-fermante et nécessite obligatoirement les attributs
src (chemin de l'image) et alt (description textuelle).
Balise <img>
<img src="images/[Link]" alt="Coucher de soleil sur la mer" width="600">
<img src="[Link] alt="Logo">
✓ CONSEIL
L'attribut alt n'est pas optionnel ! Il est lu par les lecteurs d'écran pour les personnes malvoyantes,
et affiché si l'image ne charge pas. C'est aussi important pour le référencement.
© Formation Frontend Professionnelle — Tous droits réservés —9—
FORMATION FRONTEND | JOUR 1 : INTRODUCTION AU HTML Module 1 / 7
4.5 Les listes
HTML propose deux types de listes : les listes non ordonnées (à puces) avec <ul>, et les listes
ordonnées (numérotées) avec <ol>. Chaque élément de liste est entouré de balises <li>.
/* Liste à puces */ /* Liste numérotée */
<ul> <ol>
<li>HTML</li> <li>Ouvrir VS Code</li>
<li>CSS</li> <li>Créer [Link]</li>
<li>JavaScript</li> <li>Écrire le code</li>
</ul> </ol>
4.6 Mise en forme inline du texte
Certaines balises permettent de mettre en valeur du texte à l'intérieur d'un paragraphe, sans créer un
nouveau bloc.
Balises inline
<p>
Ce mot est en <strong>gras</strong>, celui-là en <em>italique</em>.
Et voici du <mark>texte surligné</mark> et du <code>code inline</code>.
</p>
Balise Signification Rendu par défaut
<strong> Importance sémantique Gras
<em> Emphase sémantique Italique
<mark> Texte mis en valeur Surligné jaune
<code> Code informatique Police monospace
<del> Texte supprimé Barré
<span> Conteneur neutre Aucun style (utilisé avec CSS)
© Formation Frontend Professionnelle — Tous droits réservés — 10 —
FORMATION FRONTEND | JOUR 1 : INTRODUCTION AU HTML Module 1 / 7
SECTION 5
Bonnes pratiques & Erreurs fréquentes
À FAIRE ✓ À ÉVITER ✗
Toujours fermer les balises ouvertes Laisser des balises non fermées
Indenter le code (2 ou 4 espaces) Écrire tout sur une seule ligne
Utiliser des noms de fichiers en minuscules Utiliser des espaces dans les noms de
sans espaces ([Link]) fichiers (Mon [Link])
Toujours renseigner l'attribut alt sur les
images Omettre l'attribut alt
Respecter la hiérarchie des titres (h1 > h2 > Choisir h3 parce que sa taille vous plaît
h3) visuellement
Un seul <h1> par page Plusieurs <h1> sur la même page
© Formation Frontend Professionnelle — Tous droits réservés — 11 —
FORMATION FRONTEND | JOUR 1 : INTRODUCTION AU HTML Module 1 / 7
SECTION 6
Exercice Pratique Guidé
Créez votre première page HTML complète : une page de présentation
personnelle.
Votre page doit contenir :
1 Un titre principal (h1) avec votre prénom
2 Une courte biographie dans un paragraphe
3 Une liste de vos 3 hobbies (liste non ordonnée)
4 Un lien vers votre réseau social préféré (ouverture dans un nouvel onglet)
5 Une image (vous pouvez utiliser un placeholder : [Link]
6 Un titre h2 "Mes compétences" suivi d'une liste ordonnée de 3 compétences
Solution commentée :
Solution complète — Page de présentation
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ma Présentation</title>
</head>
<body>
<h1>Bonjour, je suis Marie Dupont</h1>
<p>
Je suis étudiante en développement web, passionnée par la création
© Formation Frontend Professionnelle — Tous droits réservés — 12 —
FORMATION FRONTEND | JOUR 1 : INTRODUCTION AU HTML Module 1 / 7
de sites accessibles et bien structurés. Je vis à Paris.
</p>
<h2>Mes hobbies</h2>
<ul>
<li>Photographie</li>
<li>Lecture</li>
<li>Randonnée</li>
</ul>
<a href="[Link] target="_blank">
Mon profil LinkedIn
</a>
<img src="[Link]
alt="Ma photo de profil">
<h2>Mes compétences</h2>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
</html>
© Formation Frontend Professionnelle — Tous droits réservés — 13 —
FORMATION FRONTEND | JOUR 1 : INTRODUCTION AU HTML Module 1 / 7
SECTION 7
Glossaire & Récapitulatif
Balise (Tag)
Mot-clé HTML encadré par < et >. Définit le type d'un élément.
Attribut
Information complémentaire placée dans la balise ouvrante (ex : href, src, alt).
DOM
Document Object Model. Représentation en arbre de la page HTML par le navigateur.
HTML5
Cinquième et actuelle version du standard HTML, publiée en 2014 par le W3C.
Élément vide
Balise qui n'a pas de contenu ni de balise fermante (ex : <img>, <br>).
Imbrication
Placer un élément à l'intérieur d'un autre (les balises doivent se fermer dans l'ordre).
Sémantique
Le fait d'utiliser la balise qui décrit le mieux la nature du contenu.
W3C
World Wide Web Consortium — l'organisme qui définit les standards du web.
Encodage (charset)
Système qui associe des nombres aux caractères. UTF-8 est le standard recommandé.
Ce que vous avez appris aujourd'hui
✓ HTML est le langage de structure du web, compris nativement par tous les navigateurs.
✓ Un élément HTML est composé d'une balise ouvrante, d'un contenu et d'une balise fermante.
✓ Les attributs enrichissent les balises avec des informations supplémentaires.
Toute page HTML5 valide commence par <!DOCTYPE html> et contient <html>, <head> et
✓
<body>.
✓ Les balises h1–h6 créent une hiérarchie de titres sémantique.
✓ Les liens (<a>), images (<img>) et listes (<ul>/<ol>) sont les briques de base du contenu.
✓ L'indentation et les bonnes pratiques de nommage rendent votre code lisible et maintenable.
© Formation Frontend Professionnelle — Tous droits réservés — 14 —
FORMATION FRONTEND | JOUR 1 : INTRODUCTION AU HTML Module 1 / 7
Prochaine leçon — Jour 02 : Introduction au CSS →
© Formation Frontend Professionnelle — Tous droits réservés — 15 —