HTML Cheatsheet
“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>
- 1er élément
- 2ème élément
- 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. |
…. | …. |