Le nombre de ressources disponibles sur HTML5 ne cesse d’augmenter. Leur qualité également. Voici quelques liens triés sur le volet qui vous permettront d’amorcer le virage pour rejoindre la dernière ligne droite en direction de HTML5 : des sites web consacrés entièrement à la nouvelle version de HTML, des tutoriels, des trucs et des astuces, sans oublier les liens vers les indispensables ressources officielles !
HTML5 : les nouveautés
Mise à jour le 03/01/2011
- <html>5Gallery — L’objectif de cette galerie de sites Web utilisant un marquage HTML5 est de montrer la manière dont les utilisateurs interprêtent les spécifications afin d’en apprendre plus sur le langage HTML5.
- Spécifications HTML5 du W3C — Il s’agit d’une version simplifiée des spécifications qui se concentre sur les besoins des créateurs de sites Web. Les détails de l’implémentation dans les agents utilisateurs sont laissés de côté. Nouveau : voir aussi HTML: The Markup Language Reference.
- HTML5 Validator — Validateur expérimental pour (X)HTML5
- Sémantique HTML5 et ARIA pour WordPress —
HTML5 introduit de nouveaux éléments qui sont parfaits pour ajouter de la sémantique à un blog ou un journal. ARIA fait de même concernant l’accessibilité.
- Introduction à la balise video de HTML5 — Une présentation claire et complète de la balise `video` avec des exemples de code prêt à emporter.
- Ressources HTML 5 et CSS 3 — Liste de ressources HTML5 (et CSS3) régulièrement mise à jour.
- Pourquoi HTML5 ? — HTML5 a pour objectif d’intégrer via son code des contenus hétérogènes (l’audio ou la vidéo par exemple) et de mieux structurer la mise en page par des éléments doté de sens.
- The Official Guide to HTML5 Boilerplate — Un guide video [en] pour connaitre les techniques proposées par HTML5 Boilerplate par Paul Irish :
- Passer son blog WordPress à la sémantique HTML5 et ARIA — Les nouvelles balises HTML5, les rôles ARIA, améliorer les formulaires, un soupçon de Javascript et de CSS, les fichiers WordPress à modifier,
- HTML5 Tutorial — Votre premier arrêt sur la route qui mène à HTML5 pour étancher votre soif de connaissances : tutoriels, exemples de codes.
- http://html5doctor.com/ — Envie d’implémenter HTML5 dès aujourd’hui ? Faites appel au docteur ! Vous trouverez tout ce qu’il faut savoir pour utiliser `<header>`, `<nav>`, `<section>`, `<article>`, etc. à bon escient.
- Docteur HTML 5 — Cette traduction du site HTML5 Doctor vous permettra de travailler avec HTML5 dès aujourd’hui !
- HTML5 Reset — Les fichiers proposés contiennent l’essentiel pour créer un document HTML5 avec les balises de base telles que `title`, `header`, `footer`, etc. Vous y trouverez également les commentaires conditionnels pour cibler une demi-douzaine de feuilles de styles CSS spécifiques, ainsi que quelques fichiers Javascript pour gérer les incohérences d’Internet Explorer.
- HTML5 Boilerplate — Dans le même esprit que HTML5 Reset, ce framework HTML5 fournit un ensemble cohérent de fichiers HTML, JS et CSS qui tient compte des performances, de l’ajout de fichiers Flash, de @font-face, de la balise video et de la compression gzip.
- 25 HTML5 Features, Tips, and Techniques you Must Know — Un aperçu des nouveautés qui font le quotidien de l’intégrateur Web, là tout de suite ;)
- Formulaires HTML5 – Quoi de neuf ? — Tour d’horizon des nouveautés apportées par les formulaires HTML5 : les nouveaux champs et les nouveaux attributs. Les nombreux exemples présentent les nouvelles méthodes avec HTML5 ainsi que la manière dont on y arrive à l’aide de jQuery.
- HTML5 se dévoile — L’article francophone qui manquait pour avoir une vision claire de HTML5 par @juliegri.
- La vie des intégrateurs avec Html5 — Billet plein de ressources concernant la mise en place de sites Web en HTML5 par les intégrateurs Web.
- w3c.html5.free.fr — HTML5 par l’exemple
- HTML5 Rocks — HTML5 Rocks, de Google
- HTML5 Elements — L’ensemble des éléments HTML5
- HTML5 Aujourd-hui — Comment HTML 5 peut-il être utilisé aujourd’hui ?
A consommer sans modération
- W3C Working Draft — Le vocabulaire et les API’s associées pour HTML et XHTML. Propose les spécifications des nouvelles balises, des attributs, etc. pour HTML5.
- HTML5 differences from HTML4 — Ce document du W3C présentent les différences entre HTML5 et HTML4.
- http://forums.whatwg.org — Forum de discussion pour la communauté bâtie autour de HTML5
A relire
- http://oli.jp/2009/html5-structure4 — Structurer du contenu avec HTML5 : passez de HTML4 ou XHTML 1 à HTML5
- http://www.w3.org/News/2009#item119 — Annonce de l’arrêt programmé de XHTML 2 au profit de HTML 5
- http://www.sitepoint.com/article/html-5-snapshot-2009/ — depuis l’annonce de l’application Google Wave architecturée autour de HTML5, ce dernier est devenu un sujet chaud dans la blogosphère. Exemples de marquage HTML sur le passage de HTML4 vers HTML5
- http://www.alistapart.com/articles/previewofhtml5 — Avec l’amélioration des contrôles de formulaire, des API’s, le support du multimédia, HTML 5 promet aux auteurs de sites web plus de flexibilité et une plus grande interopérabilité. Beaucoup d’exemples concrets et pratiques.
- http://www.ibm.com/developerworks/library/x-html5 — Exemples de mise en page avant et après HTML5
- http://www.miximum.fr/actus/238-html5-quelles-nouveautes — Présentation en français des nouveautés apportées par HTML 5 et leur implémentation dans Firefox 3.5
- http://t37.net/une-balise-nsfw-dans-html5-mais-wtf.html — Critique de Frédéric de Villamil sur l’introduction d’une balise `<nsfw>` (No Safe For Work) utilisés généralement sur IRC, Twitter, forums, etc. pour prévenir les lecteur que le liens contient du « matériel » pour adultes.
- http://a.deveria.com/caniuse — Table de compatibilité pour les fonctionnalités présentes dans HTML5, CSS3, SVG et autres technologies web à venir. Voir aussi lewiki ou cette page sur l’introduction des fonctions dans les principaux navigateurs web.
- http://www.sfgate.com — Il est devenu clair pour le W3c que le marché disponible pour XHTML 2 était trop petit comparé à HTML 5.
- http://forabeautifulweb.com — Réflexions autour des microformats et de HTML5 sous l’angle de la « sémantique ».
- http://www.modernizr.com — Modernizr est une petite bibliothèque Javascript qui peut vous aider à utiliser les nouvelles technologies (CSS3, HTML 5) dès maintenant grâce à une détection des navigateurs supportant telle ou telle fonctionnalité.
- http://stoneship.org/ — Quelques questions intéressantes à propos de l’abandon de XHTML2 d’après les commentaires du billet de JeffreyZeldman intitulé XHTML DOA WTF.
- HTML 5 and CSS 3: The Techniques You’ll Soon Be Using — Tutoriel très instructif et très clair sur le balisage d’un blog à l’aide de HTML5 et de CSS3. Utilisation un peu étrange de la balise `<header>` que l’auteur met plusieurs fois dans le document pour regrouper le titre des articles et les meta-informations sur le billet.
Pour la route
- Tagués HTML5 — Mes avis, mes interrogations, mes tutoriels sur ce blog.
- 23 sites pour explorer le HTML5
Articles sur le même sujet
PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car Il n'y pas d'amour, il n'y a que des preuves d'amour
(Jean Cocteau) ;) Merci d'avance.
Afin de satisfaire le plus grand nombre, j'ai ajouté
un bouton Flattr parce que vous le valez bien ;)
[...] This post was mentioned on Twitter by bb (css4design), br1o les bons tuyaux, yveshache, Benoit Piette, Laurence Guérette and others. Laurence Guérette said: RT @br1o: Le petit journal de HTML5 http://j.mp/cjsmep [...]
Merci pour cette liste! Je vais commencer par le tuto simple d’Alsacréations et viendrais grignoter les autres liens au fur et à mesure :)
Hello,
On est justement aussi en train de concocter une liste sur Alsacréations. Du coup, je me dis que tout le monde peut en profiter ici aussi ;)
J’ajouterais quelques très bonnes ressources : - HTML5 par l’exemple : http://w3c.html5.free.fr/ - HTML5 Rocks, de Google : http://slides.html5rocks.com/ - L’ensemble des éléments HTML5 : http://simon.html5.org/html5-elements - Comment HTML 5 peut-il être utilisé aujourd’hui ? : http://blog.whatwg.org/html5-aujourd-hui
Merci pour toutes ces suggestions, je viens de les ajouter dans ce petit journal
Bon, il est temps de m’y mettre, HTML5, me voila ! :)
Merci de parler de la traduction Docteur HTML5. L’original est une super bonne ressource! C’est toutefois important d’avoir du contenu en français disponible!
[...] Lien de l’article : Le petit journal de HTML5 par css4design.com [...]
Je m’y suis mis aussi ! Mais ça reste à approfondir et cette liste est la bienvenue !
à préciser que « HTML5 Rocks, de Google : http://slides.html5rocks.com/ » se base sur le moteur webkit pour illustrer les slides. donc pas pleinement fonctionnel avec Firefox :)
Merci beaucoup pour toutes ces sources d’infos! Liste très utile et complète. On est obligé de s’y mettre là ;)
Pareil. Merci pour la liste. Sur l’accessibilité j’avais trouvé ça aussi : http://on-air.hiseo.fr/html5/html5-accessibilite-aria-wai-microformats/
Merci pour cette liste assez exhaustive. Un petit article rapide à lire qui permet d’être sûr que son site en HTML5 et CSS3 est bien valide et compatible avec les différents navigateurs : http://blog.pastel.pro/un-site-pret-pour-html5-et-css3-compatible-avec-la-majorite-des-navigateurs-actuels
Merci pour les infos… :) un blog que je découvre mais que je suivrais plus attentivement désormais :)
Merci pour le lien vers lesintegristes.net !
Pour l’élément , la discussion est un peu stérile, car il n’a jamais été question de l’inclure dans une spec. Quelqu’un a posté cette idée sur le bugtracker du W3C (qui est ouvert à tous), et elle a été rejetée, comme beaucoup d’autres.
merci pour le lien vers mon article sur HTML5 et wordpress :) également pour ceux qui auront la chance d’aller à Paris Web, je ferais dans une conf le vendredi matin un tour bien plus complet des parties de HTML5 (sémantique et APIs) utilisables en production aujourd’hui avec les solutions de fallback qui vont bien.
Je découvre tardivement ton billet et la citation de mon article sur HTML5 dont je te remercie très chaleureusement.
Je t’invite à ajouter http://www.alsacreations.com/article/lire/1125-introduction-balise-video-html5-mp4-h264-webm-ogg-theora.html et http://www.alsacreations.com/article/lire/947-osez-creer-site-html5-css3.html .
[...] Charité bien ordonnée commence par soi-même : je commence par la liste des billets que j’ai mis à jour dernièrement : 28 frameworks CSS et Le petit journal permanent de HTML5. [...]
[...] Le petit journal permanent de HTML5 — Des sites web consacrés à HTML5, des tutoriels, des trucs et des astuces, sans oublier les liens vers les ressources officielles ! [...]
[...] Le petit journal permanent de HTML5 — Toujours vaillant, cet article mis à jour régulièrement rassemble toujours le meilleur des ressources sur HTML5 ! [...]
[...] permanent de CSS3 Après mes petits journaux permanents consacrés à la typographie et à HTML5, voici un numéro spécial qui fait la part belle à CSS3. Ces nouvelles propriétés proposent des [...]
[...] 2011 (Typographie, CSS, Photoshop et développement web) Après quelques journaux permanent (HTML5, typographie et CSS3) et des revues de presse multi-thématiques, voici une nouvelle série de [...]
Bonjour à tous! très intéressant billet merci de lister tous ces sites utiles. Puis-je vous conseiller d’ajouter Sitenhtml5.com parmis tous ces liens.. sitenhtml5 est un galerie franco-américaine recensant les meilleurs sites utilisant ce markup. http://sitenhtml5.com Merci et bonne soirée!
[...] Le petit journal de HTML5 Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ? [...]
[...] Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ? petit journal html5 [...]
[...] Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ? HTML5 – Les nouveautés [...]