Articles
HTML5..."Evolution Of Browsers"
L’HTML5 est une évolution de l’HTML 4.01 (et de l’XHTML 1.0), c’est à dire que tout ce que vous savez faire en HTML reste valide.
Cette évolution consiste en une multitude de nouvelles fonctionnalités qui ont été apportées au langage HTML ainsi qu’au Javascript.
Si vous savez faire de l’HTML “classique” vous devrez donc apprendre à manipuler ces nouvelles fonctionnalités. Si vous ne savez pas, je vous conseille l’excellent SiteDuZero, qui constitue un point de départ solide pour l’apprentissage de l’HTML et du CSS.
Nous allons voir un aperçu de certaines de ces nouveautés apportées par l’HTML5, mais tout d’abord, commençons par nous intéresser aux gens qui travaillent dessus !
Le W3C (World Wide Web Consortium) est l’organisation qui s’occupe de standardiser le web. Elle est constituée d’un ensemble de membres actifs qui réfléchissent à l’évolution des standards tels que l’HTML et le CSS. Ils discutent par exemple des bonnes pratiques à employer pour écrire son code HTML, ou encore de nouvelles balises qu’il serait intéressant d’ajouter au langage. Le W3C travaille donc à l’élaboration du standard qu’est “l’HTML5”.
Seulement voilà, le problème c’est qu’une telle responsabilité présente un inconvénient majeur : la lenteur du processus. La conséquence de cette lenteur est la création d’un groupe de rébellion au sein du W3C, nommé le WHATWG (Web Hypertext Application Technology Working Group). Ce groupe est constitué principalement de développeurs des navigateurs tels que Mozilla, Opera ou Apple. L’approche est ici totalement différente puisque ce groupe est beaucoup plus ouvert et surtout a pour objectif d’accélérer la standardisation (ou du moins la mise en place de standards pour les navigateurs).
L’HTML5 est donc le fruit des travaux du W3C et du WHATWG.
Les Nouveautés Dans Le Code De L'HTML 5
Les Nouveautés Dans Le Code De L'HTML 5
Un code vraiment "Light" !!!
Alors que dans les versions antérieures il y'avait un code long, l'HTML5 a tout à fait simplifié le codage:
Alors que dans les versions antérieures il y'avait un code long, l'HTML5 a tout à fait simplifié le codage:
1
2
3
4
5
6
7
8
9
10
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="design.css" /> <script type=”text/javascript” src=script.js"></script></head><body></body></html> |
En HTML5, ça nous donne :
1
2
3
4
5
6
7
| <!DOCTYPE html><html lang="fr"><head> <meta charset="utf-8" /> <link rel="stylesheet" href="design.css" /> <script src="script.js"></script></head> |
Les Nouveaux Nés
L’HTML5 introduit également un ensemble de nouvelles balises afin de donner plus de sémantique (de sens) à nos pages. Par exemple, au lieu d’utiliser une <div> avec un id=”header”, nous pouvons utiliser tout simplement la balise <header>. Parmi ces balises sémantiques on trouve entre autres
- <header> : Qui indique que l’élément est une en-tête
- <footer> : Qui indique que l’élément est un pied-de-page
- <nav> : Qui indique un élément de navigation tel qu’un menu
- <aside> : Qui correspond à une zone secondaire non liée au contenu principal de la page
- <article> : Qui représente une portion de la page qui garde un sens même séparée de l’ensemble de la page (comme un article de blog par exemple)
Les balises multimédia
<video>
Cette balise intègre directement un lecteur vidéo dans la page, avec des boutons Lecture, Pause, une barre de progression, du volume… Un vrai petit Youtube intégré à votre page et natif au navigateur !
<audio>
Cette balise est l’équivalent de la balise video mais pour l’audio. En 3 lignes de code vous avez un lecteur MP3 !
Nous pouvons d’ailleurs voir sur l’image ci-dessous que chaque navigateur utilise un design qui lui est propre pour styliser son lecteur. Dans tous les cas il vous est possible de créer votre propre design si vous préférez un rendu uniforme quel que soit le navigateur utilisé.
<canvas>
Cette balise est probablement la plus prometteuse de toutes, puisqu’il s’agit d’une surface sur laquelle il est possible de tracer des formes et de les animer. En résumé… C’est dans cette zone que sont réalisées des animations ou des jeux.
Les possibilités offertes par la balise canvas sont immenses, et couplé avec le standard WebGL de rendu graphique 3D, on obtient des résultats impressionnants au sein même du navigateur.
Un projet de portage du jeu Quake 2 a été réalisé par 3 employés de Google afin de démontrer le potentiel de cette technique :
Cette balise intègre directement un lecteur vidéo dans la page, avec des boutons Lecture, Pause, une barre de progression, du volume… Un vrai petit Youtube intégré à votre page et natif au navigateur !
<audio>
Cette balise est l’équivalent de la balise video mais pour l’audio. En 3 lignes de code vous avez un lecteur MP3 !
Nous pouvons d’ailleurs voir sur l’image ci-dessous que chaque navigateur utilise un design qui lui est propre pour styliser son lecteur. Dans tous les cas il vous est possible de créer votre propre design si vous préférez un rendu uniforme quel que soit le navigateur utilisé.
<canvas>
Cette balise est probablement la plus prometteuse de toutes, puisqu’il s’agit d’une surface sur laquelle il est possible de tracer des formes et de les animer. En résumé… C’est dans cette zone que sont réalisées des animations ou des jeux.
Les possibilités offertes par la balise canvas sont immenses, et couplé avec le standard WebGL de rendu graphique 3D, on obtient des résultats impressionnants au sein même du navigateur.
Un projet de portage du jeu Quake 2 a été réalisé par 3 employés de Google afin de démontrer le potentiel de cette technique :