Vous êtes sur la page 1sur 16

HTML5

mmento
Rod ol p he R im e l

Syntaxe dHTML 5
HTML (HyperText Markup Language) est spcifi par le W3C (World Wide Web Consortium,
http://www.w3.org/), linitiative du WhatWG (http://www.whatwg.org/html), en tant
que living standard en volution constante, sans numro de version.

La syntaxe dHTML 5 est plus permissive quen XHTML : les lments vides ne ncessitent pas dtre ferms (ex : <img src="image.jpg">), la casse est variable
et les guillemets facultatifs (<INPUT type=text>), et certaines balises fermantes
sont optionnelles. Les commentaires prsents dans le code source ne sont pas affichs
ni interprts par le navigateur (<!-- Ceci est un commentaire -->).
Gardez les bonnes habitudes XHTML
Les conventions dcriture XHTML sont plus constantes et claires. En cas de nombreux
lments rpts (surtout des blocs <div>), prenez soin dindiquer par un commentaire
la fin de chaque bloc important.
BONNE PRATIQUE

HTML5 dfinit des familles dlments plus varies que les simples types bloc et en
ligne : les mta-informations, les lments de flux, les lments de phras, le contenu
embarqu et le contenu interactif.

Document avec en-tte complet :


des balises allges

<html>
manifest

<head>
<body>
<title>

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Ma page</title>
</head>
<body>
...
</body>
</html>

La racine. Contient un lment <head> suivi dun lment <body>. Prcisez la langue du document avec lattribut lang.
En-tte du document. Contient les mta-informations interprtes par le
navigateur sans apparatre dans le corps du document : <title>, <meta>,
<link>, <style>, <script>.
Corps du document. Contient toutes les balises HTML de contenu : texte,
blocs, images, titres, mdias, formulaires, etc.
Titre du document. Affich par le navigateur et index par les moteurs
de recherche. Contenu par <head>.
<title>Les kiwis travers les ges</title>
<title>
</title>

<meta>
name,
value,
charset,
http-equiv

<style>
type,
media,
scoped

<script>
type,
src,
defer,
async,
async
charset

Mta-informations. Apporte des informations (mots-cls, description, auteur) dans len-tte <head> que les agents utilisateurs vont pouvoir exploiter.
<meta
<meta
<meta
<meta

charset="utf-8">
name="description" value="Description du document">
name="keywords" value="mots, cls, numrs">
http-equiv="refresh" content="10; URL=hopla.html">

Autres valeurs possibles de name : author, generator, application-name.


Styles embarqus dans le document. Dclarations CSS appliquer
au document HTML.
<style>
h1 {
color:red;
}
</style>

Lattribut scoped indique que les styles ne sappliquent quau parent qui
contient cette balise (peu pris en charge en pratique, mieux vaut toujours
placer <style> dans <head>).
Script. Contient un script (JavaScript) ou fait rfrence un fichier externe
avec lattribut src.
<script src="script.js"></script>

Lattribut async indique une excution asynchrone, ds que le script a t


charg.

<noscript> Texte

alternatif aux scripts. Lorsque les scripts sont dsactivs sur le


navigateur. Ignor par les navigateurs dont les scripts sont activs.
<noscript>Votre navigateur ne supporte pas les scripts...</noscript>
<noscript>
</noscript>

<base>
href,
target

Adresse de base. Lattribut href indique une URL absolue de base


partir de laquelle calculer les liens du document, et target un contexte de
navigation (nom, _blank, _self, _parent ou _top).
<base href="http://www.alsacreations.com/tutoriels/" target="_blank">

Syntaxe dHTML 5
AVERTISSEMENT Le niveau de prise en charge de HTML, en volution constante, varie
dun navigateur lautre. Consultez des tableaux de prise en charge jour, tels que sur
www.caniuse.com, lun des plus complets. Outre ses balises, HTML5 offre de nombreuses
API pilotables avec JavaScript pour crer des fonctionnalits avances : Golocalisation,
Audio et Vido, Web Storage, Canvas, Microdata, Offline, Server-Sent Events, Web
Workers, Web Sockets, IndexedDB, Drag&Drop, FullScreen, etc.
CONVENTIONS

le pictogramme

Les nouveaux lments apparus avec HTML5 sont signals par


; les nouveaux attributs sont signals en noir.

Des sections pour structurer


le document
Le choix du balisage de section est laiss la libre apprciation du dveloppeur web.

<article>
<article

Article. Portion de contenu indpendante, se suffisant en termes de comprhension (pouvant tre syndique dans un flux RSS). Exemples : article de
presse, fiche cinma, rponse de forum, commentaire darticle (qui est un
<article> imbriqu dans <article>).
<article>
<header>
<h1>La Vitamine C est tendance</h1>
<time datetime="2012-04-01" pubdate>Le 1er avril 2012</time>
</header>
<p>...</p>
<footer>Post par Georges</footer>
</article>

<aside>
<aside

Apart. Contenu indirectement li au contenu principal, non ncessaire sa


comprhension : dfinitions, digressions, sidebar, complments...
<article>
<h1>La vitamine C est tendance</h1>
<p>...</p>
<aside>
<h2>Quest-ce quune vitamine ?</h2>
<p>Les explications...</p>
</aside>
<p>...</p>
</article>

<section>
<section

<nav>
<nav

Section. lment gnrique pour une section de contenu ou dapplication


web, utilis dfaut dun autre lment de section plus smantique tel que
article, nav, header, footer, aside. ne pas confondre avec
<div> qui na aucune valeur smantique. En gnral, <section> contient
un titre qui la dfinit.
Navigation. Regroupe la slection des principaux liens pour naviguer dans
le site, lapplication ou le document.
<nav>
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="/inscription.html">Inscription</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

<header>
<header

En-tte. Sapplique au document entier, mais aussi toute section au sens


large, <article> y compris.
...
<body>
<header>
<img src="logo.png" alt="...">
<h1>Titre du document</h1>
</header>
<p>...</p>
</body>

<footer>
<footer

Pied. Sapplique au document entier, mais aussi toute section au sens


large, <article> y compris.
<article>
...
<footer>
<p>Tags : HTML5, audio, tutoriel, media</p>
</footer>
</article>

Hirarchisation du texte et sparations


<h1>
<h2>
<h3>
<h4>
<h5>
<h6>

Hirarchie de titres. Six niveaux de titres pour hirarchiser le contenu.


Bien les employer selon leur niveau, et non selon leur aspect ou taille par
dfaut. Il revient aux CSS den dfinir le rendu.

<hgroup>
<hgroup

Groupe de titres. Regroupe un ensemble dlments <h1> <h6> quand


len-tte est constitu de plusieurs niveaux (sous-titres, lignes additionnelles,
mentions), pour reprsenter len-tte dune section.

<h1>
<h1>Les
aliments</h1>
</h1>
<h2>Les lgumes</h2>
<h2>
</h2>
<h3>La patate</h3>
<h3>
</h3>
<h3>La tomate</h3>
<h3>
</h3>
<h2>Les fruits</h2>
<h2>
</h2>
<h3>Le kiwi</h3>
<h3>
</h3>
<h3>La
<h3>
banane</h3>
</h3>
<h3>La
<h3>
mangue</h3>
</h3>

<article>
<hgroup>
<h2>Titre principal</h2>
<h3>Sous-titre</h3>
</hgroup>
</article>

<p>

Paragraphe. Contient un paragraphe de texte, ventuellement accompagn dautres balises en ligne plus smantiques (des images, vidos, audio),
mais pas dautre lment de type bloc (y compris <p> lui-mme).

<wbr>
<wbr

Indication dopportunit de csure de mot. Indique au navigateur


quil est plus opportun de scinder un mot lemplacement de cet lment,
sil y a besoin, notamment pour viter une csure automatique pouvant tre
mal interprte.
Saut de ligne. Force un saut de ligne : laffichage se poursuit en dbut
de ligne suivante.

<p>Le gteau est un mensonge.</p>


<p>
</p>

<br>

Afin dviter lusage abusif de <br> pour crer de


lespacement vertical, il est prfrable dutiliser les proprits CSS
(margin, padding) pour introduire des marges sur les conteneurs et les
paragraphes.
Sparation. lment vide qui marque une sparation dans le contenu,
typiquement au niveau des paragraphes, usuellement reprsente par une
barre horizontale.
BONNE PRATIQUE

<hr>

Conteneurs gnriques
BONNE PRATIQUE vitez dabuser des conteneurs gnriques. Privilgiez les lments plus
discriminants qui qualifient smantiquement (notamment les sections). Nutilisez <div>
quen dernier recours, si aucun autre lment plus appropri na t trouv.

<div>
<span>

Conteneur de type bloc. lment neutre permettant de regrouper dautres


lments de tous types (bloc ou en ligne).
Conteneur de type en ligne. quivalent en ligne de llment bloc
<div>, il na pas de valeur smantique propre, mais peut tre employ
comme conteneur neutre.

Balises en ligne sur le statut du contenu


<ins>
cite,
datetime

Contenu ajout. Marque une portion de contenu insre dans le


document.
Lattribut cite peut tre utilis pour faire rfrence une adresse externe
expliquant la raison du changement. Lattribut datetime indique la date
du changement.
<p>Jaime les kiwis <ins datetime="2012-04-01">
datetime="2012-04-01">mais aussi les cerises
</ins> et les bananes !</p>

<del>
cite,
datetime

<s>

Contenu supprim. Marque une portion de contenu amene tre supprime du document (communment affiche par du texte barr). Les attributs
cite et datetime fonctionnent de faon semblable <ins>.
Contenu obsolte. Signifie que le contenu nest plus exact ou pertinent
dans le contexte ; usuellement reprsent par un texte barr.
<p>Ce mmento concerne la version <s>
<s>4</s>
</s> 5 de HTML.</p>

Blocs smantiques
<blockquote>
cite

Bloc de citation. lment destin regrouper plusieurs blocs (<p>, <div>,


etc.) et du texte constituant une citation. Lattribut cite optionnel peut pointer
vers la source de la citation.
<blockquote>
<p>tre ou ne pas tre.</p>
</blockquote>

<address> Informations de contact. Cet lment est prvu pour pouvoir contacter

lauteur ou lditeur du contenu (document, site, article, etc.), par exemple


avec un e-mail.
<address>
<address><a
href="mailto:info@email.com">Contacter le webmestre</a>
</address>

<pre>
<code>

Si cet lment est appliqu <body>, il constitue une information de contact


pour lensemble du document. Sil est plac dans une section, il est relatif
uniquement cette dernire.
Bloc de code prformat. Destin tre affich avec une police
chasse fixe (caractres de mme largeur), idalement pour exposer des
extraits de code source.
Extrait de code informatique. Le texte est rendu dans une police
chasse fixe.
<p>Llment <code>
<code>img</code>
</code> est une image.</p>

<kbd>

Entre utilisateur. Entre laide du clavier ou dun autre moyen tel


que la reconnaissance vocale. Pour marquer une touche prcise, doubler
cet lment.
<p>Entrez <kbd>
<kbd>www.blup.fr</kbd>
</kbd> dans votre navigateur.</p>
<p>Appuyez sur <kbd><kbd>
<kbd><kbd>Shift</kbd></kbd>
</kbd></kbd>.</p>

<var>

Variable de code. Marque une variable extraite dun code source ou


dun algorithme.

<samp>

Extrait de la sortie dun programme. Dlimite un rsultat renvoy


par un programme ; habituellement rendu avec une police chasse fixe.

<p>Il faut additionner <var>


<var>x</var>
</var> et <var>
<var>y</var>
</var>.</p>

<p>Le serveur renvoie <samp>


<samp>404 Page Not Found</samp>
</samp> ?
Inutile de persvrer.</p>

Balises en ligne smantiques


<time>
<time
datetime
datetime,
pubdate

Date et heure. Balise attribuant une signification standardise une date


(et heure si ncessaire), comprhensible par un robot ou un programme,
via lattribut datetime. La prsence de lattribut pubdate signifie que la
valeur de temps vaut pour la date de publication du plus proche anctre
<article>.
<article>
<p>Publi le <time datetime="2012-04-01T13:37:00Z">1er avril 2012
</time></p>
</time>
</article>

<abbr>
title

Abrviation. Dsigne une abrviation au sens large (par exemple


HTML , CIA , SNCF , etc.), la forme developpe tant donne par
lattribut title qui en dcrit la signification. Lattribut lang indique la langue
dans laquelle labrviation doit tre lue. Les navigateurs distinguent les abrviations en les soulignant et en affichant en infobulle le contenu de title.
<abbr title="HyperText Markup Language" lang="en">
lang="en">HTML</abbr>
</abbr>

<cite>

Mention dune uvre. Le titre dune uvre (livre, musique, mission,


film, chanson, thtre, exposition, opra, sculpture, peinture, etc.) cit dans
un texte doit tre balis par <cite>.
<p><cite>
<cite>La Bohme</cite>
</cite> est un merveilleux opra de Giacomo
Puccini.</p>

<q>
cite

<dfn>
title

Courte citation. Texte cit, au sein dun contenu. Contenu autoris : phrase.
<p>Galile a dit <quote>
<quote>Toute la nature nest que mathmatique
</quote>.</p>
</quote>

Lattribut cite vise faire rfrence un document externe contenant la


source complte de la citation.
Dfinition. Le terme entour par cet lment est accompagn dune description ou dune explication, contenue dans son plus proche anctre.
<p>Le <dfn>
<dfn>spam</dfn>
</dfn> est une communication lectronique
non sollicite.</p>

Lattribut title, ou un unique lment enfant <abbr> quip de title


peuvent remplacer le terme exact dfinir.

Mise en forme de texte


<mark>
<mark
<u>
<b>
<i>
<strong>

Mise en valeur (surlign). Attire lattention sur un passage de texte


particulirement pertinent au regard dun certain contexte. Les moteurs de
recherche lutilisent pour surligner le terme recherch (usuellement surlign
par le navigateur).
Soulign. Souligne un texte sans lui confrer dimportance (<strong>) ni
demphase (<em>). viter sauf cas particulier (mise en vidence derreur
synaxique ou otrhographique, noms propres, etc.).
Mise en forme (gras). Portion de texte mise en forme dune manire
particulire (par exemple, un mot-cl ou un nom de marque), sans dsir de
confrer dimportance (<strong>) ni demphase (<em>), habituellement
mis en forme en gras.
Mise en forme (italique). Portion de texte mise en forme dune manire
particulire (par exemple, un terme technique, une pense, un nom de
navire), sans dsir de confrer dimportance (<strong>) ni demphase
(<em>), habituellement mis en forme en italique.
Forte mise en exergue. Attribue une forte importance au contenu. Par
habitude, les navigateurs affichent le texte ainsi balis en gras.
<p>Faites <strong>
<strong>trs</strong>
</strong> attention !</p>

<em>

Emphase. Ajoute un effet demphase au texte, usuellement reprsent par


de litalique ( ne pas confondre avec <i>).

<small>

Petits caractres. Peut reprsenter une mention discrte, en fin de document ou de section, par exemple faisant rfrence des mentions lgales
ou des conditions de vente. ne pas utiliser dans le seul but de rduire la
taille de la police par dfaut.
Indice. Affiche le texte en indice, notamment pour les formules scientifiques.

<p>JavaScript est <em>


<em>vraiment</em>
</em> surpuissant.</p>

<sub>

<abbr title="Eau">H<sub>
<sub>2</sub>
</sub>O</abbr>

<sup>

Exposant. Affiche le texte en exposant, notamment pour les formules


mathmatiques.

<bdo>
<bdo

Modification du sens dcriture. Indique le sens daffichage du texte,


de gauche droite (attribut dir="ltr") ou de droite gauche (attribut
dir="rtl").
Isolation du sens dcriture. Balise des passages de texte susceptibles
de comprendre une criture en sens inverse du contenu principal.

<p>ax<sup>
<sup>2</sup>
</sup>+bx+c</p>

dir

<bdi>
<bdi

Listes

Listes de dfinitions

<dl>
<dt>
<dd>

Liste de dfinitions. Associe un terme dfinir (<dt>) et des dfinitions (<dd>) sy rapportant. Contenu autoris : succession de <dt> et <dd>.
Terme/titre de dfinition. Enfant dune liste <dl>, balisant le terme
dfinir. Contenu autoris : contenus textuels y compris des balises de niveau
intra-paragraphe charges de contenu (phrasing content).
Contenu de la dfinition. Enfant dune liste <dl>, recueillant la dfinition
du terme <dt> qui le prcde immdiatement.
<dl>
<dt>Le
<dd>Un
<dt>Le
<dd>Un
</dl>

kiwi</dt>
fruit mais aussi un animal</dd>
litchi</dt>
excellent fruit exotique</dd>

Listes classiques

<ul>

Liste non ordonne. Dsigne une liste dlments non ordonns. Contenu
autoris : <li>.
<ul>
<li>premier lment</li>
<li>deuxime lment
<ul>
<li>premier sous-lment</li>
<li>second sous-lment</li>
</ul>
</li>
<li>troisime lment</li>
</ul>

Listes
<ol>
start,
reversed,
reversed
type

<li>

Liste ordonne. Structure une liste dlments dont lordre importe, pouvant
tre numrote. Contenu autoris : <li>.
Lattribut start dfinit lindex partir duquel commencer la numrotation.
Lattribut reversed inverse lordre de la numrotation, et lattribut type en
indique le type : 1 , a , A , i , I .
lment de liste. Dsigne un lment contenu dans une liste. Peut contenir
une sous-liste <ul> ou <ol>, et ainsi de suite, ou tout autre lment de flux.
<p>Classement de la comptition :</p>
<ol>
<li>Philippe Dukiwi</li>
<li>Rodolphe Delabanane</li>
<li>Raphal Quetsche</li>
</ol>

Embarquer du multimdia
<figure>
<figure
<figcaption>
caption

Unit de contenu, avec lgende optionnelle <figcaption>, qui regroupe habituellement une ou plusieurs illustrations, pouvant tre mentionnes
depuis le contenu principal et dplaces lextrieur du flux, sans affecter
la signification du document.
documen
Lgende de figure. Fonctionne de pair avec <figure> qui est son
unique parent autoris, pour attribuer une lgende lensemble du bloc,
quil contienne une ou plusieurs illustrations.
<p>[...] le chocolat ne pourrait exister sans le cacaoyer.</p>
<figure>
<img src="feves.jpg" alt="Fves de cacao">
<figcaption>La rcolte des fves prcde la torrfaction, Brsil,
<figcaption>
photo de <a href="http://www...">John McGeek</a></figcaption>
</figcaption>
</figure>

<details>
<details
open

<summary>
mary

Informations ou contrles additionnels. Reprsente un ensemble


de contenus ou de contrles qui nest pas prsent par dfaut lutilisateur
et qui peut tre dploy sur demande, usuellement par un clic sur lintitul
dfini avec <summary>. Lattribut open dfinit ltat (dploy) par dfaut.
Rsum, lgende ou intitul. Fournit un intitul, indiqu lutilisateur,
pour son parent <details>. Cet intitul doit rsumer le reste du contenu
qui peut tre dploy.
<details>
<summary>Statistiques du tlchargement</summary>
<summary>
</summary>
<p>...</p>
</details>

Images

Les images prsentes dans le document HTML (hors images de fond dfinies avec CSS)
sont considrer comme des lments part entire devant apporter des informations
lutilisateur. Les formats PNG, JPEG, GIF sont dsormais universellement reconnus.

<img>
src,
alt,
height,
width,
usemap,
ismap

<map>
name

Image. Insre une image de contenu dans le document. Lattribut src


spcifie ladresse vers le fichier image. Lattribut alt indique un texte alternatif limage. Les dimensions sont dfinies en pixels par width (largeur)
et height (hauteur). Lattribut ismap envoie les coordonnes cliques
au serveur.
<p><img
<img src="kiwis.jpg" alt="Pole de kiwis" width="300"
height="100">La pole de kiwis est une spcialit...</p>
height="100">

Carte cliquable pour image. Catalogue les zones sensibles <area>


dune image utilise en guise dimage ractive. Si lattribut id est prsent,
il doit avoir la mme valeur que name, qui permet de lier <map> et <img>
avec son attribut usemap.

alt ou title ?
Lattribut alt sert dalternative textuelle aux lments graphiques. Son contenu est utilis par
les navigateurs non graphiques ou les lecteurs vocaux pour les malvoyants pour qui cette
information est essentielle. Il est rgulirement utilis contre-emploi, pour crer une infobulle
au survol de la souris sur un lment. Or, cette fonction est assigne lattribut title.
Utilisez un attribut alt="" vide pour les images qui sont purement dcoratives.
BONNE PRATIQUE

Embarquer du multimdia
<area>
shape,
coords,
rel,
rel
media,
media
hreflang,
hreflang
type,
href,
target,
alt

Zone cliquable. Zone sensible dimage ractive <map>. Sa forme est


dfinie par lattribut shape qui prend les valeurs circle (cercle), poly
(polygone), rect (rectangle) et default (toute limage), ainsi que par les
coordonnes de la forme choisie avec lattribut coords.
<img src="carte.png" usemap=
usemap="#atlas
#atlas">
<map name="atlas
name= atlas">
<area shape="rect" coords="0,0,100,90" href="amerique-nord.html"
alt="Amrique du Nord">
<area shape="circle" coords="200,75,50" href="oceanie.html"
alt="Ocanie">
</map>

Audio et vido

Nouveaux venus avec HTML5, les lments de mdia permettent dagrmenter un document ou une application avec sons et vidos, sans utiliser dextension propritaire...
Cependant, chaque navigateur reconnat des formats diffrents (parmi MP3, Ogg
Vorbis, WAV, AAC pour laudio, et MP4/H.264, WebM, Ogg Theora pour la vido).

<audio>
<audio

Audio. Son ou lment audio, interprt dans le navigateur, dont la source


est dfinie par lattribut src, ou par une succession denfants <source>
(voir plus bas) proposant des formats alternatifs.
<audio src="musique.mp3
src= musique.mp3" controls>
Ce navigateur ne supporte pas HTML5 Audio
</audio>

<video>
<video

Vido. Vido affiche et interprte dans le navigateur, dont la source est


dfinie par lattribut src, ou par une succession denfants <source> (voir
plus bas) proposant des formats alternatifs.
<video src="film.mp4
src= film.mp4" controls poster="apercu.jpg
poster= apercu.jpg"
" width="640"
height="480">
height="480"
Ce navigateur ne supporte pas HTML5 Video
</video>

<source>
<source

Source alternative audio ou vido. Plac dans <audio> ou


<video>, vient en remplacement de lattribut src pour prciser plusieurs
sources possibles, dont le format est indiqu par type, ladresse par src et
le mdia destination par media.
<video controls width="640" height="480">
<source src="film.mp4
src= film.mp4" type=
type="video/mp4
video/mp4">
<source src="film.webm
src= film.webm" type=
type="video/webm
video/webm">
<source src="film.ogv
src= film.ogv" type=
type="video/ogg
video/ogg">
<source src="film-mobile.mp4
src= film-mobile.mp4" type=
type="video/mp4
video/mp4" media=
media="handheld
handheld">
</video>

<track>
<track
kind
kind,
src,
src
srclang,
srclang
label,
label
default

Piste de texte. Lie un fichier de piste texte pour un lment mdia. Lattribut kind indique le type de piste : subtitles (sous-titres), captions
(lgendes), descriptions (audiodescription), chapters (chapitrage),
metadata (mta-informations). Le format prconis est le WebVTT. Lattribut
label dfinit ltiquette prsente lutilisateur, et srclang la langue du
fichier source.

Attributs spcifiques laudio et la vido

autoplay

Lecture automatique. Active la lecture ds le chargement de la


page.

preload

Prchargement. Prcharge le fichier mdia, ds le chargement


de la page.

controls

Affichage des contrles. La prsence de lattribut controls


affiche les contrles natifs du navigateur (lancement de la lecture, arrt,
progression, volume, etc.).

loop
poster

Lecture en boucle. Active la lecture en boucle.

width height
width,
mediagroup

Dimensions. Spcifie les dimensions daffichage de la zone vido.

muted
src

Silencieux. Active le mode silencieux (volume nul).

Aperu par dfaut. Indique ladresse de limage daperu charger


pour occuper la zone daffichage lorsque la vido nest pas joue.
Groupe dlments audio et vido. Permet de regrouper diffrents lments mdia (audio, vido), par exemple dans une liste de
lecture gre par JavaScript.
Source. Indique ladresse de la source du mdia (si <source>
nest pas utilis).

Autres contenus embarqus :


canvas, iframe et object
<canvas>
<canvas
width,
height

Zone de dessin 2D ou 3D. Surface de dessin transparente, manipulable


avec JavaScript. Pour la syntaxe complte, se rfrer aux ouvrages dtaillant
toutes les fonctions de dessin.
<canvas width="640
width= 640" height=
height="480
480"
" id="dessin">Texte
id="dessin"
alternatif</canvas>
</canvas>
<script>
var canvas = document.getElementById('dessin');
var ctx = canvas.getContext('2d');
ctx.fillRect(0,0,50,50);
</script>

<iframe>
src,
srcdoc,
name,
width,
height,
sandbox,
sandbox
seamless

Cadre (contexte) de navigation imbriqu. Embarque dans le document une navigation sur un autre document externe, ladresse src, en
allouant des dimensions dfinies par width (largeur) et height (hauteur).
Lattribut seamless dit au navigateur de rendre le contenu comme si le fichier
faisait partie intgrante du document dans lequel il est appel (par exemple,
pour lapplication des styles CSS).
Lattribut sandbox prcise les rgles de scurit autoriser : allow-sameorigin, allow-forms, allow-scripts, allow-top-navigation.
Sa seule prsence sans valeur dsactive toutes les autorisations.
<iframe src="pub.html" width="300" height="150">
</iframe>

<object>
data,
type,
name,
width,
height,
form,
usemap

<param>

Objet externe. Permet de faire appel un objet externe, souvent interprt


via une extension (plug-in), par exemple pour Flash ou Java. Le type MIME de
lobjet est prcis par lattribut type et les dimensions par width (largeur)
et height (hauteur).
<object type=
type="application/x-java-applet
application/x-java-applet">
<param name="code" value="MaClasse">
<param name="archive" value="Applet.jar" />
<p>Texte alternatif : Java nest pas install.</p>
</object>

Paramtre dobjet. Dfinit les paramtres dexcution pour <object>.


<object type="application/x-shockwave-flash">
<param name="movie
name= movie" value=
value="anim.swf
anim.swf">
</object>

<embed>
src,
type,
height,
width

Intgration de contenu externe. Officialis, cet lment (vide) est


proche d<object> pour embarquer du contenu excuter avec des extensions ; tous ses paramtres sont dfinis cependant par des attributs libres
et non par des enfants <param>.
<embed src="animation.swf" quality="high">

Menus et commandes
<menu>
<menu
type,
label

Menu. Dfinit un menu contextuel (type="context") ou une barre doutils


(type="toolbar"), regroupant des commandes <command>, principalement destination des applications web.
<menu type="toolbar
type= toolbar">
<li>
<menu label="Fichier">
<command onclick="save()">Sauver</command>
<command onclick="quit()">Quitter</command>
</menu>
</li>
<li>
<menu label="Edition">
...
</menu>
</li>
</menu>

Dans le premier cas, le menu contextuel est li un autre lment HTML


via lattribut contextmenu.
<img contextmenu="menuctx">
<menu type="context
type= context" id=
id="menuctx
menuctx">
<command label="Copier" onclick="copier()">
<command label="Supprimer" onclick="suppr()">
</menu>

<command>
mand

Commande. Commande de menu, dclenchant habituellement un script.


Lattribut type peut prendre la valeur command (par dfaut), radio et
type,label, checkbox.
icon,
disabled

Tableaux
Les tableaux de donnes sont conus pour structurer des informations en lignes et en
colonnes. Ils ne faut pas les utiliser pour la mise en page du document, qui doit tre
assure par des CSS.
Llment <table> nest pas un outil de mise en page !
Rappelons que les tableaux servent structurer linformation, sous la forme de lignes
et de colonnes. La mise en forme doit toujours tre dlgue une feuille de style CSS.
BONNE PRATIQUE

<table>

Tableau de donnes. Structure un tableau de donnes, paul par les lments <tr> (ligne du tableau), <th> (cellule den-tte) et <td> (cellule). Les
lments complmentaires sont <caption> (lgende du tableau), <thead>
(groupe de cellules den-tte), <tbody> (groupe de cellules de corps) et
<tfoot> (groupe de cellules de pied). Pour des raisons daccessibilit,
lattribut <summary> (rsum) est conseill.
<table summary=
summary="Rsum
Rsum du contenu du tableau
tableau">
<caption>Lgende afficher</caption>
<thead>
<tr>
<th>En-tte de colonne</th>
...
</tr>
</thead>
<tfoot>
<tr>
<th>Pied de colonne</th>
...
</tr>
</tfoot>
<tbody>
<tr>
<th>Cellule den-tte</th>
<td>Cellule</td>
...
</tr>
</tbody>
</table>

<caption> Lgende dun tableau de donnes. Lgende associe un tableau de


<tr>
<th>
scope,
colspan,
rowspan,
headers

<td>
colspan,
rowspan,
headers

<thead>
<tbody>
<tfoot>
<colgroup>
span

<col>
span

donnes, qui doit se situer immdiatement aprs la balise ouvrante <table>.


Range/ligne de tableau. Regroupe les cellules (<td> ou <th>) dune
mme ligne dans un tableau.
Cellule den-tte. Dsigne une cellule den-tte (intitul de colonne ou
de ligne) dun tableau de donnes. Les attributs colspan et rowspan
dfinissent respectivement le nombre de cellules fusionnes en colonnes et en
lignes. Lattribut scope spcifie sur quelles cellules sapplique len-tte (row :
ligne, col : colonne, rowgroup, colgroup). Lattribut headers indique
une liste didentifiants pour lesquels sapplique len-tte.
Cellule de tableau. Regroupe le contenu dune cellule de tableau. Les
attributs colspan et rowspan dfinissent respectivement le nombre de
cellules fusionnes en colonnes et en lignes.

En-tte de tableau. Regroupe les cellules den-tte dun tableau de


donnes. Les lments <thead> et <tfoot> doivent tre dclars avant
le(s) <tbody>.
Corps de tableau. Regroupe les cellules du corps dun tableau de
donnes.
Pied de tableau. Regroupe les cellules du pied dun tableau de donnes.
Groupe de colonnes. Regroupe une ou plusieurs colonnes dfinies par
<col>, avant tout lment <thead>, <tbody>, <tfoot> et <tr>. Lattribut
span dfinit le nombre de colonnes sur lesquelles cet lment doit stendre.
Colonne(s) dun groupe. Permet dappliquer des proprits communes
une colonne dans un tableau de donnes, par exemple des styles CSS.
<table>
<colgroup>
<col span="2"
span=
style="color:red
style= color:red" />
<col style="background:green
style= background:green" />
</colgroup>
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
<td>Cellule 3</td>
</tr>
</table>

Liens
Lessence mme du Web : le lien permet de naviguer dune page lautre.

<a>
href,
target,
rel,
hreflang,
media,
media
type

Lien hypertexte. Cre un lien hypertexte permettant de naviguer au sein


de la page ou vers une autre page HTML. Ses attributs courants sont href
(destination du lien), id (pour crer une ancre) et hreflang (langue de la
destination). On peut prciser media (type de mdia pour lequel le lien est
prvu) et type (type MIME de la ressource destination).
<a href="http://html5.blup.fr/
href= http://html5.blup.fr/">Dcouvrir HTML5</a>
</a>

Les lments contenus deviennent cliquables (par exemple, des images). Avec
HTML5, il est autoris dy placer des lments de type bloc.
<a href="http://html5.blup.fr/
href= http://html5.blup.fr/" title=
title="Dcouvrir
Dcouvrir HTML5
HTML5">
<img src="go.png" alt=""></a>
</a>

<link>
href,
rel,
hreflang,
media,
media
type,
sizes

Les relations existant en complment de <link> sont bookmark, nofollow, noreferrer, tag.
Relation externe. Dclare un lien vers des ressources externes, couramment employ pour lier une feuille de style CSS au document HTML avec le
type stylesheet ou une icne avec le type icon.
<link rel=
rel="stylesheet
stylesheet" type=
type="text/css
text/css" href=
href="styles.css
styles.css"
media="screen
media= screen">

Dautres types de relations : alternate, author, help, license, next,


prefetch, prev, search.

Les types MIME


Les types MIME prcisent, sous forme dun type et dun sous-type, les formats de fichiers
rencontrs sur le Web. Ils sont envoys par le serveur web au navigateur pour lui indiquer
comment interprter le contenu qui lui est dlivr. Exemples : text/html, text/
javascript, image/png, application/xml, video/mp4.
RAPPEL

Formulaires
<form>
action,
method,
enctype,
novalidate,
autocomplete

<fieldset>

Formulaire. Regroupe un ensemble de champs interactifs permettant


de recueillir des informations auprs de lutilisateur. Le formulaire est
gnralement valid laide dun lment <input type="submit">.
<form> ne peut contenir directement que des lments de type bloc et ne
peut pas contenir dautres lments <form>.
<form action=
action="...
..." method="post
method= post">
<label for="nom">Nom</label>
<input name="nom" id="nom" type="text">
<input value="envoyer" name="envoi" type="submit" />
</form>

Lattribut novalidate indique que le contenu du formulaire ne doit pas


tre valid (avec pattern, required, et types email, url, etc.) avant
la soumission.
Groupe de champs. Regroupe des informations de mme thmatique
dans un formulaire pour en faciliter la comprhension, et doit contenir
directement un lment <legend>.
<form action="..." method="post">
<fieldset>
<legend>Informations personnelles</legend>
<legend>
</legend>
<label for="nom">Nom</label>
<input id="nom" name="nom" type="text">
<label for="prenom">Prnom</label>
<input id="prenom" name="prenom" type="text">
</fieldset>
</form>

<legend>

Lgende dun regroupement de champs. Ajoute une lgende


un groupe <fieldset>, auquel elle est obligatoirement associe.
La lgende amliore laccessibilit quand llment <fieldset> est restitu
de manire non visuelle.

Champs de formulaires

<label>

tiquette. Associe une tiquette un champ de formulaire, o lattribut for


se rapportera lattribut id du champ en question. Llment <label> est
utile pour aider la comprhension du formulaire et accrot laccessibilit.
<label for=
for="nom
nom">Votre nom</label>
id="nom
nom" name="nom_utilisateur">
<input id=

for

Formulaires
<input>
type,
name,
value,
accept,
accept
list,
list
pattern,
pattern
required,
required
placeholder,
holder
readonly...
readonly

Champ dentre. Un lment interactif (champ) dans un formulaire, dfini


par son type : text (texte), password (mot de passe), checkbox (case
cocher multiple), radio (case cocher unique), submit (validation), reset
(effacement des champs), file (fichier), hidden (champ masqu), image
(soumission avec une image), button (bouton gnrique).
<input name="nom" type="text" value="">
<input type="submit" value="Valider">
<input type="radio" checked="checked">

Avec HTML5, les nouveaux types : datetime (date et heure), datetimelocal (localises avec fuseau horaire), date (date), month (mois), time
(heure), week (semaine), number (valeur numrique), range (intervalle),
email (e-mail), url (adresse), search (recherche), tel (numro tlphone),
color (code couleur).
Avec type="file", lattribut accept prcise les types MIME des fichiers
accepts.
<input type="file" accept="image/*">

<button>

Bouton. Cre un bouton tiquet dans un formulaire. En cliquant sur ce


bouton, une action particulire peut tre dclenche avec JavaScript.

<textarea>

Zone dentre texte multiligne. Une zone de texte de plusieurs lignes


et de plusieurs colonnes pour la saisie de textes de longueurs variables.

<button>Cliquez-moi</button>
<button>
</button>

rows,
cols,
wrap

<select>
multiple

<textarea cols=
cols="60
60" rows=
rows="10
10">Le texte</textarea>
</textarea>

Lattribut wrap accepte les valeurs hard (insertion de retours la ligne dans
la valeur soumise pour ne pas excder la valeur de cols) et soft (pas de
retour la ligne).
Liste de choix. Renferme une srie doptions qui seront prsentes
lutilisateur dans une liste droulante. Ne peut contenir directement que des
lments <optgroup> ou <option>.
<select name=
name="fruits
fruits">
<option>fruits du march</option>
<option>fruits exotiques</option>
<option>fruits avaris</option>
</select>

<option>
label,
value,
selected,
disabled

<optgroup>

Option de liste de choix. Choix offert dans une liste <select> (ou
<optgroup>) ou <datalist>. Lattribut label est ltiquette prsente
lutilisateur, et lattribut value porte la valeur transmise la soumission
du formulaire.
Groupe doptions. Regroupe des options <option> sous une mme
tiquette dfinie par lattribut obligatoire label.

label,
disabled

Autres

<output>
<output
name,
for,
form

Rsultat de calcul. Balise un contenu, rsultat dune opration dans un formulaire, (par exemple, une somme calcule par JavaScript dans un panier de
commande). Lattribut form dfinit quel formulaire se rapporte cette sortie
(si <output> est plac en dehors de <form>). Lattribut for reoit une liste
did, spars par des espaces, des lments entrant en jeu pour le calcul.
<form onsubmit="return false;" oninput="out.value = parseInt
(a.value)
+ parseInt(b.value);">
<input name="a" id="a" type="number"> +
<input name="b" id="b" type="number"> =
<output name=
name="out
out" for=
for="a
a b
b"></output>
></output>
</form>

<progress>
gress
value
value,
max

<meter>
<meter

<progress max=
max="100
100" value=
value="30
30" id=
id="pg
pg"><span>30</span>%</progress>
</progress>
<script>document.getElementById('pg').value=50;</script>

Jauge. Reprsente une jauge, refltant un tat mesur, avec un intervalle


connu (un minimum min et un maximum max, et optionnellement, des valeurs
basses low, haute high et optimale optimum).
Billets vendus : <meter min=
min="0" max=
max="50
50" value=
value="40
40">40 sur 50
</meter>

min
min,
max,
max
low,
low
high,
high
optimum,
optimum
value

Progression. Reprsente une barre de progression (par exemple, pour


une tche ncessitant du temps, telle quun envoi de fichier), manipulable
avec JavaScript.

Formulaires
<datalist>
<datalist

Liste de suggestions. Regroupe un ensemble de zro ou plusieurs


lments <option> qui reprsentent des choix prdfinis pour dautres
contrles dentre, par exemple un champ de texte ou de recherche, y faisant
rfrence grce lattribut list.
<input list=
list="choix
choix" name="pays">
<datalist id="choix
id= choix">
<option label="France" value="FR">
<option label="Suisse" value="CH">
<option label="Canada" value="CA">
</datalist>

<keygen>
<keygen

Gnrateur de cls. Contrle avanc gnrant une paire de cls


challenge (publique/prive) de type keytype (par exemple, rsa).
challenge,
keytype

Attributs de formulaire
Ces attributs sappliquent la quasi-totalit des lments de formulaire.

name

Nom du champ pour la validation. Donne un nom llment


dentre, pour la rception ct serveur dans les valeurs GET/POST, voire la
manipulation avec JavaScript. Ne pas confondre avec id.
<label for="pr">Prnom</label>
<input name=
name="prenom
prenom" type="text" id="pr">

disabled
form
maxlength
size
value
readonly
placeholder

Dsactivation. Dsactive le contrle de llment (gris).


Formulaire li. Permet dassocier explicitement un champ avec un conteneur <form> (via son identifiant) qui ne serait pas son anctre naturel.
Longueur maximale du contenu. Fixe la longueur maximale du
contenu qui peut tre entr dans le champ (nombre de caractres).
Taille par dfaut. Indique la largeur visible (nombre de caractres) dun
champ de formulaire recevant du texte.
Valeur par dfaut. Valeur transmise au serveur en GET/POST, affiche
dans le champ lutilisateur si lattribut est prsent ds le chargement du
document.
Lecture seule. Avec la prsence de cet attribut, la valeur ne peut tre
modifie par lutilisateur.
Indication ou exemple de saisie. La valeur de cet attribut donne une
indication de saisie lutilisateur. Se masque ds le dbut de la saisie ou
la rception du focus.
<input placeholder=
placeholder="Ville,
Ville, pays, code..."
code... name="geo">

required
pattern

Champ requis. Le champ doit tre complt par lutilisateur pour permettre
la validation du formulaire.
Masque de saisie. Spcifie quelle forme doit prendre la valeur entre pour
tre valide. Pour la syntaxe, se rfrer aux expressions rgulires.
<input name="codepays" pattern=
pattern="[A-Z]{3}
[A-Z]{3}">
<input type="tel" pattern=
pattern="^0[0-9]+$
^0[0-9]+$">

autocomplete
autofocus
list
multiple
dirname

Autocompltion. Active (on) ou dsactive (off) lautocompltion.


Autofocus. Donne le focus (par exemple, le contrle au clavier) llment
ds le chargement de la page.
Liste de suggestions. Associe une liste <datalist> llment en
faisant rfrence lattribut id de celle-ci.
Valeurs multiples. Permet la slection ou lentre de plusieurs valeurs pour
les types email et file.
Direction de la saisie. Attribue un nom complmentaire pour la rception
ct serveur de linformation de direction de la saisie pour ce champ (valeur
rtl ou ltr).
<input type="text" name="commentaire" dirname=
dirname="commentaire.dir
commentaire.dir">

lments obsoltes
Certains lments prsents dans HTML4 et dans les prcdentes versions sont dsormais obsoltes, car remplacs avantageusement par les feuilles de style CSS ou
par dautres fonctionnalits mieux penses. Il sagit de <acronym>, <applet>,
<basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>,
<isindex>, <noframes>, <strike>, <tt>, <u>, <xmp>.

Attributs globaux applicables


tout lment HTML5
contenteditable
contextmenu
draggable
dropzone

Contenu ditable dynamiquement. Llment devient modifiable dans


le navigateur.
Menu contextuel. Lie un menu contextuel dclar par <menu> grce
son id.
lment dplaable. Active (true) ou dsactive (false) la possibilit de
dplacer un lment, notamment dans le cadre du Drag & Drop.
Zone de dpt. Active llment comme zone de dpt pour le Drag
& Drop. Les valeurs possibles sont copy : copie des donnes dposes,
move : dplacement des donnes dposes, link : cration dun lien vers
les donnes dorigine, string:text/plain acceptation de texte Unicode,
file:type acceptation de types de fichiers.
<div dropzone=
dropzone="copy
copy file:image/png file:image/gif file:image/
jpeg"></div>
jpeg

hidden

spellcheck

Contenu inaccessible. Si cet attribut est prsent, llment nest plus, ou


nest pas encore, pertinent (par exemple, une tape supplmentaire dans un
processus dinscription en ligne). Le navigateur ne doit pas lafficher.
ne pas confondre avec display:none en CSS qui relve purement de
la prsentation. Retirer lattribut hidden avec JavaScript ractive laccs
llment et son contenu.
Correction orthographique. Active (valeur on) ou dsactive (valeur
false) la vrification orthographique interne au navigateur.
<input type="text" name="nomfamille" spellcheck=
spellcheck="off
off">

accesskey

Touche daccs rapide. Mthode daccs direct au clavier (par combinaison de touches varies selon le systme) aux lments recevant le focus.
<a href="/html" accesskey=
accesskey="h">HTML</a>
<a href="/css" accesskey="c">CSS</a>
accesskey=

class
id
dir
lang
style

Classe. Confre une classe un ou plusieurs lments HTML, qui peut tre
utilise dans la feuille de style CSS pour attribuer des proprits communes
plusieurs de ces lments, ou avec JavaScript et la mthode document.
getElementsByClassName("classe");.
Identifiant unique. Attribue un identifiant unique llment HTML
pour le dsigner tant avec CSS #id quavec JavaScript document.
getElementById("id").
Direction du texte. Indique la direction du texte contenu, avec pour valeurs
auto, ltr (left to right) : gauche droite, rtl (right to left) : droite gauche.
Langue. Indique par un code langue celle dans laquelle le contenu texte
est rdig.
Styles spcifiques. Attribue une ou plusieurs proprits de style CSS
directement llment, en gnral prioritaires sur la feuille de style.
<p style=
style="color:red
color:red">Rouge</p>

tabindex

title

Ordre de tabulation. Dfinit un ordre de tabulation (diffrent de lordre


naturel) pour la navigation au clavier, parmi les lments qui peuvent recevoir
le focus, avec pour valeurs possibles : un entier ngatif : peut recevoir le
focus mais nest pas accessible dans la squence de navigation ; zro : ordre
automatique ; un entier positif : ordre dtermin par la squence.
Titre. Fournit des informations propos dun lment, souvent affiches par
le navigateur sous forme dinfobulle lorsque le curseur survole cet lment.

HTML 5. Une rfrence pour le dveloppeur web,


R. RIMEL
CSS avances : vers HTML 5 et CSS 3, R. GOETTER
CSS 2 : pratique du design web, 3e d., R. GOETTER
Mmento XHTML, 2e d., R. GOETTER
Mmento Ergonomie web, 2e d., A. BOUCHER
Mmento Sites web : les bonnes pratiques, 3e d.,
. SLOM
Mmento MySQL 5, 2e d., R. RIMEL
Mmento PHP 5 et SQL, 2e d., C. PIERRE DE GEYER
et G. PONON

Code diteur : G13420


ISBN : 978-2-212-13420-9

Conception : Nord Compo

Chez le mme diteur

Merci
davoir achet
ce mmento.

Vous pouvez le retrouver


ainsi que toute la collection
en version papier dans toutes
les bonnes librairies !

XHTML

mmento mmento

Dcouvrez toute la collection mmento


sur : www.eyrolles.com

Ergonomie
web

2e d i t i o n
Raphal Goetter

2e

dition
Amlie Boucher

Raphal Goetter
Mmento XHTML
978-2-212-12541-2

Amlie Boucher
Mmento - Ergonomie web
978-2-212-12698-3

mmento mmento

Sites
web
Les bonnes pratiques
3 e d i t i on

lie S l o m

MySQL 5

et les contributeurs Opquast

Rodolphe Rimel
3e dition

Elie Slom , Opquast


Mmento Sites web Les bonnes pratiques
978-2-212-12802-4

Rodolphe Rimel
Mmento MySQL 5
978-2-212-13419-3

Chez le mme diteur :

Raphal Goetter
CSS avances

978-2-212-13405-6

Rodolphe Rimel
HTML5

978-2-212-12982-3

Tous les livres informatiques sont sur

www.editions-eyrolles.com

Et pour toutes les nouveauts numriques,


retrouvez-nous sur Twitter et Facebook

@ebookEyrolles
EbooksEyrolles