Introduction à l’HTML5

Introduction à l'HTML5
Cet article est destiné aux débutants en HTML5, et à tous ceux qui souhaitent en savoir un peu plus sur cette nouvelle technologie qui agite le web et le monde mobile.
Si vous vous intéressez aux technologies du web, vous avez probablement déjà entendu parler de l’HTML5 aux cours des dernières années. Cette introduction va vous donner un premier aperçu de ce qui se cache derrière le terme HTML5, vous présentera le contexte dans lequel évolue cette technologie, et nous verrons un bon nombre de nouvelles fonctionnalités qu’il apporte.

Sommaire :

L’HTML5 c’est quoi ?

L’HTML5 n’est pas…

Tout d’abord, je suis convaincu que parmi vous certains se disent :

L’HTML5, c’est un nouveau langage ?

Ou encore :

Je débute, j’ai envie d’apprendre l’HTML5 directement, ça a l’air mieux que l’HTML d’avant.

Voire :

Pfff, moi qui venait d’apprendre l’HTML, je vais devoir tout réapprendre…

Il est grand temps de clarifier les choses :

L’HTML5 n’est pas un nouveau langage. On ne peut donc pas non plus commencer par “directement apprendre” l’HTML5, et enfin vous n’aurez pas à tout réapprendre.

L’HTML5 est…

L’HTML5 est une évolution de l’HTML 4.01 (et de l’XHTML 1.0), c’est à dire que tout ce que vous savez faire en HTML reste valide.
Cette évolution consiste en une multitude de nouvelles fonctionnalités qui ont été apportées au langage HTML ainsi qu’au Javascript.
Si vous savez faire de l’HTML “classique” vous devrez donc apprendre à manipuler ces nouvelles fonctionnalités. Si vous ne savez pas, je vous conseille l’excellent SiteDuZero, qui constitue un point de départ solide pour l’apprentissage de l’HTML et du CSS.

Nous allons voir un aperçu de certaines de ces nouveautés apportées par l’HTML5, mais tout d’abord, commençons par nous intéresser aux gens qui travaillent dessus !

Le W3C et le WHATWG

Le W3C (World Wide Web Consortium) est l’organisation qui s’occupe de standardiser le web. Elle est constituée d’un ensemble de membres actifs qui réfléchissent à l’évolution des standards tels que l’HTML et le CSS. Ils discutent par exemple des bonnes pratiques à employer pour écrire son code HTML, ou encore de nouvelles balises qu’il serait intéressant d’ajouter au langage. Le W3C travaille donc à l’élaboration du standard qu’est “l’HTML5”.

Seulement voilà, le problème c’est qu’une telle responsabilité présente un inconvénient majeur : la lenteur du processus. La conséquence de cette lenteur est la création d’un groupe de rébellion au sein du W3C, nommé le WHATWG (Web Hypertext Application Technology Working Group). Ce groupe est constitué principalement de développeurs des navigateurs tels que Mozilla, Opera ou Apple. L’approche est ici totalement différente puisque ce groupe est beaucoup plus ouvert et surtout a pour objectif d’accélérer la standardisation (ou du moins la mise en place de standards pour les navigateurs).

L’HTML5 est donc le fruit des travaux du W3C et du WHATWG.

Voyons sans plus attendre un petit aperçu de ce que nous ont concocté ces gens d’un point de vue du code HTML.

Les nouveautés dans le code HTML

Un allégement du code

Tout d’abord, certaines balises ont été simplifiées afin d’alléger le code.
C’est le cas par exemple du Doctype (la première ligne indigeste que vous copiez/colliez en haut de chaque page HTML), de la balise <html>, de la balise <meta> de l’encodage des caractères, et des balises de feuilles de style et de script.

Alors qu’auparavant on pouvait avoir ce genre de code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link rel="stylesheet" type="text/css" href="design.css" />
	<script type=”text/javascript” src=script.js"></script>
</head>
<body>
</body>
</html>

En HTML5, ça nous donne :

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="design.css" />
	<script src="script.js"></script>
</head>

Plutôt sympathique n’est-ce pas ? De manière générale, on peut dire que l’HTML5 est beaucoup plus léger et laxiste sur l’écriture du code HTML. Un document HTML5 sera valide W3C même si vous écrivez vos balises en majuscules, ou si vous n’écrivez pas le / de fermeture d’une balise auto-fermante telle que <img />. La philosophie est donc à présent de laisser chacun adopter le style de code qu’il préfère. Ce choix est assez contestable mais il ne tient qu’à nous de conserver les bonnes pratiques adoptées grâce à l’XHTML1.0.

Les nouvelles balises sémantiques

L’HTML5 introduit également un ensemble de nouvelles balises afin de donner plus de sémantique (de sens) à nos pages. Par exemple, au lieu d’utiliser une <div> avec un id=”header”, nous pouvons utiliser tout simplement la balise <header>. Parmi ces balises sémantiques on trouve entre autres

  • <header> : Qui indique que l’élément est une en-tête
  • <footer> : Qui indique que l’élément est un pied-de-page
  • <nav> : Qui indique un élément de navigation tel qu’un menu
  • <aside> : Qui correspond à une zone secondaire non liée au contenu principal de la page
  • <article> : Qui représente une portion de la page qui garde un sens même séparée de l’ensemble de la page (comme un article de blog par exemple)

Ces noms n’ont pas été choisis au hasard. Google a fourni au W3C les chiffres de la fréquence d’utilisation de tous les id utilisés sur les sites indexés par le moteur de recherche, et ceux-ci font partie de ceux qui sont les plus employés.

Ouais c’est bien beau tout ça, mais bon, l’utilisateur s’en fiche lui, il ne voit rien de tout ça. Tu n’as rien de plus palpitant ?

On y arrive ! Croyez-moi, si l’HTML5 n’était qu’une histoire de remplacement de divs par de nouvelles balises, on n’en entendrait pas autant parler ! Voyons maintenant quelles sont les 3 nouvelles balises les plus séduisantes.

Les balises multimédia

<video>
Cette balise intègre directement un lecteur vidéo dans la page, avec des boutons Lecture, Pause, une barre de progression, du volume… Un vrai petit Youtube intégré à votre page et natif au navigateur !
Lecteur Vidéo HTML5
<audio>
Cette balise est l’équivalent de la balise video mais pour l’audio. En 3 lignes de code vous avez un lecteur MP3 !
Nous pouvons d’ailleurs voir sur l’image ci-dessous que chaque navigateur utilise un design qui lui est propre pour styliser son lecteur. Dans tous les cas il vous est possible de créer votre propre design si vous préférez un rendu uniforme quel que soit le navigateur utilisé.
Lecteurs audio HTML5
<canvas>
Cette balise est probablement la plus prometteuse de toutes, puisqu’il s’agit d’une surface sur laquelle il est possible de tracer des formes et de les animer. En résumé… C’est dans cette zone que sont réalisées des animations ou des jeux.
Canvas HTML5
Les possibilités offertes par la balise canvas sont immenses, et couplé avec le standard WebGL de rendu graphique 3D, on obtient des résultats impressionnants au sein même du navigateur.
Un projet de portage du jeu Quake 2 a été réalisé par 3 employés de Google afin de démontrer le potentiel de cette technique :

Des formulaires améliorés

Enfin parmi les nouveautés côté HTML on peut également citer une évolution des formulaires.
Il est possible de spécifier de toutes nouvelles valeurs dans le champ “type” des balises input, afin d’indiquer le type de contenu du champ. C’est particulièrement utile afin d’effectuer une première validation du contenu avant l’envoi des informations au serveur.
C’est également très important pour la navigation depuis un smartphone, qui affichera un clavier adapté selon le type de contenu.

Par exemple, pour le champ input suivant :

<input type="tel" />

On aura le clavier suivant sur un iPhone :

Clavier iPhone HTML5 form tel

Ou sur un Android :

Pour le champ suivant :

<input type="url" />

Un iPhone affichera ce clavier adapté aux URLs :

Clavier iPhone HTML5 form url

Il existe bien d’autres nouveautés pour le code HTML, mais je pense que c’est suffisant pour une première introduction. Passons maintenant au Javascript.

Les nouveautés dans le code Javascript

Il est loin le temps où le Javascript était une sale bête noire détestée… L’apogée de l’AJAX et du web 2.0 ainsi que des bibliothèques Javascript telles que jQuery a rendu son utilisation bien plus agréable et efficace. De plus, de moins en moins d’utilisateurs désactivent le Javascript et il est même souvent impossible de le désactiver sur certains navigateurs.
C’est dans ce contexte que le Javascript a été propulsé vers l’avant avec l’HTML5. L’API Javascript (les objets et les méthodes utilisables) a été généreusement enrichi avec de nouvelles fonctionnalités. En voici quelques unes :

Le Local Storage

Le Local Storage est une manière élégante de stocker dans le navigateur des informations facilement. Par exemple, pour écrire puis lire une valeur dans le Local Storage il suffit d’écrire :

localStorage.setItem("name", "John");     
alert(localStorage.getItem("name"));

La variable sera toujours disponible si l’utilisateur ferme puis ré-ouvre son navigateur. L’utilisation du Local Storage est proche de celle des cookies, mais contrairement aux cookies, ces informations ne sont jamais communiquées au serveur. Elles sont ainsi particulièrement adaptées aux applications offline.

La géolocalisation

Il ne s’agit pas strictement d’une spécification de l’HTML5, mais elle y est souvent associée.
Il est possible grâce à l’API de géolocalisation d’accéder aux coordonnées de l’utilisateur si celui-ci a accepté de partager sa position via le bandeau s’affichant en haut de page :

Barre d'autorisation de partage de la géolocalisation en HTML5

On peut alors très facilement disposer d’informations telles que :

  • La latitude, la longitude, et l’altitude de l’utilisateur
  • Son orientation par rapport au Nord
  • La vitesse à laquelle il se déplace

Le Drag and Drop

Il est également possible d’effectuer des “glisser-déposer” dans une page web. Cette fonctionnalité n’aura donc plus besoin d’être visuellement émulée par des bibliothèques Javascript tierces mais sera présente nativement dans l’API Javascript. Par exemple, si l’on souhaite pouvoir déplacer un élément d’une liste, il suffit de déclarer cet élément avec l’attribut “draggable” à true :

<li draggable="true">Element de ma liste</li>

Définir une zone potentielle de destination :

<div ondrop="drop(this, event)">

Puis ensuite effectuer le traitement Javascript correspondant :

function drop(target, e) {
	// Traitement
}

Bien entendu, l’utilisation de bibliothèques telles que jQuery est préférable à l’injection de code Javascript dans l’HTML.

Les Web Sockets

Il s’agit là d’un nouveau protocole ambitieux de communication avec le serveur. Un navigateur ne peut habituellement qu’effectuer des requêtes au serveur puis recevoir sa réponse. C’est une communication unidirectionnelle (dite par canal simplex). Les Web Sockets apportent la communication bi-directionnelle (dite full-duplex) entre le client et le serveur.
Pour prendre un exemple un peu plus concret, demandez-vous comment vous réaliseriez une page dont le contenu devrait toujours être à jour (comme un chat par exemple) ?

Euh… On vérifierait s’il y a eu des changements sur le serveur toutes les n secondes en AJAX ?

Effectivement c’est une des premières idées auxquelles on pourrait penser ! Ce qui reconnaissez le, est particulièrement sale. Le client travaille, le serveur travaille, et la plupart du temps il n’y a rien à mettre à jour. Sachez cependant qu’il existe d’autres méthodes plus efficaces mais qui ne sont toujours pas idéales. C’est là que les Web Sockets nous sauvent la mise ! Le serveur va pouvoir nous envoyer les changements dès qu’ils se produisent, et le tout est effectué dans une requête spéciale dépourvue d’en-têtes HTTP ! C’est à dire que les données téléchargées sont ultra légères et ne contiennent que l’information qui nous intéresse. Pas mal non ?

Il existe encore de nombreux autres enrichissements de l’API Javascript avec l’HTML5, et chacun d’entre-eux fera l’objet d’un article sur ce site.

Ok, j’ai bien compris que l’HTML5 était plein de bonnes choses mais… en fait, ça sort quand ?

L’HTML5 ça sort quand ?

Haha, si on s’en tenait à attendre la date de “sortie officielle” correspondant à la recommandation du W3C, nous aurions tous des cheveux blancs avant de nous y mettre !

L’HTML5 n’est pas un “gros pack” avec une date de sortie. Il s’agit d’une multitude de petits modules étant élaborés et développés séparément. Par conséquent, certains sont déjà “sortis” et d’autres ne le sont pas encore.

Ouais d’accord, donc comment je fais pour utiliser ceux déjà sortis ? Je les trouve où ?

De la même manière que pour tout ce que l’on utilise déjà sans se poser de questions avec l’HTML habituel, les nouveautés de l’HTML5 sont situées tout simplement… dans les navigateurs des visiteurs de votre site.

Une affaire de navigateur

Les standards du web évoluent constamment, grâce au W3C et au WHATWG. Mais rien ne sert d’élaborer des standards si les navigateurs n’implémentent pas ces standards.

Prenons un exemple. Si vous faites du CSS, vous savez que la couleur rouge correspond à la valeur hexadécimale #FF0000. Imaginons que le W3C décide alors de totalement changer son système de notation hexadécimale pour les couleurs et que le rouge s’écrive maintenant #FF#00#00. Que se passerait-il ?

  • Les navigateurs implémenteraient cette nouvelle notation dans leur dernière version,
  • Les utilisateurs ayant cette dernière version verront s’afficher la bonne couleur peu importe si elle est écrite avec #FF0000 ou #FF#00#00,
  • Les utilisateurs ayant une “ancienne” version ne verront s’afficher correctement que la couleur avec pour notation #FF0000,
  • … Et les développeurs hésiteront franchement à se mettre à la nouvelle notation, puisqu’elle risque de mal s’afficher chez leurs clients utilisant des versions anciennes des navigateurs.

On a donc une phase de transition sensible qui se déroule entre l’implémentation de la fonctionnalité par les navigateurs et son adoption par les développeurs.

Et donc en ce moment c’est la même chose avec l’HTML5 ?

En quelque sorte ! L’HTML5 étant constitué de nombreux petits modules, certains sont déjà assez largement implémentés par les navigateurs pour être utilisés sans crainte par les développeurs.
Pour les autres, il suffit de prévoir une solution alternative au cas où le visiteur utilise un ancien navigateur.

Dans le cas de notre exemple avec la couleur rouge, si un développeur souhaite utiliser la nouvelle notation, il peut utiliser les 2 notations conjointement de manière à ce que tous les navigateurs, modernes ou anciens, l’affichent correctement. C’est typiquement le genre de raisonnement qu’il faut adopter si l’on veut passer à l’HTML5.

D’accord, et donc actuellement quels navigateurs supportent les fonctionnalités de l’HTML5 ?

Tous les navigateurs modernes (Firefox, Chrome, Safari, Opera, ainsi que les navigateurs Android et iPhone / iPad) implémentent de nombreuses fonctionnalités de l’HTML5. Il existe plusieurs sites qui référencent la compatibilité de chaque navigateur avec chaque fonctionnalité. Je vous conseille le très complet CanIUse.com ou findmebyIP.
On y voit qu’Internet Explorer gère très peu de fonctionnalités HTML5.
CanIUse HTML5 et CSS3
findmebyIP HTML5 et CSS3

Internet Explorer 9

Microsoft, qui a toujours été peu respectueux des standards du web, a décidé de corriger le tir avec Internet Explorer 9. Un effort a été en particulier fait sur le support de fonctionnalités HTML5. Certaines manquent à l’appel, mais c’est dans l’ensemble un énorme pas en avant.

Donc la sortie d’Internet Explorer 9 marquera le début de l’adoption de l’HTML5 ?

Disons qu’elle va rassurer un bon nombre de développeurs, qui couvriront alors une plus grande part d’utilisateurs. Mais ne vous leurrez pas, tant qu’il y aura des utilisateurs d’IE8, IE7 et IE6, vous ne couvrirez jamais la totalité des utilisateurs. C’est pourquoi il est important de toujours penser à des solutions alternatives pour ces navigateurs.

Utiliser l’HTML5 dès maintenant

Donc au final on attend la sortie d’Internet Explorer 9 ? On attend que plus personne n’utilise IE6, IE7 et IE8 ? On attend la recommandation du W3C ?

Alors là je vous demande d’ouvrir bien grand les yeux et de vous entrer ça dans la tête :

On peut utiliser l’HTML5 dès maintenant !

Et j’en rajoute même une couche :

Ce n’est pas une blague, on peut vraiment l’utiliser aujourd’hui !

Si vous ne me croyez pas, jetez donc un oeil aux Doctypes de sites comme Youtube, Google, Apple, ou Gmail… Ou regardez simplement le code source de ce site ! L’HTML5 arrive doucement mais sûrement. Donc autant s’y former le plus tôt possible, pour avoir une longueur d’avance.

Vous qui lisez actuellement ces lignes, sachez que le plus dur est fait. Vous avez beaucoup de chance car nous avons atteint un stade de maturité suffisant pour pouvoir utiliser l’HTML5 dans de vrais projets. De plus, les nouveautés de l’HTML5 sont toutes indépendantes, et sont pour beaucoup d’entre-elles des améliorations non-critiques, qui ne présentent aucun risque à être utilisées en production.

De plus, des gens très talentueux ont créé pour nous de fabuleux outils pour pouvoir mettre en place dès maintenant et facilement des sites HTML5 fonctionnels. Nous aurons l’occasion de voir en détail le fonctionnement de certains d’entre eux tels que l’HTML5 Boilerplate, Modernizr, ou encore Selectivizr.

Bref, je vous demande de me croire sur parole, l’HTML5 ce n’est pas le futur, c’est le présent.

Et à vrai dire ça a déjà commencé depuis quelques temps donc il est grand temps de vous y mettre !

… Et le CSS alors ?

Et est-ce que le CSS3 a un rapport avec l’HTML5 ?

Ah je la sentais arriver cette question ! Effectivement j’allais y venir :

Le CSS3 correspond à un ensemble de nouveautés sur les feuilles de style. Mais attention, que ce soit bien clair : le CSS3 n’est pas forcément lié à l’HTML5 ! On associe facilement et abusivement les deux car on en entend parler à la même période, et que les navigateurs les implémentent en même temps, mais chacun fonctionne indépendamment de l’autre.

Comprendre : On peut styliser une balise <header> avec du code CSS2.1 et styliser une balise <div> avec du code CSS3.

Après avoir pris une petite pause (vous le méritez bien !) je vous invite à vous rendre sur l’Introduction au CSS3 qui est la suite logique de cette page.

Merci d’avoir lu jusqu’ici, j’espère vous avoir donné envie de vous plonger au coeur de cette nouvelle technologie, et si c’est le cas je vous invite à suivre régulièrement ce site qui va être particulièrement actif au cours des prochains mois.

A bientôt !

84 thoughts on “Introduction à l’HTML5

  1. Tres bons articles HTML5 es CSS3. Tres facile à comprendre. Bravo !
    Je me sens pousser des ailes pour “enfin” m’y mettre.
    Les 2 techniques sont tres bien dégrossies, et en plus avec un brin d’humour.
    Cela m’étonne de ne pas avoir lu plus de commentaires.
    Continue à nous faire des articles de cette sorte.
    -> Site partagé sur facebook.
    Bonne continuation.

  2. Bravo pour votre présentation !
    Je trouve toutes ces questions tout à fait captivantes et enthousiasmantes.
    je voudrais vous demander :
    1) s’il serait possible d’utiliser la balise audio de html5 en rendant le lecteur invisible et en déclenchant la lecture d’un son par un clic sur une image.
    2) j’ai regardé aussi votre blog sur mon ipod et j’en suis baba !
    (simplement le titre entier n’apparaît pas complètement en haut de page et la marge gauche des articles est un peu trop grande à mon avis). Pourquoi avez-vous utilisé la grille spécifiquement pour la version mobile ? Sur mon blog de dessins en wordpress, j’aimerais que les dessins apparaissent dans des tailles différentes selon qu’ils sont vus sur smartphone, ou bien sur ipad. Est-ce faisable à votre avis ? (Je l’aurai un jour ! je l’aurai !)
    MERCI beaucoup pour votre travail !
    cordialement,
    Pierre

    • Salut Pierre,
      Merci pour ce commentaire très enthousiaste !
      Concernant tes questions :
      1) Il est tout à fait possible de masquer un lecteur audio HTML5 (il suffit d’ailleurs de ne pas utiliser l’attribut “controls”), et utiliser l’API Javascript correspondante pour déclencher la lecture quand tu le souhaites. Cela donne quelque chose du genre document.getElementById(“id-de-mon-lecteur-invisible”).play(); que tu déclenches lorsque l’utilisateur clique sur l’image en question.
      2) En fait, j’ai utilisé CSSGrid pour gérer rapidement la version mobile sans trop y passer de temps. CSSGrid gère très bien les différentes tailles d’images selon la taille de l’écran (tu peux d’ailleurs essayer de réduire ou agrandir la page de leur site pour avoir une démo). Combiné avec quelques media queries CSS3 tu devrais trouver chaussure à ton pied.
      Bonne continuation en tout cas !

  3. super boulot ! et merci pour le partage et les explications très claires
    ça donne envie de s’y mettre d’ailleurs je commence cette nuit ;)
    on verra bien …
    je repasserai dans quelque temps

  4. Excellent , je pense que c’est de loin le meilleur travail que j’ai vu à ce sujet en Français. Nos amis d’Alsacreations ont également abordés le sujet mais cela s’étale sur plusieurs posts, ce qui rend la lecture plus pénible. Encore une fois bon travail !!

  5. Bravo pour l’article, vraiment très instructif par rapport au désert d’informations sur HTML5 actuellement.

    En attendant la suite, articles complémentaires, livres, etc…

    Merci et encore bravo

    Dominique

  6. Salut,
    j’ai adoré tes articles sur HTML5 et CSS3, et tu m’as motiver pour commencer l’apprentissage de XHTML et CSS.

    Cependant en essayant de valider mon CSS par W3C, j’ai découvert comment faire marcher les arrondis en une ligne:
    “border-radius: 10px 10px;”

    Il marche sur Opera, Firefox et Chrome, c’était juste une histoire de syntaxe.
    Monsieur RoZz

    • Salut MonsieurRoZz,

      Effectivement, cela fonctionne sur les dernières versions de Chrome et Firefox, cependant, afin d’assurer la rétro-compatibilité des versions antérieures, il est vivement conseillé de dupliquer cette ligne avec -webkit- et -moz- !

      Content que mes articles t’aient motivé en tout cas !

  7. Excellente introduction, le Html 5 est tout à fait génial même si la conversion des sites web s’annoncent plutôt lente. En effet si on veut faire du html 5 pur, il va falloir retirer ses id classiques et les remplacer par les nouvelles balises telles .

  8. Merci pour cet article clair et concis.
    Cela donne effectivement envie de s’y mettre mais en temps que débutante, les solutions alternatives par lesquelles il faut passer pour que les différents navigateurs affichent correctement est un vrai frein et un énorme casse tête ….. Je n’ai toujours pas trouvé un tuto très détaillé sur le sujet.
    J’ai partagé !

    • Lorsque tu auras un peu de temps à consacrer au sujet je te conseille de te renseigner sur les “CSS Reset” pour l’affichage identique sur les navigateurs puis sur “HTML5 Boilerplate” qui améliore la compatibilité cross-browser globale de ton site en fournissant un cadre de développement solide!

      Bonne continuation

  9. Juste une remarque : apprendre le html5 maintenant ce serait plutôt une idée pour éviter d’avoir un train de retard plutôt que prendre une longueur d’avance. ^_^

  10. Merci pour ces info que je cherchais vainement en achetant des bouquins. Mais j’ai une question plus tere à terre. Existe-t-il un logiciel pour les nuls comme moi, qui écrirait en HTML5, ma mise en page toute simple ? ça me permettrait d’insérer une formulaire simplement, plus les lecteurs video et audio … ce serrait le pied :-))
    D’avance merci.
    GUY

    • Salut Guy !

      Je ne sais pas tellement s’il existe des outils spécifiques pour construire graphiquement des interfaces HTML5, mais je pense que la plupart de ces éditeurs (dits “WYSIWYG : What You See Is What You Get”) commencent à prendre en charge l’HTML5. L’un des plus connus est Dreamweaver, et je pense qu’Adobe, qui édite ce logiciel, a pris soin de le mettre à jour avec HTML5.

  11. Google a fourni au W3C les chiffres de la fréquence d’utilisation de tous les id utilisés sur les sites indexés par le moteur de recherche, et ceux-ci font partie de ceux qui sont les plus employés.

    Bonjour Jonathan,
    pouvez-vous partager quelques liens sur ces stats ?
    Merci beaucoup

    • Salut Frederic,

      Honnêtement je ne me souviens plus des sources de cette information. Je l’ai lu dans plusieurs livres anglais sur HTML5 ainsi que sur le net, mais de là à retrouver les liens, ça va être difficile, désolé ! :)

  12. Très bon article pour commencer le HTML5,

    j’ai découvert quelques balises que je n’avais toujours pas rencontré sur les différents cours sur internet. Juste une précision, la balise Canvas est assez difficile à manipuler !!

  13. Bon article, tout comme le suivant sur les CSS3, c’est top pour avoir un aperçu global avant de se lancer :)

    Penses-tu faire un article sur les différents éditeurs (logiciels) pour faire de l’html5/css3 ? En connais-tu qui ont l’intellisense pour reconnaitre les nouveaux tags par exemple ? Merci encore

    • Merci desopedr !
      Eh bien tous les éditeurs dignes de ce nom (c’est à dire toutes les usines à gaz à la Eclipse, Visual Studio et compagnie) connaissent maintenant les tags HTML5. Il n’y a vraiment que les éditeurs ultra légers à la Notepad++ qui ne doivent pas encore les avoir (et encore ce n’est même pas sûr). Perso j’utilise Eclipse, dont il existe une variante appelée Aptana spécialement orientée web. Sinon la crème des crème c’est WebStorm par JetBrains, qui est très poussé niveau HTML5 / JavaScript et qui inclut même des libs comme jQuery. J’utilise Eclipse uniquement par flemme d’apprendre de nouveaux raccourcis, autrement je choisirais cet IDE :)
      Bonne chance !

  14. Salut Jonathan,

    Je me suis régalé à lire ton introduction,

    Je trouve dommage que tu n’ai pas fait de comparaison avec le XHTML 2 ou que tu n’ai pas parlé de certaines incohérences sémantique du à la rétrocompatibilité avec le HTML4.
    Je ne pense pas que ce soit un oubli mais que c’était pour ne pas rendre anxiogène l’article.

    Vas-tu publier des articles sur ces sujets ?

    Merci, continue, il est cool ton site.

    • Salut Jerome,

      Effectivement, cet article est une simple introduction, j’ai préféré ne pas trop entrer dans les détails.
      Concernant la publication d’articles à ce sujet, je ne pense pas. J’ai d’ailleurs de moins en moins de temps à consacrer à ce blog malheureusement.

      Merci pour ton commentaire en tout cas :)

  15. Bonjour,
    Pour la balise audio, vous dites : « Dans tous les cas il vous est possible de créer votre propre design si vous préférez un rendu uniforme quel que soit le navigateur utilisé. »
    Comment changer par exemple la couleur de la barre de progression qui est bleue dans google chrome?
    J’ai passé pas mal de temps et je ne trouve pas comment faire, j’ai essayé avec css : progressBar {background-color:black;} et ça ne fonctionne pas… comment se nomme cet élément de la balise audio?
    Merci

    • Salut Rivera,

      Pour obtenir un lecteur HTML5 customisé il va te falloir le créer avec tes propres “divs”!
      Voici un lien qui décrit comment faire en CSS3 avec jQuery, le résultat est plutôt convaincant. Il existe également de nombreux lecteurs HTML5 customisés disponibles sur le net, pour ne pas avoir à t’embêter à le faire toi-même. VideoJS en est un exemple.

      En espérant que ça t’aide :)

      • Merci pour ta réponse.
        J’ai en effet trouvé pas mal de liens proposant des lecteurs HTML5 sur le net.
        En fait, j’aurai aimé trouver les noms des différents éléments de “controls” (les boutons du lecteur audio), mais impossible de trouver… c’est dommage, ce serait tellement plus simple et surtout + léger.
        Bon je vais pas râler, HTML5 va surement évoluer et c’est déjà plutôt super!

        • Salut Véronique !
          Ce que tu souhaites faire me semble impossible car chaque navigateur propose un design totalement différent. Imaginons que l’un propose le volume à droite et l’autre le volume à gauche, que devrait-il se passer si tu souhaites modifier ce bouton de volume sur tous les navigateurs ? Il se pourrait même que l’un soit vertical et l’autre horizontal… Bref le design des implémentations n’étant pas standardisé, il faut passer par des divs et du JavaScript plutôt que d’essayer de styliser les lecteurs :)

  16. Bonjour

    Est-il préférable d’utiliser html5 ou xhtml5 (xhtml5 = html5 + xml) ?
    Si on a écrit son code en xhtml5, l’extension .xhtml est-elle indispensable ?
    (j’utilise BlueGriffon).

    Pascal

    • Salut Pascal,

      A vrai dire le seul choix à faire avec HTML5 (et XHTML5) c’est est-ce que tu te permet de ne pas mettre des guillemets à tes attributs, et ne pas mettre les / de fermeture des balises auto-fermantes (comme img par exemple). Soit tu tires profit de la tolérance d’HTML5 pour alléger le code, soit tu conserves une norme connue pour que les autres développeurs qui travaillent avec toi ne soient pas perturbés. L’extension reste .html dans tous les cas :)
      Perso je suis toujours sur des attributs avec guillemets, mais je commence vraiment à songer à les retirer pour avoir un code plus léger et agréable à manipuler.

  17. Petit problème avec les crochets angulaires; allez je tente une dernière fois !

    Avec BlueGriffon on n’a pas trop le choix; l’éditeur impose le doctype suivant et l’extension .xhtml :

    1 <?xml version=”1.0″ encoding=”UTF-8″?>
    2 <!DOCTYPE html>
    3 <html lang=”fr-fr” xmlns=”http://www.w3.org/1999/xhtml”>
    4 <head>
    5 <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″ />
    6 <title>Titre de ma page </title>

    n </head>

    Mais je ne peux pas faire tout ce que je veux, par exemple utiliser certaines choses plus ou moins interdites mais parfois fort utiles comme “document.write” ou bien :
    <noscript><meta content=”0;url=noJs.xhtml” http-equiv=”refresh” /></noscript>

    Si maintenant j’utilise l’extension .html comme tu le préconises, alors BlueGriffon écrit ceci automatiquement quand je recharge la page pour modification (et là ça marche, j’ai plus de liberté) :

    1 <!–?xml version=”1.0″ encoding=”UTF-8″?–>
    (2 à 5 idem ci-dessus)

    Cette ligne No 1 avec les tags commentaires est impossible à éliminer.

    Si j’ai bien compris, tu me conseilles cette dernière solution ? Merci pour tes conseils.

    • Je n’ai jamais utilisé BlueGriffon, donc je ne saurais te répondre ! Selon moi, soit il est mal configuré soit tu n’as pas la dernière version qui semble bien supporter HTML5 d’après leur site. Sinon tu peux éventuellement utiliser un autre éditeur si celui là est capricieux : Eclipse, Aptana, WebStorm, TextMate pour Mac, NetBeans… Tous sont de très bons choix et supportent HTML5.

  18. Jonathan, trop bien fait ton site ! tu fais vraiment bien la pub pour HTML5. Du coup, je laisse tomber le X et je refais mon site avec Bluefish, j’ai déjà commencé. Merci et bonne continuation.

  19. Hello,
    je pense que les commentaires de tous mes prédecesseurs sont assez parlant ! Félicitations pour cette entrée en matière. Un ebook dans l’avenir peut être ? Draggable est utilisable sur la balise audio ?

    • Merci ! La balise audio étant tout à fait standard et le drag and drop pouvant s’appliquer sur n’importe quel élément, je dirais oui par intuition – à tester !

    • HTML5 reste HTML, il y a juste des fonctionnalités en plus. Donc on peut dire que si tu utilises au minimum le nouveau Doctype, quelques balises HTML5 comme header, aside, etc… Alors ton site est “HTML5″.
      La plupart des nouveautés résident surtout dans le JavaScript !

  20. bonjour
    puis-je me permettre une petite question
    j’ai fais un site il y a 2 ans avec dreamweaver MX sur PC, un site tout simple, ce site sera-til toujours visible dans quelque années, si je le laisse tel quel ?
    je suppose également que je ne pourrais plus utiliser cette version de dreamweaver, je vais devoir acheter la mise à jour ?
    merci pour votre réponse et la manière éclairée d’écrire vos articles !

    • Bonjour Yann,
      Pas de panique, les navigateurs assurent (et assureront) toujours la rétrocompatibilité des sites écrits en HTML < 5.
      Et le logiciel que tu as utilisé pour créer tes fichiers HTML, CSS ou JavaScript n’a aucune importance. Pas d’inquiétude à avoir donc :)

  21. Merci beaucoup pour cet article. Il a répondu à pas mal de mes interrogations et je suis maintenant plus que motivé pour essayer d’approfondir afin de me faire une version HTML5 de mon portfolio en ligne. Un grand merci à toi.

  22. Merci infiniment,
    Je viens de découvrir, à force de chercher, vos explications simples et pourtant soutenues. Le sujet HTML5 est de taille parce que nécessaire à assimiler. Pour relever le défi de construire le site web de mon Lycée, et en un temps record. C’est possible, grâce à mes efforts, et surtout grâce à vous !

  23. Bonsoir,
    À propos de la balise video vous avez écrit : “Dans tous les cas il vous est possible de créer votre propre design si vous préférez un rendu uniforme quel que soit le navigateur utilisé.”

    Ce point m’intéresse. Pour la balise video je conseille le script video.js. Mais je cherche un équivalent pour l’autre balise média : la balise audio. Comment procèder pour rendre stylisable cette balise ?

  24. Bravo pour cet article concis=true et limpide()++.

    Une petite question de retrocompatibilité : Si j’intègre dans une page des balises et , par exemple, comment IE6 interprétera-t’il ces conteneurs?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>