HTML Cheatsheet

Author

Patrick Reuter (version de travail non-exhaustive)

Published

April 17, 2025

“Hello World” en HTML5

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">      
        <title>Hello World</title>
    </head> 
    <body>
        <p>Premier exemple HTML5</p>
    </body>
</html>

Balises en-tête d’un document HTML5

<title>.../<title> Titre, pour fenêtre/onglet et moteur de recherche
<link ... > Inclusion, p.ex., des feuilles de style CSS
<meta ... > Meta-description de la page
<script> Inclusion des scripts JavaScript

Balises du corps de document HTML5

<!-- commentaires -->
<p>Paragraphe</p> Paragraphe
<em>texte en emphase</em> texte en emphase
<h1>Titre niveau 1</h1> Titre niveau 1
<h2>Titre niveau 2</h2> Titre niveau 2
...
<h5>Titre niveau 6</h5> Titre niveau 6
<a href="lien.html">lien hypertexte</a> lien hypertexte (renvoie vers lien.html)
…. ….

Listes non-ordonnées

<ul>
    <li>1er élément</li>
    <li>2ème élément</li>
    <li>3ème élément</li>
</ul>
  • 1er élément
  • 2ème élément
  • 3ème élément

Listes ordonnées

<ol>
    <li>1er élément</li>
    <li>2ème élément</li>
    <li>3ème élément</li>
</ol>
  1. 1er élément
  2. 2ème élément
  3. 3ème élément

Tables

<table>
    <tr>
        <th>Extension</th>
        <th>Utilisation</th> 
    </tr>
    <tr>
        <td>.jpg</td>
        <td>Photos</td>
    </tr>
    <tr>
    <tr>
        <td>.png</td> 
        <td>Illustrations</td>
    </tr>
    <tr>
        <td>.gif</td>
        <td>Animations</td>
    </tr>
     <tr>
        <td>.svg</td>
        <td>Graphiques vectorielles</td>
    </tr>
</table>
Extension Utilisation
.jpg Photos
.png Illustrations
.gif Animations
.svg Graphiques vectorielles

Balises du corps de document HTML5 (sans fermeture) :

<br> Saut de ligne dans un paragraphe
<img src="chat.jpg" alt="chat" /> Intégration d’une image avec texte alternatif
…. ….

Balises structurantes de HTML5 :

<header>...</header> En-tête du corps du document
<nav>...</nav> Eléments de navigations (menu)
<section>...</section> Contenu de la page
<article>...</article> Bloc de contenu
<aside>...</aside> Une colonne supplémentaire…
<footer>...</footer> Pied-de page
<address>...</address> Adresse à contacter
<figure>...</figure> Illustration
…. ….

Balises de média HTML5

<audio>...</audio> Pour lire un fichier audio.
<video>...</video> Pour lire un fichier vidéo.
<canvas>...</canvas> Créer un graphique raster.
<svg>...</svg> Créer un graphique vectoriel.
…. ….