Cheat Sheet / Aide mémoire HTML

Voici une cheat sheet (aide-mémoire) pour les éléments de base du langage HTML.

Structure de base d'une page HTML

<!DOCTYPE html>
<html>
<head>
    <title>Titre de la page</title>
</head>
<body>
    <!-- Contenu de la page -->
</body>
</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

<h1>Titre de niveau 1</h1>
<h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6</h6>

<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

<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>:

<p>Le texte <strong>en gras</strong>.</p>

Listes

Liste non ordonnée

C'est la fameuse "boulette liste" 😃

<ul>
    <li>Élément 1</li>
    <li>Élément 2</li>
    <li>Élément 3</li>
</ul>

<ul> : Définit une liste non ordonnée.
<li> : Élément de liste.
Plus d'informations et exemples sur MDN

Liste ordonnée

<ol>
    <li>Élément 1</li>
    <li>Élément 2</li>
    <li>Élément 3</li>
</ol>

<ol> : Définit une liste ordonnée.
Plus d'informations et exemples sur MDN

Images

<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:

width: 100%;

Liens hypertextes

<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.

Télécharger en PDF