Html Cheat Sheet


Pense-bête pour la syntaxe html à la manière comme il existe pour markdown.

Titres

6 niveaux de titres

Code


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

Illustration

Titre 1

Titre 2

Titre 3

Titre 4

Titre 5
Titre 6

Paragraphes

Un paragraphe est un bloc de texte délimité par une ou plusieurs lignes vides.

Code


      <p>Ceci est un premier paragraphe. Il est court avec un retour à la<br>ligne pas très inspiré.</p>
      <p>Un second paragraphe est nécessaire pour finir mon propos.</p>
      

Illustration

Ceci est un premier paragraphe. Il est court avec un retour à la
ligne pas très inspiré.

Un second paragraphe est nécessaire pour finir mon propos.

Liste

Non ordonnée

Code


      <ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
      </ul>
      

Illustration

Ordonnée

Code


      <ol>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
      </ol>
      

Illustration

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4

Listes imbriquées

Code


      <ul>
	<li>Item 1</li>
	<li>Item 2
	  <ol>
	    <li>Item 2.1</li>
	    <li>Item 2.2</li>
	    <li>Item 2.3</li>
	  </ol>
	</li>
	<li>Item 3</li>
	<li>Item 4</li>
      </ul>
      

Illustration

Hyperliens

Code


      <a href="https://www.mozilla.org/fr/">la page d'accueil Mozilla</a>
      

Illustration

la page d'accueil Mozilla

Images

Code


	  <img src="./images/50539000448_041fe41347_b.jpg" alt="Troupeau de moutons">
      

Illustration

Troupeau de moutons

"Herd of sheep" by enneafive is licensed under CC BY 2.0 .

Citation

Code

Cas 1 :


	  <blockquote>Utiliser l'élément <cite> pour identifier la source d'une citation. —<cite>Un inconnu</cite> </blockquote>
      

Cas 2 :


      <figure>
	<blockquote>
	  Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.
	</blockquote>
	<figcaption>—Aldous Huxley, <cite><a href="https://www.huxley.net/bnw/four.html">Brave New World </a></cite></figcaption>
      </figure>
      

Illustration

Cas 1 :

Utiliser l'élément <cite> pour identifier la source d'une citation. —Un inconnu

Cas 2 :

Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.
—Aldous Huxley, Brave New World

Explication

Figure : balise qui encadre un contenu autonome. Normalement une image. Il est également utiisé pour les citations. Une légende peut être ajouté avec la balise figcaption. Dans le cas d'une citation, figcaption sert pour l'autreur de la citation.

L'élément cite contient le titre de l'œuvre, article, film, chanson etc.

Blockquote encadre la citation elle-même qui peut se trouver dans un paragraphe.