Accueil
Mes tutoriels sur la programmation

Tutoriel HTML - sommaire


Vous pouvez me contacter via Facebook (questions, suggestions) : page facebook relative à mon site

HTML5 : une révolution

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

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

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

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.

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

Une réelle amélioration des formulaires

HTML5 : Les nouvelles balises structurantes

Illustrons notre propos par un exemple.

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 !

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.