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 ?
- Les nouveautés dans le code HTML
- Un allégement du code
- Les nouvelles balises sémantiques
- Les balises multimédia
- Des formulaires améliorés
- Les nouveautés dans le code Javascript
- L’HTML5 ça sort quand ?
- … Et le CSS alors ?
L’HTML5 c’est quoi ?
L’HTML5 n’est pas…
Tout d’abord, je suis convaincu que parmi vous certains se disent :
Ou encore :
Voire :
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.
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 !
<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é.
<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.
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 :
Ou sur un Android :
Pour le champ suivant :
<input type="url" />
Un iPhone affichera ce clavier adapté aux URLs :
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 :
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) ?
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.
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.
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.
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.
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.
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.
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
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 ?
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 !
Super intro, les concepts sont vraiment bien présentés je recommanderai cet article à ceux qui veulent découvrir HTML5
Très bon article, merci de l’avoir écrit.
Kool, voilà le genre de page que je cherchais pour passer doucement au html5.
Chapeau! l’article est tres bien ecrit. je te souhaite une bonne continuation
Bon article, merci !
Très bon article, bien construit, clair et concis ! Ca donne envie de s’y mettre très rapidement. ;-)
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.
Excellent article, merci
merci..article super bien fait…il donne envie de s’y mettre immédiatement…
Bravo et merci pour cet article…
Une référence pour tout entrée en matière.
Merci beaucoup pour cet article que je viens de partager sur FB.
Maintenant je m’en vais lire CSS3
Bonne continuation
:-)
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 !
Merci pour cet article , c’est une très bonne introduction au html5.
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
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 !!
Clair, concis, intéressant. Merci.
Trés bon articles. On attend avec impatience la sortie du livre
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
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 !
Très bon article !!
Cela ma permis de me faire une première idée de ce représente le HTML5.
Merci !
Salut
Est ce possible d’avoir un tutorial sur l’utilisation des API de géolocalisation pour HTML5 ?
Merçi d’avance
Tu veux dire quelque chose comme… ça ?
Bonne lecture !
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 .
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
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. ^_^
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.
Merci beaucoup pour ces explications très claires.
J’ajoute que ton site est vraiment très attractif et agréable à la vue.
Bonne continuation !
Merci beaucoup très claire.
Thank u
Très bon article facile à comprendre .
il m a motivé de savoir plus sur cette nouvelle technologie
Merci & bon continuation.
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é ! :)
Clair net et précis !!!
Mille merci.
Je prépare une formation HTML/CSS, tes pages seront d’un grand secours.
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 !!
très bon tuto, et je reconnais bien dans le style l’influence du site du zéro, notamment les tutos de matéo ;)
Merci pour cet article, qui est une bonne introduction aux nouveautés !
Excellent article, merci infiniment.
Merci Hakim, ça me fait sincèrement plaisir. Heureux d’avoir pu t’être utile :)
Merci, c’est franchement un bon article, très clair
et superbe présentation
ps : complétement fan du div class=”noob” :)
Merci bien !
Haha je me demandais si quelqu’un allait un jour me faire la remarque… Bravo tu es le premier ! :D
Merci bien, c’est un excellent article
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 !
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 :)
il ne me reste plus qu’a tester tout ça et me faire plaisir … merci ….
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 :)
Au fait, sur : Utilisation de HTML5 pour ajouter un lecteur audio à votre page Web
on trouve comment mettre un lecteur de musique HTML5 sur page Web sans recourir à un module complémentaire ou plug-in tiers, avec Javascript!
Plein de code à partager!
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.
Voici les lignes de code manquantes :
Titre de ma page
Ensuite :
Si rien ne s’affiche, HELP !
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.
Superbe article.
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.
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 !
Très bon billet pour débutants ! A quand la possibilité de diffuser sur G+ ? :)
A+
Oui il faudrait que je mette un peu à jour l’ergonomie du blog ! ;)
Bonjour
Peut-on convertir les sites réalisés en HTML antérieur en HTML5 . et si oui est-ce utile? et quelle est la procédure?
Merci
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 !
Merci !!!!!
j’ai trouvé cette intro parfaite pour une connaissance générale du html5.
Merci big big!!!
très bon article..Merci
Merci, très utile.
C’est exactement ce que je cherchais comme info, je vais de ce pas lire l’article sur CSS3.
Bonne continuation
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 :)
merci beaucoup pour votre réponse, en attente de lire d’autres articles sur ce site !
merci encore
cela veut donc dire que même après la généralisation d’html 5 je pourrais continuer à utiliser Dreamweaver MX ?
merci
Oui :)
merci bonne soirée !
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.
Idem que tout le monde, l’article est super, c’est très clair, MILLE MERCI. :)
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 !
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 ?
Super! merci pour ces éclaircissements :)
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?
IE6, 7 et 8 ne sont par défaut pas capables des styler des éléments HTML5 via CSS. Il faut utiliser un “polyfill” pour réparer ça. Le plus connu est html5shiv.