HTML Cheatsheet
D’après [Link]
Morphologie d’une balise
<nomElement attribut="valeur" attribut2="valeur2">Contenu</nomElement>
Squelette d’un document HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Page Title</title>
<!-- Métadonnées -->
<meta name="author" content="votre identifiant étudiant" />
<meta name="description" content="description succincte" />
<link rel="stylesheet" type="text/css" href="[Link]" />
</head>
<body>
<!-- Contenu -->
</body>
</html>
Éléments pour les métadonnées
Élément Description
title Titre du document (qui est affiché dans la barre de titre du navigateur ou dans l'onglet
de la page). Cet élément ne peut contenir que du texte, les balises qu’il contiendrait
seraient ignorées.
meta Toute information de métadonnées qui ne peut pas être représentée par un des éléments
base, link, script, style ou title
• name : nom d’une métadonnée au niveau du document.
author, description, keyword
• content : valeur associée avec l’attribut name
link Définit la relation entre le document courant et une ressource externe. Cet élément peut
être utilisé pour définir un lien vers une feuille de style
Éléments pour structurer la page web
Élément Description
header Contenu introductif ou contenu aidant à la navigation. Il peut contenir des éléments de
titre, mais aussi d'autres éléments tels qu'un logo, un formulaire de recherche, etc.
nav Section d'une page ayant des liens vers d'autres pages ou des fragments de cette page.
Autrement dit, c'est une section destinée à la navigation dans un document (avec des
menus, des tables des matières, des index, etc.).
main Contenu principal de la zone, constitué de contenu directement en relation, ou qui étend
le sujet principal du document.
article composition autonome dans un document, une page, une application ou un site,
destinée à être distribuée ou réutilisée de manière indépendante.
Exemples : un message de forum, un article de magazine, de journal ou de blog, une
fiche produit, un commentaire soumis par un utilisateur…
section Section générique d'un document, par exemple un groupe de contenu thématique. Une
section commence généralement avec un titre.
aside Représente une partie d'un document dont le contenu n'a qu'un rapport indirect avec le
contenu principal du document. Fréquemment présent sous la forme d'encadrés ou de
boîtes de légende.
footer Pied de page de la section la plus proche. Contient habituellement des informations sur
l'autrice ou l'auteur de la section, les données relatives au droit d’auteur (copyright) ou
les liens vers d'autres documents en relation.
h1, h2, Les éléments <h1> à <h6> représentent six niveaux de titres dans un document, <h1>
h3, h4, est le plus important et <h6> est le moins important. Un élément de titre décrit
h5, h6 brièvement le sujet de la section qu'il introduit.
Éléments pour structurer le contenu
Bloc
Élément Description
figure Contenu autonome, éventuellement accompagné d'une légende.
img Intègre une image dans le document.
• src : lien vers l’image
• alt : texte alternatif qui décrit l’image
figcaption Légende décrivant le reste du contenu de son élément parent <figure>
Inline
Élément Description
br saut de ligne (un retour chariot) dans le texte
em utilisé afin de marquer un texte sur lequel on veut insister
strong indique que le texte a une importance particulière ou un certain sérieux voire un
caractère urgent
a crée un lien hypertexte vers des pages web, des fichiers, des adresses e-mail, des
emplacements se trouvant dans la même page, ou tout ce qu'une URL peut adresser
• href : URL vers laquelle pointe l'hyperlien
Ne pas oublier de valider sa page HTML !
[Link]