HTML5 : nouvelles balises & nouveaux attributs

Attention lorsque l'on parle de HTML5 on évoque un ensemble de nouvelles technologies dont HTML5 (au sens strict) n'est qu'une petite partie ..
HTML5 au sens large c'est non seulement le langage de balisage HTML amélioré et simplifié mais c'est aussi le CSS version 3 et de nouvelles API Javascript intégrées dans les navigateurs récents.

Nouveau rôle de HTML

W3C

le HTML doit être utilisé pour le fond (structure et sémantique)
le CSS doit être utilisé pour la mise en forme

Donc dans le balisage HTML on ne doit trouver que des éléments qui apportent des informations ou de la structuration et aucunement des dispositifs de présentation. En conséquence d'anciennes balises ayant un rôle purement visuel sont dites dépréciées (ou obsolètes).
Rassurez vous les navigateurs récents sont toujours capables de les interpréter dans le cadre de la rétrocompatibilité.
L'expression "balises dépréciées (ou obsolètes)" veut simplement dire qu'elles sont seulement retirées de la spécification du W3C et qu'elles sont déclarées invalides lors des tests de conformité (emploi du validateur proposé par le W3C).

Balises retirés de la spécification

u
s
font
center

Des attributs de balise retirés de la spécification

align
bgcolor
border
color
l'attribut type dans les balises OL ou UL

Bizarrement les balises B (mise en gras) et I (mise en italique) ne sont pas bannies alors que ce sont typiquement et uniquement des balises de mise en forme du texte.

acronym (car fait double emploi avec abbr)
frame et frameset (car elles font obstacle à l'accessibilité pour les moteurs de recherche)

HTML5 alternative à FLASH

Avec HTML5 insérer une vidéo ou un fichier audio dans une page web devient un jeu d'enfant (ou presque) grâce aux balises VIDEO et AUDIO.
HTML5 comprend un module de dessin voire d'animation avec la balise CANVAS (mais les instructions de dessin sont écrites grâce à une API JavaScript).
Mais si vous voulez réaliser des dessins voire des animations dans une page web et que vous n'aimez pas trop programmer en JavaScript vous pouvez, plutôt que Canvas, utiliser le langage SVG. Désormais avec HTML5 il est possible d'écrire le code SVG directement dans la page Web.

Pour résumer, HTML5 avec toutes ces extensions est capable de faire ce qu'on demandait à FLASH ...
Sur les navigateurs récents le HTML5 est désormais bien implémenté. Donc il faut l'utiliser !

Un code HTML simplifié

Le code en HTML4 et XHTML était trop souvent verbeux voire indigeste. L'exemple le plus caractéristique était le fameux doctype.

Le doctype doit être la première instruction d'une page web avant même la balise <html>
Cette instruction est obligatoire et indispensable. Si vous ne me croyez pas faites un test très simple. Dans une page web vous oubliez le fameux DOCTYPE et que vous exécutez cette page avec le navigateur Internet Explorer ...

Le doctype en HTML4 était :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Le doctype en HTML5 est : <!DOCTYPE html >
Reconnaissez que c'est beaucoup plus simple ...

La balise HTML est aussi simplifiée. Il suffit désormais d'écrire : <html lang = "fr" >

De même que les balises STYLE et SCRIPT ; l'attribut type devient facultatif !

Quand à la balise meta avec l'attribut charset il suffit d'écrire désormais : < meta charset = 'utf-8' >
Il faut peut être rappeler le sens de cette instruction. Elle force le navigateur à utiliser le jeu de caractères UTF-8 pour lire la page. Il faut donc que ladite page soit encodée aussi en UTF-8 pour avoir un rendu correct ... sinon les caractères accentués vont apparaître de façon bizarre.

Avec HTML5 et à la différence de XHTML (du XML en général), il n'est nécessaire de fermer les balises orphelines (balises simples). Donc nous pouvons écrire :
< img ... > et non pas < img ... />

Maintenant je vous conseille de prendre l'habitude de fermer les balises isolées ( />).
En effet dans les langages basés sur le XML dont SVG (largement évoqué dans ce site) il faut impérativement fermer les balises isolées sinon vous avez une erreur fatale avec le message : "Opening and ending tag mismatch".

De nouvelles balises

des balises structurantes qui remplacent avantageusement les fameux < div id = ... >
de nouvelles balises sémantiques : FIGURE, TIME, ABBR, etc.
le multi média facilité avec les balises AUDIO & VIDEO
les nouvelles balises CANVAS & SVG pour dessiner dans la page (dessin matriciel ou vectoriel - statique ou animé)
possibilité de masquer du contenu par défaut avec les balises DETAILS & SUMMARY
etc.

HTML5 et le multimédia

API Canvas

Une réelle amélioration des formulaires

nouveaux types de champs
nouveaux attributs qui permettent un contrôle de saisie côté client sans devoir recourir au Javascript
de nouvelles pseudo-classes CSS dédiées aux champs

Je n'en dis pas davantage sur les formulaires HTML5 car je consacre tout un chapitre sur ce sujet : Formulaires HTML5

Les nouvelles balises structurantes

Illustrons notre propos par un exemple.

un en-tête de page ( ou "header")
une zone de navigation (ou "nav")
le corps de la page (ou "section")
le pied de page (ou "footer")

De plus la boite "section" doit contenir deux boites "article" l'une à côté de l'autre

Aspect type de chaque page

La solution HTML4

...
<body>
	<div id = 'header'>
		<h1>la boîte header : en-tête de page</h1>
	</div>
	<div id = 'nav'>
		<h1>la boîte nav : menu de navigation</h1>
	</div>
	<div id ='section'>
		<h1>la boîte section : le corps de la page</h1>
		<div class = 'article'>
			<h2>Une boîte article </h2>
		</div>
		<div class = 'article'>
			<h2>Une boîte article </h2>
		</div>
	</div><!--fin section-->
	<div id ='footer'>
		<h1>la boîte footer : pied de page</h1>
	</div>
</body>
...

Dans la partie body de la page on dessine grâce à la balise de type "block" DIV et via l'attribut ID ou class.
Notez le nombre élevé de balises fermantes DIV. Pour s'y retrouver il faut bien indenter le code et commenter le code.

La solution HTML 5

La spécification HTML5 introduit de nouvelles balises structurantes qui remplacent avantageusement les DIV ID ="identifiant".

Examinons d'abord le code HTML ! ... <body> <header> <h1>la boîte header : en-tête de page</h1> </header> <nav> <h1>la boîte nav : menu de navigation</h1> </nav> <section> <h1>la boîte section : le corps de la page</h1> <article> <h2>Une boîte article </h2> </article> <article> <h2>Une boîte article </h2> </article> </section> <footer> <h1>la boîte footer : pied de page</h1> </footer> </body> ...

On utilise les nouvelles balises structurantes header, nav, section, article, aside et footer introduites par HTML 5. Ces balise sont des balises doubles et sont nativement de type block comme DIV.
Avec ces balises la structure de la page apparait très clairement alors que dans la version ancienne on se perd un peu dans la multiplication des DIV, surtout si le code n'est pas indenté ...

Autres balises structurantes

Dans l'exemple précédent j'ai utilisé cinq nouvelles balises : header, nav, section, article, footer.
Mais il existe aussi les balises main et aside
La balise main doit contenir tous les éléments de la page à l'exception de l'en-tête (header) et du pied (footer). Je ne l'ai pas utilisé dans l'exemple car elle n'est pas encore reconnue par IE et à mon humble avis, elle fait double emploi avec SECTION.
La balise aside doit être utilisée pour contenir des compléments ; des informations non essentielles donc créer des encadrés. En général cette boite apparait sous forme d'un volet latéral à côté de section.
On peut imaginer que les boites aside soient masquées dans le cadre d'un affichage de la page sur un petit écran.

Traduction

Tutoriel HTML - sommaire

Révisions HTML4

HTML5 : nouvelles balises et nouveaux attributs

Des API HTML utiles - des applications monopages

Tutoriel HTML5 - recherche

L'auteur : Patrick Darcheville