Cheatography
https://cheatography.com
Structure de base
<!DOCTYPE html> |
type du document |
<!-- Commentaire --> |
commentaire |
<html> |
Document HTML |
<head> |
Entête |
<body> |
Corps |
Entête <head>
<meta> |
informations pour le navigateur |
<style> |
<link> |
<script> |
<meta charset=""> |
encodage |
Corps <body>
<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 |
<pre> |
affiche tous les caractères |
<kbd> |
montrer un raccourci clavier |
<code> |
bout de code dans un paragraphe |
<mark> |
surligner texte |
<s> |
texte barré |
<dfn> |
définition d'un terme |
<abbr title = " "> |
abbréviation |
<time> |
représente date ou heure précise |
<address> |
élément de contact |
<sup> <sub> |
textes en exposant et indice |
<figure> |
contenu indépendant |
<figcaption> |
légende de <figure> |
Références
<cite> |
titre oeuvre |
<q> |
quote, citation courte |
<blockquote> |
citation longue |
Balise conteneur
<div> |
élement block ou inline |
<span> |
élément inline |
class = "nomDeLaClasse"
|
|
Règles de codage
Ma PAGE Web.html |
FAUX |
ma-page-web.html |
OK |
HTML entities ( char réservés html )
Balise sémantique
<em> |
emphase (moyenne importance) |
<strong> |
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 (definition list) |
<li> |
élément de liste (list item) |
<dt> |
terme à définir (definition term) |
<dd> |
Description (definition description) |
start |
"numéro" du 1er élément de la liste |
type |
type de list |
reversed |
liste inversée |
Tableaux
<table> |
Tableau |
<caption> |
Titre du tableau |
<thead> |
entête du tableau |
<tbody> |
Corps du tableau |
<tfoot> |
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="https://www.google.ch">Google</a> Pour aller sur un autre site |
liens relatifs |
<a href="pages/contact.html"> Pour aller sur une autre page de son site |
ancre |
<h3 id="histoire-suisse">Voir Histoire Suisse</h3> Pour placer un repère, ancre, dans une page |
liens internes |
<a href="#histoire-suisse">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
<img> |
élément image |
src="" |
attrribut qui définit le chemin de l'image <img src="vador.jpg"> |
alt="" |
texte alternatif décrivant l'image <img src="vador.jpg" alt="Photo de Dark Vador"> |
height="" |
hauteur de l'image en px ou % |
width="" |
largeur de l'image en px ou % |
Section html5
<header> |
entête du site ou d'une section |
<footer> |
pied du site ou d'une section |
<nav> |
éléments de navigation, menu, pagination |
<main> |
contenu principal |
<section> |
groupement thématique de contenu, généralement avec un en-tête, titre |
<article> |
Contenu autonome dans une page message sur un forum, un article de blog, ... |
<aside> |
Contenu qui indirectement lié, en marge du sujet principal, voir même sans rapport |
|
Created By
Metadata
Favourited By
Comments
No comments yet. Add yours below!
Add a Comment
Related Cheat Sheets
More Cheat Sheets by charyan