HTML5 & CSS3

Qu’est ce que le HTML5 ?

Le HTML est un langage de balisage qui permet aux navigateurs internet d’afficher le contenu des pages web et les structurer.  

 

Apparu dans les années 90, le HTML est un langage se reposant sur le principe de balises, largement inspiré du XML. Le HTML a connu plusieurs évolutions jusqu’à sa version 4 (HTML4.01), en 1997. 
Malgré une évolution constante du web, HTML4.01 restera pendant plus de 10 ans le standard le plus utilisé en développement de sites internet.

 

Un nouveau standard du Web

C’est en 2008 qu’un nouveau standard web voit le jour : les principaux acteurs du marché travaillent sur la mise en place du HTML5, afin de répondre au mieux aux besoins du web.

 

Bien qu’HTML 5 soit un standard toujours en développement, il composera bientôt la majorité du web. Mais le changement ne sera pas brutal et à peine perceptible : actuellement, des éléments du HTML 5 sont déjà utilisés sur de nombreux sites (Gmail, Facebook, Twitter…)


En 2011, 34 sites internationaux étaient développés en HTML5 parmi les 100 plus importants. Aujourd'hui, plus de 50% des développeurs d'Europe, d'Asie et des États-Unis utilisent HTML5 pour le développement mobile.

 

A quoi sert le HTML5 ?

A remplacer le Flash dans bien des cas.

HTML5 est conçu pour être sémantique et indépendant pour lui permettre de s'affranchir des contraintes de certaines architectures et qu'il devienne un vrai standard universel. En effet, avec l’évolution du web, il est important d'enrichir le nombre de contrôles disponible nativement (sliders, input vocal, etc). L’ajout de ces contrôles permettra de se défaire de Flash et par ce biais, gérer plus de plates-formes de diffusion.

Aujourd’hui, le web sur mobile et tablette représente une part importante de la navigation, et elle continuera à augmenter dans les années à venir, avec l’évolution technologique des smartphones et des tablettes tactiles. Dans cette optique, le HTML5 peut gérer nativement (adieu l’installation des plug-ins externes et autres programmes, lecteurs…) de la vidéo, des sons, des images vectorielles, des animations ou des jeux, la géolocalisation ou encore les périphériques tels que micro ou webcam.

 

A créer de véritables applications Web

HTML5 fera évoluer notre vision du web. La toile ne sera plus une succession de pages et de liens, mais les sites deviendront de réelles applications web : plus de plug-ins externes tel que Flash, compatibilité avec n’importe quel appareil, accessibilité maximale !

 

 


 

Les navigateurs, et donc les internautes, sont prêts.

Nous utilisons HTML5 pour les bonnes raisons.

Chez Eskis nous avons observé les tendances du HTML5 longuement avant de prendre la décision stratégique de l'utiliser dans nos réalisations. Nous étions prêts, mais les internautes ne l'étaient pas encore. Pourant, depuis 2012, pas de doute, on peut y aller! Et c'est ce que nous faisons, en veillant toutefois à ce que des utilisateurs qui n'auraient pas un navigateur compatible HTML5 ne soient pas pénalisés s'agissant du contenu et des fonctionnalités principales de nos sites et applications.

 

Tout est une question de navigateur.

Pour bénéficier des avancés techniques de HTML5, il faut avant tout posséder un navigateur web compatible. En effet, ce sont les navigateurs qui doivent s’adapter à l’évolution du standard du web et ainsi permettre à l’internaute de profiter pleinement des améliorations apportés. Il existe plusieurs navigateurs mais tous doivent être mis à jour pour supporter HTML5 :

  • Google Chrome, Apple Safari et Mozilla Firefox sont normalement mis à jour automatiquement et implantent de nouvelles fonctionnalités HTML 5 à chaque version

  • Internet Explorer est compatible avec HTML 5 qu’à partir de sa version 9

    En revanche, Internet Explorer 8 interprète très mal les instructions HTML5, et les versions plus anciennes sont encore pires !
    Il est tout même possible d'améliorer leur compatibilité en utilisant Google Chrome Frame

  • En ce qui concerne les téléphones mobiles et les tablettes, le HTML5 est en général très bien supporté
 

 

 

 

Comparatif entre les différents navigateurs actuels.
La ligne "Current" correspond à la dernière version sur le marché des navigateurs.

source: caniuse.com

 

Combien d'internautes sont lésés quand on utilise HTML5 ?

Avant d'utiliser HTML5 dans nos sites Internet on a calculé quel pourcentage d'internautes pouvaient être lesés par ce choix.
Ce sont uniquement les internautes qui n'ont pas mis à jour leur navigateur depuis des années. Malheureusement il y en a, nottament dans les entreprises où les services informatique empêchent les utilisateurs de faire des mises à jour et ne le font pas eux-mêmes.


Evidemment, le temps joue pour nous et ces chiffres ne pourront aller qu'en s'amenuisant.

 

En fait il est difficile d'avoir des chiffres récents et fiable qur les explorateurs et leurs versions utilisés par les internautes. 
Par exemple sur Wikipedia, on voit bien que les chiffres varient beaucoup selon les sources.


Ce qu'on peut dire, c'est que les utilisateurs de Internet Explorer 8 (qui n'ont donc pas mis à jour leur navigateur depuis 4 ans) ne bénéficieront pas d'une expérience de navigation optimale. Combien sont-ils ?  En février 2013, IE8, représentait, selon Wikipedia, 7% des utilisateurs en France.
Vous trouverez des chiffres à jour sur StatCounter qui nous donne 5% d'utilisateurs d'IE 8 en France en Juillet 2013.

   
   

Simplicité et sémantique

Un atout pour le référencement naturel

Il est impossible de parler de HTML5 sans parler du Web sémantique. Évolution direct du web actuel (dit Web syntaxique), le Web sémantique (ou intelligent) a été créé par Tim Berners-Lee en 2001. Le principe est simple : les informations qui émanent du Web ne seraient plus stockées mais réellement comprises par nos ordinateurs, afin de permettre à l’utilisateur de trouver ce qu’il cherche vraiment. Il serait donc possible de rendre le contenu des ressources du Web compréhensible non seulement par l’homme mais aussi par la machine.

Bien que nous soyons encore loin d’un Web 100% sémantique, HTML 5 en ouvre les portes, grâce à l’intégration de balises (ou tags) avec une notion sémantique permettant aux moteurs de rechercher de mieux identifier leurs contenus.

De ce fait, si un développeur parvient à baliser son contenu avec la sémantique adéquate, le contenu du site sera mieux identifié, mieux compris par les moteurs de recherche. Et donc plus facilement visible. Ainsi, le référencement naturel (ensemble de techniques et de savoir-faire permettant à une page web d'être en première position sur les résultats de recherche des moteurs de recherche, sans passer par un système payant de promotion ou de sponsorisation.) prendra d’autant plus d’importance.

Des nouveaux outils pour les développeurs

Le HTML5 propose également un ensemble d'outils destinés à faciliter la vie des développeurs :

  • Nouveaux éléments multimédias (balises 
  • Nouveaux éléments structurels (balises,,,…)
  • Nouvelle sémantique pour l'internationalisation (l’attribut translate)
  • Nouveaux types de relations de liens
  • Nouveaux attributs pour de nombreuses balises
  • Nouveaux types de formulaires
  • Nouvelle syntaxe de microdonnées pour la nouvelle sémantique (manière d'ajouter des informations à la base HTML existante, fournissant un vocabulaire plus riche et plus précis que ce que peut fournir le HTML.)
  • Système de géolocalisation utilisable via une API d'un navigateur. Cela permet aux pages web d'interroger le navigateur sur la position géographique de l'utilisateur. L'API de base permet d'obtenir les coordonnées en latitude et en longitude ainsi que l'altitude. Celles-ci peuvent alors être exploitées par le biais d'une carte (de type Google Map).

 

Ainsi, avec cette sémantique affirmée, HTML5 tend à simplifier l’usage d’HTML, en permettant à tout un chacun de comprendre l’architecture, la structure de son site.

   

 

 

Et le webmarketing dans tout ça ?

HTML5 propose non seulement de mieux intégrer des fonctionnalités interactives (canvas, drag & drop…) mais aussi des contenus plus riches. Lisible depuis les navigateurs mobiles, HTML5 pourra être utilisé dans un cadre d’opérations de marketing mobiles. HTML5 permettra notamment de proposer des publicités et des applications plus interactives.

HTML5, à contrario des plates-formes publicitaires fermées et propriétaires (Flash…), est standard ouvert. Il est sur le point de changer l’industrie du marketing mobile de plusieurs façons :

  • Vitesse de développement : Fini les allers-retours entre les réseaux publicitaires et les éditeurs tiers. Grâce à HTML5, un éventail de propositions pourra être présenté sans passer par le long processus d’approbation qui est habituellement associée aux Stores (« magasins d’applications » : App Store pour iPhone, Google Play pour Androïd…). De plus, il sera plus facile de compléter/changer/remanier un ensemble d’annonces déjà existantes.
  • Accessibilité : HTML5 est le nouveau standard du web. De ce fait, TOUT navigateur se doit de l’intégrer. Et c’est déjà le cas pour les navigateurs mobiles ! Les principaux systèmes d’exploitation mobiles comme iOS et Android sont déjà compatibles avec HTML5 et toutes les plates-formes de smartphones devraient le soutenir bientôt.
  • Tracking : Il est important pour les commerçants/entreprises de suivre leurs annonces afin d’en déterminer l’impact. Les annonces conçues en HTML5 peuvent être facilement suivies (grâce à divers dispositifs et technologies), analysées et surveillées. Ainsi, il est possible augmenter l’efficacité et la fiabilité des annonces grâce à la génération d’un rapport de suivi.
  • Flexibilité de conception et légèreté : HTML5, c’est aussi pouvoir concevoir des annonces légères, rapides et fiables. C’est aussi pouvoir concevoir avec une plus grande liberté de développement, en n’étant pas limité par la lourdeur et la rigueur des plateformes publicitaires fermées. HTML5 utilise principalement le navigateur comme le moteur de rendu, ce qui allège considérablement les demandes en ressources système. Ceci est particulièrement idéal pour les appareils mobiles dotés de ressources limitées.

La polyvalence de HTML5 est un atout primordial pour le marché mobile, où les annonceurs peuvent inclure de l’audio et la vidéo facilement. Aujourd’hui, transformer son site web en application pour mobile est de plus en plus fréquent. HTML5 assure une navigation rapide et fluide sur les Smartphones et donne aux consommateurs un contenu multimédia riche ainsi qu’aux entreprises plus de contrôle sur leur présence (produits adaptés, applications évolutives, mises à jour facilitées…) dans le monde du web mobile.

 


Sources : caniuse.com | Wikipedia | StatCounter | l'ouvrage "HTML5 pour les Web designers" de Jeremy Keith chez "A Book Apart" | "Web design" magazine |

Article co-rédigé par Anouk PITAT. Mise à jour Décembre 2013.