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

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

18Commentaires

  • Avatar_thumb
    Quentin Denoël

    le 22/04/2011 | #1

    Avec toutes ces informations, on ne peut résister à passer en HTML 5 ^^

  • Avatar_thumb
    Romain Calix

    le 22/04/2011 | #2

    Sa donne vraiment envi :)

  • Avatar_thumb
    jn Rostan

    le 22/04/2011 | #3

    <p>Il est effectivement temps de s'y mettre. <br />Pour ceux que ça intéresse et pour complêter ton article, un petit tableau publié par Smashing magasine <br /><a href="http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/" rel='nofollow'>http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/</a></p>

    • Avatar_thumb
      Vincent Chevalier

      le 22/04/2011 | #4

      Moi, y'a un truc qui me chicote. Je code le xHTML 1.0 depuis belle lurette, mais si je veux passer à HTML5, est-ce que j'aurai à ré-apprendre complètement mes trucs? Je n'ai pas trop suivi son évolution.

      Dans le fond, est ce que je pourrais coder comme du xHTML avec le DOCTYPE du HTML5?
      Ça reste assez flou dans mon esprit. Je vous prierais de m'expliquer parce que ça m'intéresse de me réformer maintenant. Je veux aussi être certain que le HTML5 n'aura pas d'effets négatifs sur certains navigateurs, ou l'effet contraire...

      Merci!

    • Avatar_thumb
      Quentin AUPETIT

      le 22/04/2011 | #5

      <p>Le problème de l'HTML5 c'est qu'on peut trouver autant de raisons de ne PAS l'adopter tout de suite. <br />Des dires mêmes de la W3C, ils est plus sage d'attendre une validation plus approfondie de la norme.</p> <p>Alsacréation publiait justement un article cette semaine faisant le point sur l'accessibilité du HTML5 : <a href="http://www.alsacreations.com/article/lire/1203-etat-des-lieux-accessibilite-html5.html" rel='nofollow'>http://www.alsacreations.com/article/lire/1203-etat-des-lieux-accessibilite-html5.html</a></p>

    • Avatar_thumb
      Simon ALBRIEUX

      le 22/04/2011 | #6

      <p>Html 5 n'est pas encore fini et il y a encore pas mal d'incompatibilité sur le navigateur. <br />Voici un très bon site qui récapitule tout ca : <a href="http://www.html5test.com/" rel='nofollow'>http://www.html5test.com/</a> <br />En résumé je pense qu'il faut commencer à s'intéresser au html5 pour être prêt au moment venu.</p>

    • Avatar_thumb
      Liana DA SILVA

      le 22/04/2011 | #7

      <p>Merci pour cet article.</p> <p>Je vous conseil aussi le très bon site pour une introduction au HTML5 et au CSS3: </p> <p><a href="http://www.html5-css3.fr/" rel='nofollow'>http://www.html5-css3.fr/</a> </p>

    • Avatar_thumb
      birdy

      le 22/04/2011 | #8

      @Vincent Chevalier : a quoi bon coder en xHTMl lorsque celui-ci n'est pas délivré avec le MIME type approprié et donc interprété comme de l'HTML (par IE notamment) ?

    • Avatar_thumb
      jerome

      le 22/04/2011 | #9

      en effet l'html 5 va nous simplifier la vie pour beaucoup de choses. Par contre je pense que pour l'instant il faut l'utiliser avec parcimonie ou en connaissance de cause car la compatibilité avec les navigateurs est loin d'etre complete. De plus cela peut poser pas mal de problemes au niveau de l'ergonomie et de l'accessibilité pour le moment.

    • Avatar_thumb
      Fred

      le 23/04/2011 | #10

      Très bon article, merci pour ce petit pense-bête :)

    • Avatar_thumb
      Jeff BOCQUILLON

      le 23/04/2011 | #11

      @Quentin AUPETIT
      Le HTML5 doit selon le W3C passer de la spécification à « recommandation candidate » en 2012, c’est-à-dire être fin prête dans le discours normatif.
      Ensuite selon certaines informations, l’HTML5 obtiendrait le statut de " proposition de recommandation " en 2022.

      Attention l'auteur de l'article sur Alsacréation ne dit pas qu'il faut attendre, mais faire attention à l'accessibilité de certaines balises !

      • Avatar_thumb
        STPo

        le 23/04/2011 | #12

        Microsoft n'a pas attendu IE9 pour "s'intéresser" aux standards, le boulot abattu sur IE8 sur point a notamment été très important. La différence avec IE9 c'est qu'il commence à presque se battre sur les mêmes sujets que la concurrence (alors que jusqu'à présent il se contentait juste de rattraper son énorme retard). Pour le reste, oui on peut adopter dès à présent des choses de HTML5 oui (son Doctype par exemple), mais c'est vraiment fonction des projets (pour des problématiques d'accessibilité, de nécessité de support JS, etc.).

      • Avatar_thumb
        Quentin AUPETIT

        le 26/04/2011 | #13

        @Jeff
        En effet, l'état des spécifications et l'accessibilité sont deux choses distinctes et je ne faisais pas le pont entre les deux mais juste une illustration de l'état "en chantier" du HTML5 vis à vis de l'accessibilité. Mais ce n'était qu'un exemple.

      • Avatar_thumb
        Franck (Webdesigner Freelance HTML5)

        le 29/04/2011 | #14

        C'est clair que c'est encore trop tôt pour utiliser toutes les fonctionnalités de HTML5 vu que trop peu sont adoptées sur l'ensemble des navigateurs. Pour ce qui est de l'attribut "banner", personnellement j'éviterais de l'utiliser pour ne pas voir son contenu bloqué par AdBlock.

      • Avatar_thumb
        Mould Maker

        le 29/04/2011 | #15

        I am not so know about #6, You can add a purpose to your tags to reinforce your document's semantic , Is that I can use tags like : <main></main>,<note></note><search></search> ?

      • Avatar_thumb
        Creatif Web Design

        le 06/05/2011 | #16

        Bon récap sur le html5, merci et jolie page en html5 !

      • Avatar_thumb
        Metallizer

        le 12/05/2011 | #17

        J'ajoute ma pierre à l'édifice, bien qu'on puisse rendre IE fonctionnel avec les nouvelles balises HTML 5, j'ai remarqué que si on souhaite proposer une feuille de style pour l'impression, elle peut partir en vrille étant donné que la fonction javascript createElement n'aura pas été prise en compte au moment de l'impression et que ces balises sont complètement ignorées par IE. Pour moi, il vaut mieux ne pas compter sur les nouvelles balises pour la structure d'un document.

      • Avatar_thumb
        Régis ( Helpmedia )

        le 24/05/2011 | #18

        Bonjour à tous :) En ce qui concerne le ref, ca ne devrai pas changer grand chose, on aura encore les balise strong j'espère ^^ La balise marquee sera elle aussi encore prise en compte ? C'est pas super joli mais ca peut aider pour faire apparaitre des news en défilement par exemple.

      Ecrire un commentaire

      captcha

      Ouvrir