Résumé Code HTML Commenté
Structre d'un document HTML5
Squelette minimal complet
<!DOCTYPE html>
<!-- DOCTYPE : déclaration obligatoire, indique au navigateur la version
HTML -->
<!-- HTML5 simplifie le doctype par rapport à XHTML et HTML4 -->
<html lang="fr" dir="ltr">
<!-- lang="fr" : langue de la page (utile pour le SEO et les moteurs de
recherche) -->
<!-- dir="ltr" : sens de lecture gauche→droite (ltr) ou droite→gauche (rtl)
-->
<head>
<!-- HEAD : entête invisible, contient les métadonnées de la page -->
<!-- ENCODAGE : toujours en premier dans le head -->
<meta charset="UTF-8">
<!-- UTF-8 permet d'afficher tous les caractères spéciaux (é, à, ç...) -
->
<!-- TITRE : affiché dans l'onglet du navigateur, très important pour le
SEO -->
<title>Titre clair et pertinent de la page</title>
<!-- LIEN VERS LA FEUILLE DE STYLE CSS -->
<link rel="stylesheet" href="[Link]" />
</head>
<body>
<!-- BODY : corps visible de la page -->
<!-- Contient tout ce que l'utilisateur voit : texte, images, liens,
etc. -->
<h1>Contenu visible ici</h1>
</body>
</html>
Balises META — name (SEO)
<head>
<meta charset="UTF-8">
<!-- AUTEUR : nom de la personne qui a créé la page -->
<meta name="author" content="Ilham Oumaira">
<!-- DESCRIPTION : résumé affiché dans les résultats de recherche -->
<meta name="description" content="Introduction aux technologies web :
HTML, CSS, JavaScript">
<!-- GÉNÉRATEUR : logiciel utilisé pour créer la page -->
<meta name="generator" content="Adobe Dreamweaver">
<!-- ROBOTS : directives pour les robots d'indexation -->
<!-- index/noindex : autoriser ou interdire l'indexation de la page -->
<!-- follow/nofollow : autoriser ou interdire le suivi des liens -->
<meta name="robots" content="index, follow">
<meta name="robots" content="noindex, nofollow">
<title>Introduction aux Technologies Web</title>
</head>
Balises META — http-equiv (comportement HTTP)
<head>
<!-- ENCODAGE de la page (équivalent HTTP) -->
<meta charset="UTF-8">
<!-- EXPIRATION : date d'expiration du cache de la page -->
<meta http-equiv="expires" content="Tue, 20 Aug 1996 14:25:27 GMT">
<!-- RAFRAÎCHISSEMENT automatique toutes les N secondes -->
<meta http-equiv="refresh" content="30">
<!-- REDIRECTION automatique vers une autre page après N secondes -->
<!-- content="2" = attendre 2 secondes avant de rediriger -->
<meta http-equiv="refresh" content="2;URL=[Link]
<title>Ma page</title>
</head>
Les commentaires HTML
<body>
<!-- Ceci est un commentaire : non visible dans le navigateur -->
<!-- Peut être placé partout SAUF à l'intérieur d'une balise -->
<p>Texte visible</p>
<!-- Commentaire sur plusieurs lignes :
utile pour documenter son code
ou désactiver temporairement du contenu -->
</body>
<!-- Commentaire en dehors du body : aussi valide -->
</html>
Le Texte, les Titres, les Listes et les Lignes
Les titres h1 à h6
<body>
<!-- H1 : titre principal, unique par page (important pour le SEO) -->
<h1>Titre Principal — H1</h1>
<!-- H2 : sous-titre de niveau 1 -->
<h2>Sous-titre Niveau 1 — H2</h2>
<!-- H3 : sous-titre de niveau 2 -->
<h3>Sous-titre Niveau 2 — H3</h3>
<!-- H4, H5, H6 : niveaux supplémentaires, de moins en moins utilisés -->
<h4>Sous-titre Niveau 3 — H4</h4>
<h5>Sous-titre Niveau 4 — H5</h5>
<h6>Sous-titre Niveau 5 — H6</h6>
<!-- ⚠️ Plus le chiffre est grand, plus le texte est petit -->
</body>
Les paragraphes et retours à la ligne
<body>
<!-- P : balise de paragraphe, crée un bloc de texte avec marges auto -->
<p>La gestion agile est une méthodologie qui offre une grande flexibilité.
</p>
<p>Contrairement aux méthodes traditionnelles, la gestion agile n'est pas
linéaire.</p>
<!-- BR : saut de ligne simple (balise vide, sans balise fermante) -->
<!-- ⚠️ Utiliser <br> pour un saut de ligne, pas pour créer un paragraphe
-->
<p>
Adresse : <br>
123 Rue Exemple <br>
Appartement 4 <br>
Ville, Code postal
</p>
<!-- 2 x <br> = une ligne vide d'espacement -->
<p>Premier bloc de texte.</p>
<br><br>
<p>Deuxième bloc avec espacement supplémentaire.</p>
<!-- HR : ligne horizontale de séparation (balise vide) -->
<h2>Section 1</h2>
<p>Contenu de la section 1...</p>
<hr> <!-- sépare deux sections -->
<h2>Section 2</h2>
<p>Contenu de la section 2...</p>
</body>
Formatage du texte
<body>
<!-- STRONG : texte en gras (importance sémantique) -->
<p><strong>Texte important en gras</strong> pour mettre en évidence.</p>
<!-- EM : texte en italique (emphase sémantique) -->
<p><em>Texte en italique</em> pour l'emphase.</p>
<!-- MARK : texte surligné en jaune -->
<p><mark>Texte surligné</mark> pour attirer l'attention.</p>
<!-- SMALL : texte en petite taille -->
<p><small>Texte en petite taille</small> pour les détails secondaires.</p>
<!-- S : texte barré (contenu obsolète ou supprimé) -->
<p><s>Texte barré</s> pour indiquer un contenu dépassé.</p>
<!-- CODE : extrait de code inline (police monospace) -->
<p>Utilisez <code>[Link]()</code> pour afficher dans la console.</p>
<!-- PRE : texte préformaté (respecte espaces et retours à la ligne) -->
<!-- Souvent utilisé avec CODE pour afficher des blocs de code -->
<pre>
Texte avec des espaces
multiples et des
retours à la ligne.
</pre>
<pre>
<code>
#include <stdio.h>
int main() {
printf("Hello, World!");
return 0;
}
</code>
</pre>
</body>
Balises d'indexation (sub, sup, var)
<body>
<!-- SUB : indice inférieur (chimie, maths) -->
<p>La formule chimique de l'eau est H<sub>2</sub>O</p>
<p>S = n/2 × (a<sub>1</sub> + a<sub>n</sub>)</p>
<!-- SUP : exposant supérieur (puissances, copyright, notes) -->
<p>Le théorème de Pythagore : a<sup>2</sup> + b<sup>2</sup> =
c<sup>2</sup></p>
<p>Surface = r<sup>2</sup> × π</p>
<p>Copyright © 2024<sup>®</sup></p>
<!-- VAR : nom de variable mathématique (affiché en italique) -->
<p>
<var>a</var><sup>2</sup> + <var>b</var><sup>2</sup> = <var>c</var>
<sup>2</sup>
</p>
</body>
Citations
<body>
<!-- Q : citation courte inline (guillemets automatiques) -->
<p>Albert Einstein a déclaré :
<q>La vie, c'est comme une bicyclette, il faut avancer pour ne pas
perdre l'équilibre.</q>
</p>
<!-- BLOCKQUOTE : citation longue, affichée en bloc indenté -->
<p>Tim Berners-Lee a dit :</p>
<blockquote>
Le web est plus une invention sociale que technologique. Je l'ai conçu
pour qu'il ait un effet social — aider les gens à travailler ensemble —
et non comme un jouet technologique. — Tim Berners-Lee, 1999
</blockquote>
</body>
Caractères spéciaux (entités HTML)
<body>
<!-- Syntaxe des entités : &nom; -->
<!-- Indispensables pour afficher des caractères réservés ou spéciaux -->
<p> </p> <!-- espace insécable -->
<p>< et ></p> <!-- < et > (éviter la confusion avec des balises)
-->
<p>&</p> <!-- & (le & seul serait interprété par le
navigateur) -->
<p>"</p> <!-- guillemet " -->
<p>©</p> <!-- © copyright -->
<p>®</p> <!-- ® marque déposée -->
<p>°</p> <!-- ° degré -->
<p>²</p> <!-- ² exposant 2 -->
<p>³</p> <!-- ³ exposant 3 -->
<p>½</p> <!-- ½ -->
<p>¼</p> <!-- ¼ -->
<p>¾</p> <!-- ¾ -->
<p>é</p> <!-- é -->
<p>à</p> <!-- à -->
<p>ç</p> <!-- ç -->
<p>€</p> <!-- € -->
<p>µ</p> <!-- µ -->
</body>
Les listes
<body>
<!-- LISTE NON ORDONNÉE : puces (ul = unordered list) -->
<!-- ul : conteneur de la liste | li : chaque élément -->
<ul>
<li>Laravel</li>
<li>Symfony</li>
<li>CodeIgniter</li>
<li>Zend Framework</li>
</ul>
<!-- LISTE ORDONNÉE : numérotée automatiquement (ol = ordered list) -->
<ol>
<li>Apprendre HTML</li>
<li>Apprendre CSS</li>
<li>Apprendre JavaScript</li>
<li>Créer des projets</li>
</ol>
<!-- LISTES IMBRIQUÉES : une liste dans une autre -->
<ul>
<li>Front-end
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Back-end
<ol>
<li>PHP</li>
<li>Python</li>
<li>[Link]</li>
</ol>
</li>
</ul>
<!-- LISTE DE DÉFINITIONS (dl = description list) -->
<!-- dl : conteneur | dt : terme | dd : définition du terme -->
<dl>
<dt>HTML</dt>
<dd>Langage de balisage standard pour les pages web.</dd>
<dt>CSS</dt>
<dd>Langage de feuille de style pour la présentation des pages HTML.
</dd>
<dt>JavaScript</dt>
<dd>Langage de programmation pour ajouter de l'interactivité.</dd>
</dl>
</body>
Les Liens Hypertexte
Liens relatifs (même site)
<!-- Lien vers un fichier dans le même dossier -->
<a href="[Link]">Aller à la page 2</a>
<!-- Lien vers un fichier dans un sous-dossier -->
<a href="pages/[Link]">HTML5</a>
<!-- Lien vers un fichier dans le dossier parent -->
<a href="../[Link]">Retour à l'accueil</a>
<!-- Lien vers un fichier CSS dans le dossier parent -->
<a href="../css/[Link]">Style</a>
Liens externes
<!-- Lien externe : URL complète obligatoire -->
<!-- target="_blank" : ouvre dans un nouvel onglet -->
<!-- rel="noopener" : bonne pratique de sécurité -->
<a href="[Link] target="_blank" rel="noopener">
W3Schools
</a>
<!-- Lien avec infobulle au survol (attribut title) -->
<a href="[Link] title="Documentation MDN"
target="_blank">
MDN Web Docs
</a>
Liens e-mail
<!-- Lien e-mail simple -->
<a href="[Link]
<!-- Lien e-mail avec paramètres avancés -->
<!-- %20 = espace -->
<!-- %0A = saut de ligne -->
<!-- %2C = virgule -->
<!-- %27 = apostrophe -->
<a href="[Link]
?subject=Demande%20d%27information
&cc=copie@[Link]
&body=Bonjour%2C%0A">
Nous écrire
</a>
Ancres (liens internes)
<!-- ÉTAPE 1 : définir la cible avec l'attribut id -->
<h2 id="section-contact">Contact</h2>
<!-- ÉTAPE 2 : créer le lien vers l'ancre avec # -->
<a href="#section-contact">Aller à la section Contact</a>
<!-- Ancre vers une autre page du même site -->
<a href="[Link]#formulaire">Écrire un message</a>
<!-- Ancre vers un sous-dossier -->
<a href="pages/[Link]#chapitre-3">Chapitre 3</a>
Lien de téléchargement & image cliquable
<!-- Lien de téléchargement (attribut download) -->
<a href="[Link]" download>Télécharger le PDF</a>
<!-- Image cliquable : combiner <a> et <img> -->
<!-- border="0" évite la bordure bleue automatique -->
<a href="[Link]">
<img src="[Link]" alt="Logo — retour accueil" border="0">
</a>
Les Tableaux HTML
Tableau complet avec sections sémantiques
<table border="1">
<!-- CAPTION : titre visible au-dessus du tableau -->
<caption>Frameworks Web Populaires</caption>
<!-- THEAD : en-têtes (répété automatiquement à l'impression) -->
<thead>
<tr>
<!-- TH : cellule d'en-tête → gras + centré automatiquement -->
<!-- scope="col" : indique que l'en-tête concerne une colonne
(accessibilité) -->
<th scope="col">Framework</th>
<th scope="col">Langage</th>
<th scope="col">Particularité</th>
</tr>
</thead>
<!-- TBODY : données principales du tableau -->
<tbody>
<tr>
<!-- TD : cellule de données standard -->
<td>Laravel</td>
<td>PHP</td>
<td>MVC élégant</td>
</tr>
<tr>
<td>React</td>
<td>JavaScript</td>
<td>Composants UI</td>
</tr>
</tbody>
<!-- TFOOT : pied de tableau (totaux, résumés) -->
<!-- Affiché en bas même s'il est déclaré avant tbody -->
<tfoot>
<tr>
<!-- scope="row" : en-tête de ligne (accessibilité) -->
<th scope="row" colspan="2">Total</th>
<td>2</td>
</tr>
</tfoot>
</table>
Fusion horizontale — colspan
<!-- colspan="N" : la cellule occupe N colonnes -->
<table border="1">
<tr>
<!-- Cette cellule occupe 3 colonnes au lieu d'1 -->
<th colspan="3">En-tête fusionné sur 3 colonnes</th>
</tr>
<tr>
<td>Colonne 1</td>
<td>Colonne 2</td>
<td>Colonne 3</td>
</tr>
</table>
Fusion verticale — rowspan
<!-- rowspan="N" : la cellule occupe N lignes -->
<table border="1">
<tr>
<!-- Cette cellule couvre 2 lignes -->
<td rowspan="2">Cellule sur 2 lignes</td>
<td>Ligne 1, Colonne 2</td>
</tr>
<tr>
<!-- ⚠️ Ne pas remettre de <td> ici ! -->
<!-- La place est déjà occupée par rowspan -->
<td>Ligne 2, Colonne 2</td>
</tr>
</table>
Combinaison colspan + rowspan
<!-- Exemple : emploi du temps -->
<table border="1">
<thead>
<tr>
<th>Heure</th>
<th>Lundi</th>
<th>Mardi</th>
</tr>
</thead>
<tbody>
<tr>
<td>9h-11h</td>
<!-- colspan="2" : occupe Lundi ET Mardi -->
<td colspan="2">Mathématiques</td>
</tr>
<tr>
<!-- rowspan="2" : couvre 2 lignes -->
<td rowspan="2">11h-13h</td>
<td>Physique</td>
<td>Chimie</td>
</tr>
<tr>
<!-- ⚠️ Pas de <td> pour l'heure : déjà occupé par rowspan -->
<td>Informatique</td>
<td>TP Lab</td>
</tr>
</tbody>
</table>
Cellule vide
<!-- (espace insécable) : force l'affichage de la bordure -->
<table border="1">
<tr>
<td>Donnée</td>
<td> </td> <!-- cellule vide visible -->
</tr>
</table>
Images & Iframes
Balise <img> — les essentiels
<!-- Image simple -->
<!-- src : chemin de l'image (obligatoire) -->
<!-- alt : texte alternatif si image absente (obligatoire pour
accessibilité) -->
<img src="[Link]" alt="Description de l'image">
<!-- Image avec dimensions en pixels -->
<!-- Si une seule dimension est donnée, l'autre est calculée
proportionnellement -->
<!-- Toujours indiquer au moins une dimension pour accélérer le rendu -->
<img src="[Link]" alt="Photo de Marrakech" width="400" height="300">
<!-- Image avec largeur en pourcentage (responsive) -->
<img src="[Link]" alt="Image adaptative" width="50%">
<!-- Image avec infobulle au survol (title) -->
<img src="[Link]" alt="Logo du site" title="Logo — cliquez pour revenir à
l'accueil">
<!-- Image sans bordure (utile quand elle est dans un lien) -->
<img src="[Link]" alt="Logo" border="0">
<figure> et <figcaption> — HTML5
<!-- figure : conteneur sémantique (image, vidéo, tableau, code...) -->
<!-- figcaption : légende liée au contenu du figure -->
<figure>
<img src="images/[Link]" alt="Comparatif langages web"
width="600">
<figcaption>
Javascript est le langage de programmation dominant en 2012
</figcaption>
</figure>
SVG inline — image vectorielle
<!-- SVG directement dans le HTML (zoomable sans perte, stylisable en CSS) -
->
<svg height="210" width="500">
<!-- polygon : forme définie par une liste de points (x,y) -->
<!-- fill : couleur de remplissage -->
<!-- stroke : couleur du contour -->
<!-- stroke-width : épaisseur du contour -->
<!-- fill-rule : règle de remplissage des zones -->
<polygon
points="100,10 40,198 190,78 10,78 160,198"
style="fill:red; stroke:green; stroke-width:5; fill-rule:nonzero;"
/>
</svg>
<iframe> — fenêtre intégrée
<!-- iframe : fenêtre intégrée affichant une autre page/ressource -->
<!-- Se place n'importe où entre <body> et </body> -->
<iframe
name="ma-frame" <!-- identifiant pour target="ma-frame" dans les
liens -->
src="[Link] <!-- URL de la page chargée dans la fenêtre
-->
width="600" <!-- largeur en pixels
-->
height="400" <!-- hauteur en pixels
-->
scrolling="AUTO" <!-- YES=toujours | NO=jamais | AUTO=si nécessaire
-->
frameborder="0" <!-- 1=avec bordure | 0=sans bordure
-->
marginwidth="10" <!-- marge interne horizontale en pixels
-->
marginheight="10"> <!-- marge interne verticale en pixels
-->
</iframe>
<!-- Iframe YouTube -->
<!-- allowfullscreen : autorise le mode plein écran -->
<iframe
width="560"
height="315"
src="[Link]
frameborder="0"
allowfullscreen>
</iframe>
<!-- Iframe Google Maps -->
<iframe
src="[Link]
width="600"
height="400"
frameborder="0"
scrolling="NO">
</iframe>
<!-- Lien qui charge une page dans une iframe spécifique -->
<!-- target doit correspondre au name de l'iframe -->
<a href="[Link]" target="ma-frame">Charger dans l'iframe</a>