Show Menu
Cheatography
  1. Home >
  2. Cheat Sheets >

HTML fluctri Cheat Sheet (DRAFT) by

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Partage du code

<co­de>
ligne de code
&lt;
<kb­d>
raccourci clavier
<pr­e>
bloc de code

Balise­/él­ément de base

<ht­ml>
Document HTML
<he­ade­r>
Entête du document
<bo­dy>
Le corps du document
<he­ad>
Inform­ation du document que l'util­isateur ne vois pas
<meta name =
méta-i­nfo­rmation
<st­yle>
<li­nk>
<sc­rip­t>
<p>
Paragraphe
<h1>
Titre
<!D­OCTYPE html>
Type de document (ici html)
<ti­tre>
Titre de la page Web

Attrib­uts­(Pa­ramètre d'un élément) HTML

<input type=
chant de saisi
<br>
saut de ligne
<wb­r>
couper des longs mots
<ol>
liste numérotée (order list)
<ul>
liste a puce (unordered list)
<dl>
Liste de définition (defin­ition list)
<hr>
saut de section
<li>
Elément de liste (list item)
<dt>
Terme à définir (defin­ition term)
<dd>
Descri­ption (defin­ition descri­ption)

sections HTML 5

<he­ade­r>
Entête du site ou d'une section
<fo­ote­r>
Pied du site ou d'une section
<na­v>
Eléments de naviga­tion, menu, pagina­tion, ...
<ma­in>
Contenu principal
<se­cti­on>
Groupement thématique de contenu, généra­lement avec un en-tête, titre
<ar­tic­le>
Contenu autonome dans une page message sur un forum, un article de blog, ...
<as­ide>
Contenu qui indire­ctement lié, en marge du sujet principal, voir même sans rapport
 

citation

<ci­te>
titre d'un élement culturel (film, livre, ect...)
<q>
citation courte
<bl­ock­quo­te>
citation longue

Tableaux

<ta­ble>
​Tableau
<ca­pti­on>
Titre du tableau
<th­ead>
Entête du tableau
<th>
cellule de tableau
<tb­ody>
Corps du tableau
<td>
cellule de donné
<tf­oot>
Pied du tableau
<tr>
ligne de tableau

liens et ancres

Liens absolus
<a href="h­ttp­://­www.go­ogl­e.c­h">G­oogle </a> Pour aller sur un autre site
Liens relatifs
<a href="p­age­s/c­ont­act.ht­ml">Me contacter </a> Pour aller sur une autre page de son site
Ancre
<h3 id="­his­toi­re-­sui­sse­"­>Hi­stoire Suisse­</h­3> Pour placer un repère, ancre, dans une page
Liens internes
<a href="#­his­toi­re-­sui­sse­"­>Voir Histoire Suisse­</a> Pour se déplacer vers un ancre de la page
Cible du lien
L'attribut target permet de définir la cible du lien

mot

sémentique
donner un sens au titre

Balise De Mise en forme

Ne jamais utiliser HTML pour la mise en forme ou le style
Ex. <b> <i> <u> etc...
<b>
gras
<i>
italic
<u>
soulighé
Sémantique
sens des phrases
<em>
moyenne importance
<st­ron­g>
trés important
<ma­rk>
mettre en évidence un text
<de­l>
représ­enter un élément supprimer
 

autre

éditeur HTML WYSIWYG
what you see is what you get

images

<im­g>
élément image
src=""
attribut qui définit le chemin de l'image <img src="va­dor.jp­g">
alt=""
texte alternatif décrivant l'image <img src="va­dor.jp­g" alt="Photo de Dark Vador">
height­=""
hauteur de l'image en px ou %
width=­"­"
largeur de l'image en px ou %