Après une longue hésitation concernant le contenu de cet article consacré au HTML 5, je me suis finalement résolu à vous donner 10 bonnes raisons de l’adopter, plutôt que d’entrer dans une longue et fastidieuse analyse et explication des nouvelles balises et attributs.
Vous trouverez de nombreuses ressources sur le web.
1 - Le doctype est des plus simple à déclarer :
<!DOCTYPE html>
2 - Idem pour l’encodage :
<meta charset="UTF-8">
au lieu de :
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
franchement on peut pas faire plus court.
au lieu de :
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
franchement on peut pas faire plus court.
3 - Même avec Internet Explorer ça marche
(le navigateur qu’on aime haïr) il suffit simplement d’ajouter le script suivant dans la balise <head> qui permet d’afficher correctement nos nouvelles balises sur toutes les versions de IE inférieur à IE 9:
<!--[if lt IE 9]>
<script>
document.createElement("header");
document.createElement("section");
</script>
<![endif]-->
<!--[if lt IE 9]>
<script>
document.createElement("header");
document.createElement("section");
</script>
<![endif]-->
Ou mieux encore, utilisez le script Modernizr qui vous permet de déclarer les balises HTML5 mais aussi avoir une alternative pour les balises CSS3 pour pouvoir avoir une parade pour les afficher correctement.
4 - La structure de la page est plus simple
Grâce aux nouvelles balises structurelles votre document est structuré sémantiquement de la façon suivante :
<header> : en tête de page ou de section, il n’est pas définit par sa position mais par son contenu c’est à dire un groupe d’introduction ou de navigation,
<nav>: liens de navigation principales
<section> : pour regrouper du contenu de manière thématique,
<aside> : contient un contenu différent du contenu principal
<footer> : contient des informations au sujet de l’élément qui le contient : auteur, informations de copyright, liens vers des contenus apparentés
<header> : en tête de page ou de section, il n’est pas définit par sa position mais par son contenu c’est à dire un groupe d’introduction ou de navigation,
<nav>: liens de navigation principales
<section> : pour regrouper du contenu de manière thématique,
<aside> : contient un contenu différent du contenu principal
<footer> : contient des informations au sujet de l’élément qui le contient : auteur, informations de copyright, liens vers des contenus apparentés
Attention il existe d’autres balises.
5 -Le HTML5 est un remède efficace contre la divite aiguë !
6 - Vous pouvez ajouter l'attribut "rôle" à ces nouvelles balises afin de renforcer la sémantique de votre document :
main : définit le contenu principal d'un document
secondary : représente une section unique et secondaire du document,
navigation : définit le menu de navigation du document,
banner : située en haut de page, elle contient habituellement le logo de la société, les éléments publicitaires,...
contentinfo : informations à propos du contenu de la page : notes, copyrights, mentions légales, ...
definition : représente la définition d'un élément
note : correspond à une note entre parenthèse ou de bas de page
seealso : indique que l'élément contient des données contextuelles au contenu principal de la page
search : un formulaire de recherche.
7 - Il permet l’ajout de rich media comme l’audio et la vidéo
Sans passer par un plugin (Flash par exemple) avec les balise <audio> ou <video>. Ainsi vos médias sont parfaitement audibles et visibles sur l’ensemble des Smartphones du marché. Il ne reste plus qu’aux différents navigateurs à se mettre d’accord sur un codec vidéo standard.
8 - Des formulaires plus élégants
Et plus conviviaux avec des attributs utiles pour l’internaute :
placeholder : pour afficher du texte de substitution dans un input ,
required : qui empêche les navigateur de valider un formulaire dont un champ requis n’a pas été rempli
autocomplete : pour laisser par défaut ou pas le remplissage automatique de formulaire, utile si on souhaite désactiver le remplissage automatique de certains champs sensibles (identifiants bancaires par exemple)
required : qui empêche les navigateur de valider un formulaire dont un champ requis n’a pas été rempli
autocomplete : pour laisser par défaut ou pas le remplissage automatique de formulaire, utile si on souhaite désactiver le remplissage automatique de certains champs sensibles (identifiants bancaires par exemple)
Il existe encore de nombreux attributs forts utiles.
9 - Microsoft semble enfin comprendre la révolution HTML 5 et CSS3
Et commence à respecter les standards du WC3 avec la nouvelle version d’Internet Explorer 9. N’oublions pas que Microsoft Corporation est membre du W3C, l’organisme mondial qui émet les recommandations à suivre pour le web et que durant des années Microsoft ne respectait même pas ces recommandations (un comble !!!).
10 - Adoptez maintenant le HTML5
Plutôt que prendre le train en retard. En effet les web masters ont de plus en plus leurs mots à dire concernant le développement de l’internet de demain, c’est vous qui influencez l’adoption de tel ou tel langage, c’est vous qui façonnez le web et non les éditeurs d’applications !
Au plus vous rendez l’internet accessible et convivial aux internautes au plus vous aurez d’influences sur les pratiques de ce média.
