1. Aperçu rapide des bases du HTML5
Voyelle
–
40
rue
du
Bignon,
forum
de
la
rocade,
bâ8ment
Oméga
à
Chantepie
-‐
contact@voyelle.fr
1
2. HTML5
Introduc8on
:
vers
un
web
séman8que
La
version
finalisée
du
html5
est
prévu
pour
2014
mais
il
est
déjà
possible
de
l’u8liser.
L’avantage
du
html5
par
rapport
aux
xhtml
et
hml4,
c’est
son
importante
orienta8on
séman8que.
Vous
allez
pouvoir
plus
facilement
définir
les
rôles
des
balises
html,
ce
qui
aura
aussi
certainement
un
impact
sur
le
référencement.
Séman&que
?
Le
web
séman8que
est
un
mouvement
qui
favorise
les
«
méthodes
communes
pour
échanger
des
données
».
Le
html
est
séman8que
depuis
le
début.
Les
balises
qui
composent
le
code
html
définissent
leur
rôle.
Le
8tre
principale
est
défini
par
un
<h1>,
les
paragraphes
sont
eux
des
<p>,
etc.
Le
html5
va
plus
loin
en
proposant
des
balises
pour
presque
tous
les
cas.
Là
où
était
u8lisée
la
balise
<div>
pour
les
blocs
du
site,
nous
allons
pouvoir
spécifier
ces
blocs
comme
étant
un
<header>,
un
<footer>,
le
contenu
de
l’
<ar8cle>.
Voir
:
§ hXp://fr.wikipedia.org/wiki/Web_s%C3%A9man8que
§ hXp://www.php-‐astux.info/seman8que-‐html.php
Voyelle
–
40
rue
du
Bignon,
forum
de
la
rocade,
bâ8ment
Oméga
à
Chantepie
-‐
contact@voyelle.fr
2
3. Le <head>
Simplifica8on
du
code
Contrairement
aux
version
html
et
xhtml
passées,
il
ne
sera
plus
nécessaire
de
spécifier
la
version.
CeXe
une
manière
d'annoncer
que
le
html5
est
compa8ble
avec
toutes
les
versions
et
que
les
futures
versions
du
html
devront
l'être.
Exemple
de
html5
:
<!DOCTYPE
html>
<html>
<head>
<meta
charset="UTF-‐8">
<8tle>ma
page</8tle>
<meta
descrip8on="ma
page">
<link
rel="stylesheet"
href="file.css">
<script
src="file.js"></script>
</head>
(…)
Voyelle
–
40
rue
du
Bignon,
forum
de
la
rocade,
bâ8ment
Oméga
à
Chantepie
-‐
contact@voyelle.fr
3
4. Les balises obsolètes
Certaines
balises,
même
si
elles
peuvent
être
comprises
par
les
navigateurs,
sont
considérées
comme
obsolètes
par
le
html5.
Il
est
recommandé
de
ne
plus
u8liser.
Les
balises
à
éviter
§ frame,
frameset
et
noframes
§ acronym
(u8liser
abbr
à
la
place)
§ font,
big,
center
et
strike
Les
balises
redéfinies
§ <b>
maintenant
juste
pour
appliquer
un
style
à
un
texte
sans
donner
une
importance
§ <i>
pour
signifier
que
le
texte
est
une
voix
alterna8ve
sans
donner
d'importance
§ <cite>
pour
citer
le
nom
d'une
œuvre
mas
plus
le
nom
d'une
personne
Les
liens
:
ça
change
!
La
modifica8on
du
mode
d'écriture
des
liens
est
importante.
La
balise
<a>,
de
type
inline,
ne
pouvait
se
placer
que
dans
des
balises
bloc
(<h1><a
href="monlien.html">3tre</a></h1>).
Si
un
lien
était
répété
sur
un
8tre
et
un
paragraphe,
il
fallait
le
rédiger
dans
le
<h1>
et
dans
le
<p>.
Avec
le
html5,
vous
pouvez
envelopper
les
deux
balises
par
un
<a>
:
<a
href="monlien.html"><h1>8tre</h1><p>mon
texte
de
paragraphe</p></a>
Par
contre
il
n'est
pas
possible
d'insérer
un
<a>
dans
un
<a>
!
Voyelle
–
40
rue
du
Bignon,
forum
de
la
rocade,
bâ8ment
Oméga
à
Chantepie
-‐
contact@voyelle.fr
4
5. Structure
Header,
footer,
nav
La
fonc8on
de
ces
trois
balises
est
assez
simple
à
comprendre.
Elles
encadrent
l'entête,
le
pied
de
page
et
le
menu
de
naviga8on.
La
véritable
nouveauté
de
ces
trois
balises
résident
dans
le
fait
qu'elles
ne
sont
pas
exclusivement
des8nées
à
l'ensemble
de
la
page
(auquel
cas
il
n'y
aurait
qu'un
header,
qu'un
footer…)
mais
peuvent
définir
des
données
propres
à
une
autre
balise
structurant
la
page.
Sec8on
Proche
de
la
balise
<div>
avec
une
approche
plus
séman8que,
elle
est
censé
regrouper
des
contenus
contextuel,
par
théma8que
ou
apparenté.
CeXe
balise
peut
contenir
un
header
et
un
footer.
Header,
footer,
nav
et
aside
peuvent
être
u8lisés
pour
spécifiés
les
différents
contenus
de
sec8on.
Aside
C'est
une
forme
d'encadré
qui
peut
accueillir
du
contenu
indirectement
en
lien
avec
le
contenu
général
de
la
page
mais
qui
n'affecte
ce
contenu
si
il
était
enlevé.
Cela
peut
être
une
cita8on
extraite
du
document
principal.
Voyelle
–
40
rue
du
Bignon,
forum
de
la
rocade,
bâ8ment
Oméga
à
Chantepie
-‐
contact@voyelle.fr
5
6. Structure
Ar8cle
CeXe
balise
est
proche
de
sec8on
mais
plus
précise.
Elle
est
censée
regrouper
les
données
soit
d'une
page
précise,
soit
d'un
flux
éventuel.
Il
sera
donc
u8lisé
pour
les
billets
de
blog,
les
informa8ons,
les
fils
de
discussion…
Il
n'est
pas
simple
de
définir
quand
nous
devons
u8liser
sec8on
ou
ar8cle,
sachant
qu'il
peut
y
avoir
plusieurs
sec8on
dans
un
ar8cle
et
inversement.
Hgroup
CeXe
balise
peut
être
u8lisée
dans
la
balise
header,
sec8on
ou
ar8cle.
Elle
regroupe
les
éléments
8tres
d'un
contenu.
Elle
peut
donc
afficher
à
la
suite
un
h1,
un
h2,
etc.
Voyelle
–
40
rue
du
Bignon,
forum
de
la
rocade,
bâ8ment
Oméga
à
Chantepie
-‐
contact@voyelle.fr
6
7. Exemple de structure en html5
Source
de
l'image
:
hXp://www.html5code.com/tutorials/html5-‐seman8c-‐layout-‐tags/
Voyelle
–
40
rue
du
Bignon,
forum
de
la
rocade,
bâ8ment
Oméga
à
Chantepie
-‐
contact@voyelle.fr
7
8. Les balises inline
Nouveaux
éléments
orientés
séman8ques
HMLT5
implémente
des
éléments
"inline"
comme
les
précédents
span,
strong,
em…
Mark
CeXe
balise
permet
de
surligner
des
récurrences
sans
lui
donner
une
importance.
Par
exemple,
sur
une
page
de
résultat
pour
la
recherche
d'un
terme,
<mark>
encadre
le
terme
pour
le
meXre
en
surbrillance.
Time
La
balise
<8me>
sert
à
informer
sur
les
dates,
les
heures
ou
la
combinaison
des
deux.
C'est
une
alterna8ve
html5
aux
microformats.
Il
est
possible
d'y
ajouter
l'aXribut
pubdate
pour
informer
que
c'est
une
date
de
publica8on.
Exemples
:
<8me
date8me="14:30">14
h
30</8me>
<8me
date8me="2012-‐08-‐01T11:12"
pubdate>Ar8cle
publié
le
1
août
2012
à
11h12</8me>
Autres
balises
:
meter,
progress
>
hXp://www.alsacrea8ons.com/ar8cle/lire/1416-‐html5-‐meter-‐progress.html
Voyelle
–
40
rue
du
Bignon,
forum
de
la
rocade,
bâ8ment
Oméga
à
Chantepie
-‐
contact@voyelle.fr
8
9. Utiliser html5 !
Il
est
possible
d'u8liser
du
HTML5
aujourd'hui,
même
si
tous
les
navigateurs
(soit
parce
que
anciens,
soit
parce
que
généralement
probléma8ques).
Pour
que
votre
site
puisse
être
lisible
sur
tous
les
navigateurs,
il
vous
faudra
vous
armer
de
pa8ence
et
ajouter
quelques
codes.
Style
Pour
les
navigateurs
qui
ne
savent
pas
encore
interpréter
le
HTML5,
vous
devrez
simplement
les
renseigner
en
CSS.
Par
exemple,
vous
donnez
aux
balises
blocs
une
valeur
"display:
block"
(sec8on,
ar8cle,
nav,
aside,
header,
footer
et
hgroup).
Les
problèmes
les
plus
important
vous
viendront
de
IE.
Il
faudrait,
via
du
javascript,
créer
les
éléments
un
par
un.
Heureusement,
il
existe
des
scripts
pour
le
faire.
Voir
les
scripts
de
Remy
Sharp
par
exemple
(hXp://html5shiv.googlecode.com/svn/trunk/html5.js)
à
appeler
dans
votre
<head>
avec
les
commentaires
IE
:
<!—[if
IE]><script
src="…"></script><![endif]-‐-‐>.
Voyelle
–
40
rue
du
Bignon,
forum
de
la
rocade,
bâ8ment
Oméga
à
Chantepie
-‐
contact@voyelle.fr
9
10. Tableau des éléments
Voyelle
–
40
rue
du
Bignon,
forum
de
la
rocade,
bâ8ment
Oméga
à
Chantepie
-‐
contact@voyelle.fr
10
11. Quelques liens
§ Web
séman8que
et
(x)html5
hXp://tcuvelier.developpez.com/tutoriels/web-‐seman8que/html5-‐microdonnees/introduc8on/
§ HTML5,
l'évolu8on
séman8que
et
SEO
hXp://blog.maroke8ng.com/html-‐5-‐evolu8on-‐seman8que-‐et-‐seo/comment-‐page-‐1/
§ Structurer
une
page
en
HTML5
avec
les
μdonnées
et
des
μformats
hXp://on-‐air.hiseo.fr/html5/seman8c-‐html5/
§ Les
spécifica8ons
HTML5
hXp://www.xul.fr/html5/specifica8ons.php
§ Livre
de
Jeremy
Keith
hXp://www.abookapart.com/products/html5-‐for-‐web-‐designers/
et
lire
(en
anglais)
hXp://adac8o.com/ar8cles/1704/
§ HTML5
seman8c
layout
tags
(en
anglais)
hXp://www.html5code.com/tutorials/html5-‐seman8c-‐layout-‐tags/
Voyelle
–
40
rue
du
Bignon,
forum
de
la
rocade,
bâ8ment
Oméga
à
Chantepie
-‐
contact@voyelle.fr
11