path: root/files/fr/apprendre/html/cheatsheet/index.html

---
title: Cheatsheet HTML
slug: Apprendre/HTML/Cheatsheet
tags:
  - Cheatsheet
  - HTML
  - Intermediate
  - Learn
translation_of: Learn/HTML/Cheatsheet
---
<div>{{draft}}</div>

<p>Lorsqu'on utilise {{Glossary("HTML")}}, une antisèche, une page rapide et récapitulative (<em>cheatsheet</em>) peut s'avérer plutôt pratique pour se souvenir rapidement de quelle balise HTML utiliser dans quel cas. MDN possède également une <a href="/fr/docs/Web/HTML/Element">documentation HTML exhaustive</a> ainsi que différents <a href="/fr/Apprendre/HTML/Comment">tutoriels HTML détaillés</a>. Toutefois, dans la plupart des cas, il suffit juste d'une rapide vérification afin de pouvoir continuer. Cet article, sous la forme d'une antisèche synthétique, est là pour fournir des exemples de codes concis pour les usages les plus fréquents des éléments les plus utilisés.</p>

<div class="note">
<p><strong>Rappel :</strong> Les balises HTML doivent en premier lieu être utilisées pour leur sémantique et non pour leur apparence. Il est toujours possible de modifier la mise en forme d'une balise donnée grâce à {{Glossary("CSS")}}. Aussi, quand vous utilisez HTML, soyez concentré-e sur la signification plutôt que sur l'apparence finale.</p>
</div>

<h2 id="Mise_en_forme_inline">Mise en forme <em>inline</em></h2>

<p>Un élément dit « en ligne » ou <em>inline</em> prend autant d'espace que nécessaire. Ces éléments sont disposés horizontalement les uns à la suite des autres, à la façon des mots dans une phrase ou des livres dans une bibliothèque.</p>

<table class="nostripe standard-table">
 <thead>
  <tr>
   <th scope="col">Utilisation</th>
   <th scope="col">Fragment de code</th>
   <th scope="col">Résultat</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td style="vertical-align: top;">Un lien simple</td>
   <td style="vertical-align: top;"><code>&lt;a href="https://developer.mozilla.org"&gt;Un lien vers MDN&lt;/a&gt;</code></td>
   <td style="vertical-align: top;"><a href="https://developer.mozilla.org">Un lien vers MDN</a></td>
  </tr>
  <tr>
   <td>Une image simple</td>
   <td><code>&lt;img src="https://developer.mozilla.org/media/img/mdn-logo-sm.png" /&gt;</code></td>
   <td><img src="https://developer.mozilla.org/media/img/mdn-logo-sm.png"></td>
  </tr>
  <tr>
   <td>Un texte avec emphase</td>
   <td><code>&lt;em&gt;Je suis distingué&lt;/em&gt;</code></td>
   <td><em>Je suis distingué</em></td>
  </tr>
  <tr>
   <td>Un texte marqué comme important</td>
   <td><code>&lt;strong&gt;Je suis important&lt;/strong&gt;</code></td>
   <td><strong>Je suis important</strong></td>
  </tr>
  <tr>
   <td>Un texte mis en avant</td>
   <td><code>&lt;mark&gt;Remarquez-moi&lt;/mark&gt;</code></td>
   <td><mark>Remarquez-moi</mark></td>
  </tr>
  <tr>
   <td>Barrer du texte qui n'est plus pertinent</td>
   <td><code>&lt;s&gt;Je ne suis plus d'actualité ou plus pertinent&lt;/s&gt;</code></td>
   <td><s>Je ne suis plus d'actualité ou plus pertinent</s></td>
  </tr>
  <tr>
   <td>Souligner pour ajouter une annotation non-textuelle</td>
   <td><code>Ceci est &lt;u&gt;mal orthographié&lt;/u&gt;</code></td>
   <td>Ceci est <u>mal orthographié</u></td>
  </tr>
  <tr>
   <td>Du texte qui doit être affiché en indice</td>
   <td><code>H&lt;sub&gt;2&lt;/sub&gt;O</code></td>
   <td>H<sub>2</sub>O</td>
  </tr>
  <tr>
   <td>Du texte qui doit être affiché en exposant</td>
   <td><code>M&lt;sup&gt;me&lt;/sup&gt; de Bovary</code></td>
   <td>M<sup>me</sup> de Bovary</td>
  </tr>
  <tr>
   <td>Une citation dans le cours du texte</td>
   <td><code>Il a dit : &lt;q&gt;Je suis ton père.&lt;/q&gt;</code></td>
   <td>Il a dit : <q>Je suis ton père.</q></td>
  </tr>
  <tr>
   <td>Un saut de ligne</td>
   <td><code>Ligne 1 &lt;br/&gt; Ligne 2</code></td>
   <td>Ligne 1<br>
    Ligne 2</td>
  </tr>
  <tr>
   <td>Du code informatique (code « machine »)</td>
   <td><code>&lt;code&gt;System.print.File("coucou")&lt;/code&gt;</code></td>
   <td><code>System.print.File("coucou")</code></td>
  </tr>
  <tr>
   <td>Un fichier audio intégré</td>
   <td><code>&lt;audio controls src="https://mdn.mozillademos.org/files/2587/AudioTest%20%281%29.mp3"&gt;L'élément &lt;code&gt;audio&lt;/code&gt; n'est pas supporté.&lt;/audio&gt;</code></td>
   <td>
    <audio>L'élément <code>audio</code> n'est pas supporté.</audio>
   </td>
  </tr>
  <tr>
   <td>Un fichier vidéo intégré</td>
   <td><code>&lt;video controls src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4"&gt;L'élément &lt;code&gt;video&lt;/code&gt; n'est pas supporté.&lt;/video&gt;</code></td>
   <td>
    <video controls src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4">L'élément <code>video</code> n'est pas supporté.</video>
   </td>
  </tr>
 </tbody>
</table>

<h2 id="Mise_en_forme_block">Mise en forme <em>block</em></h2>

<p>Les éléments de bloc (<em>block</em> en anglais) s'organisent différemment. Ils prennent toute la largeur de la page. Étant donné qu'ils prennent toute cette largeur, on ne peut donc pas les disposer côté à côte horizontalement. Leur organisation sera plutôt celle de paragraphes dans une dissertation ou celle d'étages dans un immeuble.</p>

<table class="nostripe standard-table">
 <thead>
  <tr>
   <th scope="col">Utilisation</th>
   <th scope="col">Fragment de code</th>
   <th scope="col">Résultat</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td style="vertical-align: top;">Un paragraphe simple</td>
   <td style="vertical-align: top;">
    <p><code>&lt;p&gt;Je suis un paragraphe&lt;/p&gt;</code><br>
     <code>&lt;p&gt;Je suis un autre paragraphe&lt;/p&gt; </code></p>
   </td>
   <td style="vertical-align: top;">
    <p>Je suis un paragraphe</p>

    <p>Je suis un autre paragraphe</p>
   </td>
  </tr>
  <tr>
   <td style="vertical-align: top;">Une liste non-ordonnée</td>
   <td style="vertical-align: top;"><code>&lt;ul&gt;<br>
      &lt;li&gt;Je suis un élément&lt;/li&gt;<br>
      &lt;li&gt;Je suis un autre élément&lt;/li&gt;<br>
    &lt;ul&gt;</code></td>
   <td style="vertical-align: top;">
    <ul>
     <li>Je suis un élément</li>
     <li>Je suis un autre élément</li>
    </ul>
   </td>
  </tr>
  <tr>
   <td style="vertical-align: top;">Une liste ordonnée</td>
   <td style="vertical-align: top;"><code>&lt;ol&gt;<br>
      &lt;li&gt;Je suis le premier élément&lt;/li&gt;<br>
      &lt;li&gt;Je suis le deuxième élément&lt;/li&gt;<br>
    &lt;ol&gt;</code></td>
   <td style="vertical-align: top;">
    <ol>
     <li>Je suis le premier élément</li>
     <li>Je suis le deuxième élément</li>
    </ol>
   </td>
  </tr>
  <tr>
   <td style="vertical-align: top;">Une ligne horizontale</td>
   <td style="vertical-align: top;"><code>&lt;hr/&gt;</code></td>
   <td style="vertical-align: top;">
    <hr></td>
  </tr>
  <tr>
   <td style="vertical-align: top;">Des titres de différents niveaux (du plus important au moins important)</td>
   <td style="vertical-align: top;">
    <p>&lt;h2&gt;Un titre de niveau 2&lt;/h2&gt;<br>
     &lt;h3&gt;Un titre de niveau 3&lt;/h3&gt;<br>
     &lt;h4&gt;Un titre de niveau 4&lt;/h4&gt;<br>
     &lt;h5&gt;Un titre de niveau 5&lt;/h5&gt;</p>
   </td>
   <td style="vertical-align: top;">
    <h2 id="Un_titre_de_niveau_2">Un titre de niveau 2</h2>

    <h3 id="Un_titre_de_niveau_3">Un titre de niveau 3</h3>

    <h4 id="Un_titre_de_niveau_4">Un titre de niveau 4</h4>

    <h5 id="Un_titre_de_niveau_5">Un titre de niveau 5</h5>
   </td>
  </tr>
 </tbody>
</table>