• A la une
  • Catégories
  • Dossiers
  • +

10 raisons d'adopter le HTML 5

par Jeff BOCQUILLONle 22/04/2011

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.

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]-->

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

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)

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.

A lire :
http://www.eyrolles.com/Informatique/Livre/html5-pour-les-web-designers-9782212128611
http://www.eyrolles.com/Informatique/Livre/css3-pour-les-web-designers-9782212129878


  • Partager l'article en 1 clic !

    N'hésitez pas à aider le BlogDuWebdesign
Avatar_thumbAuteur : Jeff voir son blog

Free-lance depuis 10 ans, j'ai fondé le studio Blue room et Papangue Project.

Devenez membre !

Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus

Créer mon compte
twitter birdtwitter birdtwitter birdtwitter birdtwitter bird
twitter bird
Ouvrir