Cours de Developpement Web
HTML5 — Module 1 : Fondamentaux
5
par IARO
Introduction au developpement web moderne • Niveau debutant
Module 1
Fondamentaux HTML5
Structure, syntaxe et bases du langage HTML5
Objectifs du module
Comprendre le role du HTML dans le developpement web
Maitriser la structure de base d'un document HTML5
Connaitre la syntaxe : balises, attributs, commentaires
Gerer l'encodage, le viewport et les metadonnees
Integrer correctement CSS et JavaScript dans la page
Niveau Duree Prerequis Format
Debutant 3 a 4h Aucun Cours + TP
IARO | Cours de Developpement Web | HTML5 - Module 1 : Fondamentaux Page 1 / 14
HTML5 Module 1 — Fondamentaux par IARO
1 Introduction au HTML5
HTML5 (HyperText Markup Language version 5) est le langage standard de structuration du contenu sur le Web.
Publie en 2014 par le W3C, il represente une evolution majeure du HTML4 et XHTML, en ajoutant des elements
semantiques, des APIs puissantes et un meilleur support des medias nativement dans le navigateur.
HTML n'est pas un langage de programmation : il ne contient pas de logique, de boucles ou de conditions. C'est
un langage de balisage qui decrit la structure et le sens du contenu d'une page web, tandis que CSS gere
l'apparence et JavaScript le comportement.
HTML5 CSS3 JavaScript
Structure Stylise Programme
le contenu l'apparence le comportement
Squelette Peau Muscles
2 Le DOCTYPE — Declaration du type de document
La toute premiere ligne de tout document HTML5 doit etre la declaration DOCTYPE. Elle indique au navigateur
quelle version de HTML utiliser pour interpreter la page. En HTML5, cette declaration est extremement simple
comparee aux versions precedentes.
[Link]
<!-- Declaration DOCTYPE HTML5 (obligatoire, premiere ligne) -->
<!DOCTYPE html>
<!-- Comparaison avec les anciens DOCTYPE (ne plus utiliser) -->
<!-- HTML4 : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"[Link] -->
<!-- XHTML : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "..."> -->
Le DOCTYPE n'est pas une balise HTML. Il n'a pas de balise fermante et ne fait pas partie du document HTML
lui-meme. Il doit imperativement etre place sur la premiere ligne, avant toute autre chose, meme les espaces.
!
IARO | Cours de Developpement Web | HTML5 - Module 1 : Fondamentaux Page 2 / 14
HTML5 Module 1 — Fondamentaux par IARO
3 Structure de base d'un document HTML5
Un document HTML5 complet se compose d'une hierarchie d'elements imbriques. Chaque document possede
obligatoirement trois elements racines : html, head et body. Cette structure forme un arbre appele DOM
(Document Object Model).
[Link]
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ma premiere page HTML5</title>
<meta name="description" content="Description de ma page">
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>Bienvenue sur ma page</h1>
<p>Contenu visible par l utilisateur.</p>
<script src="[Link]"></script>
</body>
</html>
Detail des elements racines
Element Role Obligatoire
<html> Racine du document, contient tout Oui
<head> Metadonnees non visibles (titre, CSS, charset...) Oui
<body> Contenu visible de la page Oui
lang=... Langue du document (fr, en, ar...) sur <html> Recommande
IARO | Cours de Developpement Web | HTML5 - Module 1 : Fondamentaux Page 3 / 14
HTML5 Module 1 — Fondamentaux par IARO
4 La balise <head> et les metadonnees
L'element contient toutes les informations sur la page qui ne s'affichent pas directement dans le navigateur (a
l'exception du titre dans l'onglet). Ces informations sont essentielles pour le SEO, l'accessibilite, les performances
et l'affichage correct.
Encodage des caracteres — charset
L'encodage definit comment les caracteres sont representes numeriquement. UTF-8 est l'encodage universel qui
supporte tous les caracteres de toutes les langues du monde, y compris les emojis.
[Link]
<!-- Encodage UTF-8 : supporte tous les caracteres -->
<meta charset="UTF-8">
<!-- Ancienne methode (a eviter) -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
Viewport — Adaptation mobile
Le viewport definit comment la page doit s'afficher sur les appareils mobiles. Sans cette balise, les mobiles
affichent la page comme un ecran desktop reduit, rendant le texte illisible. C'est la base du responsive design.
[Link]
<!-- Viewport standard pour le responsive design -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Attributs du viewport -->
<!-- width=device-width : largeur = largeur reelle de l ecran -->
<!-- initial-scale=1.0 : zoom initial a 100% -->
<!-- maximum-scale=1.0 : empeche le zoom (deconseille) -->
<!-- user-scalable=no : desactive le zoom (inaccessible) -->
Titre et description — SEO
[Link]
<!-- Titre affiché dans l onglet et les résultats Google -->
<title>Accueil - Mon Site Web | IARO</title>
<!-- Description (160 caracteres max) pour Google -->
<meta name="description" content="Apprenez le HTML5 avec IARO,
la plateforme de formation au developpement web.">
<!-- Robots : indexation par les moteurs de recherche -->
<meta name="robots" content="index, follow">
<!-- Auteur de la page -->
<meta name="author" content="IARO">
IARO | Cours de Developpement Web | HTML5 - Module 1 : Fondamentaux Page 4 / 14
HTML5 Module 1 — Fondamentaux par IARO
5 Liens externes : CSS, Favicon et Polices
Integrer une feuille de style CSS
[Link]
<!-- Lien vers un fichier CSS externe (methode recommandee) -->
<link rel="stylesheet" href="css/[Link]">
<!-- CSS conditionnel pour impression -->
<link rel="stylesheet" href="css/[Link]" media="print">
<!-- CSS inline (a eviter, melange structure et style) -->
<style>
body { margin: 0; font-family: sans-serif; }
</style>
Favicon — Icone de l'onglet
[Link]
<!-- Favicon standard (format .ico) -->
<link rel="icon" type="image/x-icon" href="[Link]">
<!-- Favicon moderne PNG (plusieurs tailles) -->
<link rel="icon" type="image/png" sizes="32x32" href="[Link]">
<link rel="icon" type="image/png" sizes="16x16" href="[Link]">
<!-- Icone pour Apple (iPhone, iPad) -->
<link rel="apple-touch-icon" sizes="180x180" href="[Link]">
<!-- Favicon SVG (moderne, scalable) -->
<link rel="icon" type="image/svg+xml" href="[Link]">
Polices de caracteres
[Link]
<!-- Google Fonts (dans le <head>) -->
<link rel="preconnect" href="[Link]
<link href="[Link]
@400;700&display=swap" rel="stylesheet">
<!-- Police locale avec @font-face (dans le CSS) -->
<style>
@font-face {
font-family: 'MaPolice';
src: url('fonts/mapolice.woff2') format('woff2');
}
</style>
IARO | Cours de Developpement Web | HTML5 - Module 1 : Fondamentaux Page 5 / 14
HTML5 Module 1 — Fondamentaux par IARO
Toujours placer les liens CSS dans le <head> pour eviter le FOUC (Flash Of Unstyled Content), et les scripts
JavaScript juste avant </body> (ou avec l attribut defer) pour ne pas bloquer le rendu de la page.
i
IARO | Cours de Developpement Web | HTML5 - Module 1 : Fondamentaux Page 6 / 14
HTML5 Module 1 — Fondamentaux par IARO
6 Syntaxe HTML — Regles et conventions
Balises ouvrantes, fermantes et auto-fermantes
Une balise HTML se compose d'un nom entoure de chevrons < >. La plupart des balises existent en paire : une
balise ouvrante et une balise fermante (avec /). Certaines balises sont dites void (vides) : elles n'ont pas de
contenu ni de balise fermante.
[Link]
<!-- Balises avec ouverture et fermeture -->
<p>Ceci est un paragraphe.</p>
<strong>Texte en gras</strong>
<div>Contenu du bloc</div>
<!-- Balises auto-fermantes (void elements) -->
<br> <!-- Retour a la ligne -->
<hr> <!-- Ligne horizontale -->
<img src="[Link]" alt="Photo">
<input type="text">
<link rel="stylesheet" href="[Link]">
<meta charset="UTF-8">
Attributs
Les attributs fournissent des informations supplementaires sur un element. Ils se placent dans la balise ouvrante et
suivent la syntaxe nom="valeur".
[Link]
<!-- Attributs essentiels -->
<a href="[Link] target="_blank">Visiter IARO</a>
<img src="[Link]" alt="Logo IARO" width="200" height="80">
<input type="email" id="email" name="email" required>
<!-- Attributs universels (valides sur toute balise) -->
<div id="unique-id"> <!-- Identifiant unique -->
<p class="rouge bold"> <!-- Classes CSS multiples -->
<span style="color:red"> <!-- Style inline (eviter) -->
<section data-page="1"> <!-- Donnee personnalisee -->
<p hidden>Cache</p> <!-- Masque l element -->
<p contenteditable>Editable par l utilisateur</p>
Imbrication correcte des elements
IARO | Cours de Developpement Web | HTML5 - Module 1 : Fondamentaux Page 7 / 14
HTML5 Module 1 — Fondamentaux par IARO
[Link]
<!-- CORRECT : fermeture dans l ordre inverse d ouverture -->
<p><strong><em>Texte important</em></strong></p>
<!-- INCORRECT : chevauchement interdit -->
<p><strong><em>Texte</strong></em></p>
<!-- CORRECT : imbrication logique -->
<ul>
<li>Element 1</li>
<li>Element 2
<ul>
<li>Sous-element</li>
</ul>
</li>
</ul>
IARO | Cours de Developpement Web | HTML5 - Module 1 : Fondamentaux Page 8 / 14
HTML5 Module 1 — Fondamentaux par IARO
7 Commentaires, Entites HTML et Attributs data-*
Commentaires HTML
Les commentaires permettent d'annoter le code HTML. Ils sont ignores par le navigateur mais restent visibles dans
le code source (ne pas y mettre d'informations sensibles).
[Link]
<!-- Commentaire sur une ligne -->
<!--
Commentaire
sur plusieurs lignes
-->
<!-- TODO: Ajouter un formulaire de contact ici -->
<!-- Section navigation - debut -->
<nav>...</nav>
<!-- Section navigation - fin -->
Entites HTML — Caracteres speciaux
Certains caracteres ont une signification speciale en HTML (comme < et >) et doivent etre echappes avec des
entites HTML pour s'afficher correctement dans le navigateur.
Entite Symbole Nom Usage
< < Less than Inferieur / balise
> > Greater than Superieur / balise
& & Ampersand Et commercial
" " Quotation Guillemet double
' ' Apostrophe Guillemet simple
Non-breaking Espace insecable
© (c) Copyright Droit d auteur
® (R) Registered Marque deposee
€ EUR Euro Symbole euro
— -- Em dash Tiret long
Attributs data-* — Donnees personnalisees
Les attributs data-* permettent de stocker des donnees personnalisees directement dans les elements HTML,
accessibles via JavaScript avec la propriete dataset.
IARO | Cours de Developpement Web | HTML5 - Module 1 : Fondamentaux Page 9 / 14
HTML5 Module 1 — Fondamentaux par IARO
[Link]
<!-- Stocker des donnees dans le HTML -->
<button data-user-id="42" data-action="delete"
data-confirm="Supprimer cet article ?">
Supprimer
</button>
<!-- Acceder aux donnees en JavaScript -->
const btn = [Link]('button');
[Link]([Link]); // '42'
[Link]([Link]); // 'delete'
[Link]([Link]); // 'Supprimer...'
IARO | Cours de Developpement Web | HTML5 - Module 1 : Fondamentaux Page 10 / 14
HTML5 Module 1 — Fondamentaux par IARO
8 Integration de JavaScript dans HTML5
HTML5 offre plusieurs methodes pour integrer JavaScript. Le positionnement et les attributs utilises ont un impact
significatif sur les performances de chargement de la page.
[Link]
<!-- 1. Script externe (methode recommandee) -->
<!-- Place avant </body> : ne bloque pas le rendu -->
<script src="js/[Link]"></script>
<!-- 2. Attribut defer : charge en parallele, execute apres parsing -->
<script src="js/[Link]" defer></script>
<!-- 3. Attribut async : charge et execute en parallele -->
<!-- Attention : ordre d execution non garanti -->
<script src="js/[Link]" async></script>
<!-- 4. Script inline (a limiter) -->
<script>
[Link]('DOMContentLoaded', () => {
[Link]('Page HTML completement chargee');
});
</script>
<!-- 5. Module ES6 (JavaScript moderne) -->
<script type="module" src="js/[Link]"></script>
Comparaison : normal vs defer vs async
Methode Telechargement Execution Ordre garanti
Normal Bloquant Immediat Oui
defer Parallele Apres DOM Oui
async Parallele Immediat Non
module Parallele Apres DOM Oui
Utiliser defer est la meilleure pratique dans la majorite des cas : le script se charge en parallele sans bloquer le
rendu de la page, et s execute apres que le DOM est completement parse. Cela evite d avoir a placer les scripts
en bas de page.
!
IARO | Cours de Developpement Web | HTML5 - Module 1 : Fondamentaux Page 11 / 14
HTML5 Module 1 — Fondamentaux par IARO
9 Balises void et bonnes pratiques
Les balises void (ou elements vides) sont des elements HTML qui ne peuvent pas avoir de contenu enfant. Elles
n'ont donc pas de balise fermante.
<br> <hr>
Retour a la ligne Ligne horizontale
<img> <input>
Image Champ de saisie
<link> <meta>
Lien externe (CSS, favicon) Metadonnee
<source> <track>
Source media alt. Piste de sous-titres
<area> <base>
Zone cliquable (image map) URL de base du document
<col> <embed>
Colonne de tableau Contenu embarque externe
<param> <wbr>
Parametre d un objet Retour a la ligne optionnel
10 Bonnes pratiques HTML5
Pratique Recommandation
Indentation 2 ou 4 espaces (pas de tabulations mixtes)
Minuscules Toujours ecrire les balises en minuscules
Attribut alt Obligatoire sur chaque <img> pour l accessibilite
Guillemets Toujours entourer les valeurs d attributs de guillemets
Encodage Toujours declarer charset=UTF-8 en premier dans <head>
Langue Toujours specifier lang sur la balise <html>
Semantique Preferer les balises semantiques a div et span
Validation Valider le code avec [Link]
Commentaires Commenter les sections complexes du code
Fermeture des balises Toujours fermer les balises ouvertes
IARO | Cours de Developpement Web | HTML5 - Module 1 : Fondamentaux Page 12 / 14
HTML5 Module 1 — Fondamentaux par IARO
10 Exercice pratique — Page HTML5 complete
Reproduisez et analysez ce document HTML5 complet qui integre tous les concepts du Module 1 : structure,
metadonnees, encodage, viewport, favicon, CSS, JS et commentaires.
[Link]
<!DOCTYPE html>
<html lang="fr">
<head>
<!-- Encodage et viewport -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO -->
<title>Mon Portfolio | IARO Formation</title>
<meta name="description" content="Portfolio d un etudiant IARO">
<meta name="author" content="Votre Nom">
<!-- Favicon -->
<link rel="icon" type="image/png" href="[Link]">
<!-- CSS externe -->
<link rel="stylesheet" href="css/[Link]">
<!-- Google Fonts -->
<link rel="preconnect" href="[Link]
<link href="[Link]
:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<!-- Contenu principal -->
<h1>Bienvenue sur mon portfolio</h1>
<p data-section="intro">
Je suis etudiant en developpement web chez IARO.
</p>
<!-- Script en fin de body ou avec defer -->
<script src="js/[Link]" defer></script>
</body>
</html>
11 Resume du Module 1
Concept A retenir
DOCTYPE <!DOCTYPE html> — premiere ligne obligatoire, pas une balise
Structure <html> > <head> + <body> — hierarchie obligatoire
charset UTF-8 — premier element du <head>
IARO | Cours de Developpement Web | HTML5 - Module 1 : Fondamentaux Page 13 / 14
HTML5 Module 1 — Fondamentaux par IARO
viewport width=device-width — base du responsive design
Balise void Pas de balise fermante : <br>, <img>, <input>, <meta>...
Attributs Toujours entre guillemets : href="...", src="..."
Imbrication Fermer dans l ordre inverse d ouverture
Entites HTML < > & © — caracteres speciaux
JavaScript defer = recommande | async = analytics | module = ES6
Bonne pratique Toujours valider avec [Link]
Fin du Module 1 — Prochain : Module 2 : Balises de texte et typographie
IARO | Cours de Developpement Web | HTML5 - Module 1 : Fondamentaux Page 14 / 14