Sachez tout de même que LA grande nouveauté apporté par le HTML5 (couplé avec CSS3) c'est l'animation de pages web comme le montre de nombreux sites dédié tel que :
Microsoft avec : http://ie.microsoft.com/testdrive/
Apple avec : http://www.apple.com/html5/
Mozzilla avec : http://people.mozilla.com/~prouget/demos/
On commence par les nouvelles balises apportés avec cette fraiche version :
-
section représente la section d'un document générique ou d'une application. Il peut être utilisé avec h1-h6 pour indiquer la structure du document.
-
article représente un bout de contenu indépendant d'un document, tel qu'une entrée d'un blog ou d'un article de journal.
-
aside représente un bout de contenu qui n'est qu'en léger rapport avec le reste de la page.
-
header représente l'en-tête d'une section.
-
footer représente un pied de page pour une section et peut contenir des renseignements sur l'éditeur, sur les droits d'auteur, etc.
-
nav représente une section du document à l'intention de la navigation.
-
dialog peut être utilisé pour baliser une conversation comme suit :
<dialog>
<dt>Costello<dd> Regarde, tu dois être le premier joueur ?
<dt>Abbott<dd> Certainement.
<dt>Costello<dd> Qui joue en premier ?
<dt>Abbott<dd> C'est exact.
<dt>Costello<dd> Quand tu rembourses chaque mois le premier joueur, qui ramasse l'argent ?
<dt>Abbott<dd> Chaque dollar pour ça.
</dialog> -
figure peut être utilisé pour associer une légende à un contenu imbriqué, tel qu'un graphique ou une vidéo :
<figure>
<video src=ogg>…</video>
<legend>Exemple</legend>
</figure> -
audio et video pour du contenu multimédia. Les deux éléments fournissent une API pour que les éditeurs d'application puissent coder leur propre interface utilisateur ; mais, il y a aussi une manière de déclencher une interface utilisateur fournie par l'agent utilisateur. Les éléments source sont utilisés avec ces éléments s'il y a de multiples flux disponibles de différents types.
-
embed est utilisé pour du contenu d'un plug-in.
-
mark représente une série de texte marqué.
-
meter représente une mesure, telle que l'espace de disque.
-
time représente une date et/ou une heure.
-
canvas est utilisé pour afficher des graphiques bitmap dynamiques sur le moment, tels que des graphes, des jeux, etc.
-
command représente une commande que l'utilisateur peut invoquer.
-
datagrid représente une représentation interactive d'une liste arborescente ou de données tabulaires.
-
details représente des renseignements supplémentaires ou des contrôles que l'utilisateur peut obtenir sur demande.
-
datalist, avec le nouvel attribut list d'input, est utilisé pour créer des boîtes combinées :
<input list=browsers>
<datalist id=browsers>
<option value="Safari">
<option value="Internet Explorer">
<option value="Opera">
<option value="Firefox">
</datalist> -
Les éléments datatemplate, rule et nest fournissent un mécanisme de gabarit pour le HTML.
-
event-source est utilisé pour « capturer » des événements envoyés par le serveur.
-
output représente un type de sortie, telle que celle d'un calcul fait au moyen d'un script.
-
progress représente une progression de tâche, telle que le téléchargement ou quand une série d'opérations lourdes est exécutée.
-
Les éléments ruby, rt et rb sont prévus pour baliser des annotations Ruby.
L'attribut type de l'élément input a maintenant les nouvelles valeurs suivantes :
- datetime-local
- date
- month
- week
- time
- number
- range
- url
Cette nouvelle mouture de notre Hyper Text Markup Langage apporte aussi son lot d'attributs pour ces nouvelles balises
-
Les éléments a et area ont maintenant un attribut media en cohérence avec l'élément link. C'est purement à titre indicatif.
-
Les éléments a et area ont un nouvel attribut appelé ping qui spécifie une liste d'URIs séparées par une espace qui doivent être épinglées quand l'hyperlien est suivi. Actuellement, le suivi de l'utilisateur est essentiellement effectué au moyen de redirections. Cet attribut permet à l'agent utilisateur d'informer les utilisateurs des URIs qui vont être épinglées, en plus de donner aux utilisateurs soucieux de confidentialité une manière de le désactiver.
-
L'élément area, par cohérence, a maintenant les attributs hreflang et rel.
-
L'élément base peut maintenant avoir un attribut target, aussi bien principalement par cohérence avec l'élément a que parce qu'il était déjà largement supporté. Aussi, l'attribut target pour les éléments a et area n'est-il plus désapprouvé, comme il est utile dans des applications Web, par exemple conjointement avec iframe.
-
L'attribut value pour l'élément li n'est plus désapprouvé, comme il n'est pas un attribut de présentation. Il en va de même pour l'attribut start de l'élément ol.
-
L'élément meta a maintenant un attribut charset, comme il était déjà supporté et qu'il fournit une façon plus sympathique de spécifier le codage des caractères du document.
-
Un nouvel attribut autofocus peut être spécifié dans les éléments input (sauf quand l'attribut type est hidden), select, textarea et button. Il fournit une manière déclarative de cibler un champ de contrôle de formulaire durant le chargement de la page. L'utilisation de cette caractéristique devrait augmenter l'expérience de l'utilisateur, comme ce dernier peut le désactiver s'il ne l'aime pas, par exemple.
-
Le nouvel attribut form des élements input, output, select, textarea, button et fieldset permet aux champs de contrôle d'être associés à plus d'un formulaire.
-
Les éléments input, button et form ont un nouvel attribut replace, qui affecte ce qui sera fait du document après qu'un formulaire a été soumis.
-
Les éléments form et select (ainsi que l'élément datalist) ont un attribut data, qui tient compte du préremplissage automatique des champs de contrôle de formulaire, dans le cas de form, ou du champ de contrôle de formulaire, dans le cas de select et de datalist, avec des données provenant du serveur.
-
Le nouvel attribut required s'applique à input (sauf quand l'attribut type est hidden, image ou un type de bouton tel que submit) et à textarea. Il indique que l'utilisateur doit renseigner une valeur afin de soumettre le formulaire.
-
Les éléments input et textarea ont un nouvel attribut appelé inputmode, qui laisse entendre à l'interface utilisateur quel genre de saisie est attendu.
-
Vous pouvez maintenant désactiver un fieldset entier en y utilisant l'attribut disabled. Ce n'était pas possible auparavant.
-
L'élément input a plusieurs nouveaux attributs pour spécifier des contraintes : autocomplete, min, max, pattern et step. Comme mentionné auparavant, il a aussi un nouvel attribut list, qui peut être utilisé avec les éléments datalist et select.
-
input et button ont aussi un nouvel attribut template, qui peut être utilisé pour des gabarits de répétition.
-
L'élément menu a trois nouveaux attributs : type, label et autosubmit. Ils permettent à l'élément de se transformer en un menu tel qu'il est trouvé dans des interfaces utilisateur typiques, ainsi que de pourvoir à des menus contextuels conjointement avec l'attribut global contextmenu.
-
L'élément style a un nouvel attribut scoped, qui peut être utilisé pour activer des feuilles de style portées. Les règles de style dans un tel élément style ne s'appliquent qu'à l'arborescence locale.
-
L'élément script a un nouvel attribut appelé async, qui influe sur le chargement et l'exécution du script.
-
L'élément html a un nouvel attribut appelé manifest, qui pointe une liste de cache d'application utilisée conjointement avec l'API pour des applications Web hors connexion.
-
L'élément link a un nouvel attribut appelé sizes. Il peut être utilisé conjointement avec la relation icon (définie au moyen de l'attribut rel) pour indiquer la taille de l'icône référencée.
-
L'élément ol a un nouvel attribut appelé reversed pour indiquer que la liste est en ordre décroissant quand il est présent.
-
L'élément iframe a deux nouveaux attributs appelés seamless et sandbox qui sont prévus pour du contenu en bac à sable, par exemple les commentaires de blog.