Internet | Création de pages Web | HTML | Cheat Sheet / Aide mémoire HTML
Cheat Sheet / Aide mémoire HTML
Voici un résumé condensé concentré des balises HTML abordées pendant le cours.
Voici une cheat sheet (aide-mémoire) pour les éléments de base du langage HTML.
Structure de base d'une page HTML
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Titre de la page</title>
5 </head>
6 <body>
7 <!-- Contenu de la page -->
8 </body>
9 </html>
<!DOCTYPE html> : Déclaration du type de document.
<html> : Balise racine du document HTML.
<head> : Contient des informations sur la page, telles que le titre.
<title> : Définit le titre de la page qui s'affiche dans l'onglet du navigateur.
<body> : Contient le contenu visible de la page.
Titres et paragraphes
1 <h1>Titre de niveau 1</h1>
2 <h2>Titre de niveau 2</h2>
3 <h3>Titre de niveau 3</h3>
4 <h4>Titre de niveau 4</h4>
5 <h5>Titre de niveau 5</h5>
6 <h6>Titre de niveau 6</h6>
7
8 <p>Paragraphe de texte.</p>
<h1> à <h6> : Définit les titres de différents niveaux, <h1> étant le plus important. Un seul titre de niveau 1 sur
la page. Plus d'informations et exemples sur MDN
<p> : Définit un paragraphe de texte. Plus d'informations et exemples sur MDN
Texte en gras
1 <p>Le texte <b>en gras</b>.</p>
<b> : Utilisé pour mettre en évidence du texte en gras.
Note: depuis quelques années, la balise <strong> est préférée à <b>:
1 <p>Le texte <strong>en gras</strong>.</p>
Listes
© 2025 Mr. Lambrechts https://v2.ttrinfo.be 1|2
Liste non ordonnée
C'est la fameuse "boulette liste" 😃
1 <ul>
2 <li>Élément 1</li>
3 <li>Élément 2</li>
4 <li>Élément 3</li>
5 </ul>
<ul> : Définit une liste non ordonnée.
<li> : Élément de liste.
Plus d'informations et exemples sur MDN
Liste ordonnée
1 <ol>
2 <li>Élément 1</li>
3 <li>Élément 2</li>
4 <li>Élément 3</li>
5 </ol>
<ol> : Définit une liste ordonnée.
Plus d'informations et exemples sur MDN
Images
1 <img src="chemin_de_l_image.jpg" alt="Description de l'image">
<img> : Insère une image.
src : Spécifie l'URL de l'image.
alt : Texte alternatif en cas d'indisponibilité de l'image.
Plus d'informations et exemples sur MDN
Pour que l'image prenne 100% de la largeur disponible, on peut lui appliquer la règle CSS suivante:
1 width: 100%;
Liens hypertextes
1 <a href="http://www.exemple.com">Texte affiché</a>
<a> : Crée un lien hypertexte.
href : Spécifie l'URL de destination du lien.
Texte affiché : texte affiché à l'écran.
© 2025 Mr. Lambrechts https://v2.ttrinfo.be 2|2