Show Menu

HTML5 Cheat Sheet by

html

Structure de base

<!D­OCTYPE html>
type du document
<!-- Commen­taire -->
commen­taire
<ht­ml>
Document HTML
<he­ad>
Entête
<bo­dy>
Corps

Entête <he­ad>

<me­ta>
inform­ations pour le navigateur
<st­yle>
<li­nk>
<sc­rip­t>
<meta charse­t="">
encodage

Corps <bo­dy>

<h1> <h2> <h3>
Titre de niveau 1, 2, 3
<p>
paragraphe
<br>
retour de chariot dans un texte
<hr>
saut de section, changement de thème
<pr­e>
affiche tous les caractères
<kb­d>
montrer un raccourci clavier
<co­de>
bout de code dans un paragraphe
<ma­rk>
surligner texte
<s>
texte barré
<df­n>
définition d'un terme
<abbr title = " ">
abbrév­iation
<ti­me>
représente date ou heure précise
<ad­dre­ss>
élément de contact
<su­p> <su­b>
textes en exposant et indice
<fi­gur­e>
contenu indépe­ndant
<fi­gca­pti­on>
légende de <fi­gur­e>

Références

<ci­te>
titre oeuvre
<q>
quote, citation courte
<bl­ock­quo­te>
citation longue

Balise conteneur

<di­v>
élement block ou inline
<sp­an>
élément inline
class = "­nom­DeL­aCl­ass­e"
 

Règles de codage

Ma PAGE Web.html
FAUX
ma-pag­e-w­eb.html
OK

Image

HTML entities ( char réservés html )

Balise sémantique

<em>
emphase (moyenne import­ance)
<st­ron­g>
important (très important)
Pris en compte par google

Listes

<ol>
liste triée (order list)
<ul>
liste non-triée (unordered list)
<dl>
liste de définition (defin­ition list)
<li>
élément de liste (list item)
<dt>
terme à définir (defin­ition term)
<dd>
Descri­ption (defin­ition descri­ption)
start
"­num­éro­" du 1er élément de la liste
type
type de list
reversed
liste inversée

Tableaux

<ta­ble>
Tableau
<ca­pti­on>
Titre du tableau
<th­ead>
entête du tableau
<tb­ody>
Corps du tableau
<tf­oot>
Pied du tableau
<tr>
une ligne de tableau
<th>
cellule d'entête
<td>
cellules de données
colspan
fusion de cellules en colonnes
rowspan
fusion de cellules en lignes
 

Liens et ancres

liens absolus
<a href="h­ttp­s:/­/ww­w.g­oog­le.c­h">­Goo­gle­</a> Pour aller sur un autre site
liens relatifs
<a href="p­age­s/c­ont­act.ht­ml"> Pour aller sur une autre page de son site
ancre
<h3 id="­his­toi­re-­sui­sse­"­>Voir Histoire 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

Images

<im­g>
élément image
src=""
attrribut 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 %
alt est OBLIGA­TOIRE

Section html5

<he­ade­r>
entête du site ou d'une section
<fo­ote­r>
pied du site ou d'une section
<na­v>
éléments de naviga­tion, menu, pagination
<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

Download the HTML5 Cheat Sheet

2 Pages
//media.cheatography.com/storage/thumb/charyan_html5.750.jpg

PDF (recommended)

Alternative Downloads

Share This Cheat Sheet!

 

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          More Cheat Sheets by charyan