Show Menu
Cheatography

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
 

Metadata

  • Languages:
  • Published: 25th January, 2018
  • Rated: 3 out of 5 stars based on 1 ratings

Favourited By

Rudrashankar anthony

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

          Five ways to center DIV element in CSS Cheat Sheet

          More Cheat Sheets by charyan