Curated by Carsonified

Learn with Treehouse

Accessibility, CSS3, Design, Django, HTML & CSS, HTML5, JavaScript, jQuery, NoSQL, PHP, Responsive Web Design, Ruby, Ruby on Rails, Tools, UX, Version Control, WordPress, iOS and more

Article 75

23 Essential HTML 5 Resources

By @ryancarson

15 July 2009 | Category: Code, HTML5

Editor's Note: Bruce Lawson will be doing a 1-hour tutorial called "How to build a HTML5 Web site" at the FOWD Tour.

Everyone is excited about the possibilities of HTML 5, but there's a lot to learn and absorb as well. With that in mind, we've compiled a list of articles to get you started!

  1. Yes, You Can Use HTML 5 Today! – A great beginning overview of HTML 5
  2. Wikipedia: HTML 5 – A basic overview from Wikipedia
  3. HTML 5 Cheat Sheet – A great quick guide to HTML 5 as a printable PDF
  4. HTML 5 Demos – A great set of demos. Just view the source to see how they work.
  5. HTML 5 Drag and Drop + Microformats = a whole world of possibilities – An example of how to use Drag-n-Drop in HTML 5
  6. HTML 5 Gallery – See what’s possible with HTML 5
  7. HTML 5 Forms Demo – A powerful demo of how forms work in HTML 5
  8. HTML 5 Doctor – A great general resource on HTML 5
  9. Headers in HTM 5 – A good article from HTML 5 Doctor on the Header element
  10. Video elements – A useful article from HTML 5 Doctor on the Video element
  11. Designing a blog with html5 – A tutorial on how to build a blog in HTML 5
  12. How to get HTML5 working in IE and Firefox 2 – Another great article from HTML 5 Doctor
  13. HTML 5 – Draft Standard – The whole spec, in all it’s scary technical detail
  14. Semantics in HTML 5 – An opinion piece from A List Apart
  15. Thinking About HTML 5 canvas Accessibility – Some quick thoughts on accessibility problems with the Canvas element
  16. HTML 5: nav ambiguity resolved – A post by Zeldman on the HTML 5 Nav element
  17. A Selection of Supported Features in HTML5 – A great list from Molly about which HTML 5 features are supported by which browsers
  18. The WHATWG Blog – The Web Hypertext Application Technology Working Group – the folks working on the HTML 5 spec
  19. HTML 5 canvas – A great in-depth tutorial on how the HTML 5 Canvas element works
  20. Native Drag and Drop – A demo of how the Drag-n-Drop functionality works.
  21. Bespin – A Mozilla Labs experiment on how to build an extensible Web code editor using HTML 5 technology.
  22. When can I use… – Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies
  23. Comparison of layout engines (HTML 5) – A good resource from Wikipedia

People to follow

These are the folks that are at the center of HTML 5 …

  1. Ian Hickson (@hixie) – Editor of HTML 5 Spec. Currently working at Google.
  2. Dave Hyatt – Co-creator of Firefox. Worked with Ian Hixie on HTML 5 spec. Working at Apple on the Safari and WebKit team.
  3. Bruce Lawson (@brucel) – Works for Opera, evangelising open web standards as part of their Developer Relations team. Also a member of the Web Standards Project’s Accessibility Task Force.
  4. Update: The other folks behind HTML 5 Doctor: @Rich_Clark, @Rem, @jackosborne, @akamike and @leads.
  5. Molly Holzschlag – Group Lead for the Web Standards Project (WaSP) and an invited expert to the HTML and GEO working groups at the World Wide Web Consortium (W3C)
  6. We’re probably forgetting others … please make suggestions in the comments
Follow @thinkvitamin on Twitter Please check out Treehouse

Other Posts You Might Find Interesting

  • Sorry - No Related Posts Found

Comments

  • http://richclarkdesign.com Rich Clark

    Ryan, thanks for the link love to the gallery & doctor sites. A quick pimp to say that they are both on twitter @html5gallery & @html5doctor if you want to follow updates there.

    Also you’ve mentioned @brucel from HTML5 Doctor, the rest of us are @Rich_Clark, @Rem, @jackosborne, @akamike & @leads

    We’ve got plenty more articles in the pipeline but be sure to mail us or @ reply us any other questions you’ve got and we’ll do our best to answer.

    Cheers

  • http://www.brucelawson.co.uk bruce

    Nice links Ryan. Can I just say that, while I work for Opera – which is heavily involved in the HTML 5 specification process – I’m not one of the team actually writing the spec. They are mates of mine and help me with understanding some segments, but I’m not part of that team. (They’re way too brainy for me!)

    My interest is as a web developer (before I joined Opera last year I was the technical lead for the Solicitors regulation Authority website http://www.sra.org.uk) so I’m kicking the tyres of the spec from a developer perspective rather than as a spec-head.

  • http://www.optimiced.com Michel

    Did you miss @zeldman in this list? ;-)

  • http://www.atomised.coop al macmillan

    Think ‘Ian Hixie’ is Ian Hickson. His nickname is Hixie

  • http://joeldrapper.com Joel Drapper

    Thanks for the links. Very useful!

  • Andy

    From Html5 Twitter Users at wefollow.com/twitter/html5

    @brucel
    @chanezon
    @samruby
    @iheni
    @laura_carlson
    @Rich_Clark
    @johnfoliot
    @mp3wizard
    @adamdecaf
    @bluelin77

  • http://listdub.com/?p=7693 LISTDUB» Carsonified » 23 Essential HTML 5 Resources

    [...] Carsonified » 23 Essential HTML 5 Resources. Categories: Top 20s Lists Tags: html5, resources Comments (0) Trackbacks (0) Leave a [...]

  • http://zyzik.wordpress.com/2009/07/15/30-fresh-links-2/ 30 fresh links! « Adrian Zyzik’s Weblog

    [...] And Creative Ways To Use WordPress Widgets Developer 5 Business Models for Social Media Startups Carsonified 23 Essential HTML 5 Resources The Importance Of Wireframes In Web Design And 9 Tools To Create Wi… 60+ Vintage Style [...]

  • http://www.paladn.comhttp://blog.paladn.com Chris Kemp

    Good Job collecting these, Ryan. I’ve been posting updates on HTML5 and CSS 3 on Twitter ( @MrPaladin ) for abt a week now. It’s best to be ahead of the curve on something as fundamental as the HTML standard.

    Anyways, thanks for posting this!

  • http://imaginaryworld.net/2009/07/15/carsonified-%c2%bb-23-essential-html-5-resources/ Internet Brain » Carsonified » 23 Essential HTML 5 Resources

    [...] Carsonified » 23 Essential HTML 5 Resources [...]

  • http://www.i5bala.com Balakumar Muthu

    Great list, it could also include

    http://htmlfive.appspot.com/
    http://www.youtube.com/html5

    BTW, the new design for thinkvitamin+carsonified really ROCKS!!

  • http://medevyoujane.com Jón Grétar Borgþórsson

    Don’t forget that YouTube made a HTML5 sample of it’s page. Although it’s Safari 4 only.

    * Video is mpeg4.
    * Video controls are made in javascript.
    * Video thumbnails is mpeg4 with on-mouseover autoplay.
    * And of course it uses the new HTML5 elements.

    http://www.youtube.com/html5

  • Daan

    Too lazy to write an article?
    Make a list of links!

    Seriously…

  • http://www.scriptremix.com/script/carsonified-%c2%bb-23-essential-html-5-resources/ Carsonified » 23 Essential HTML 5 Resources | ScriptRemix.com Scripts

    [...] Go here to see the original: Carsonified » 23 Essential HTML 5 Resources [...]

  • Andy

    I think Molly is a participant in the CSS WG. She doesn’t seem to be listed as a participant of the W3C HTML WG. Maybe she intends on joining?
    http://www.w3.org/2000/09/dbwg/details?group=40318&public=1

  • http://mybadattitude.com/2009/07/15/23-essential-html-5-resources/ My Bad Attitude » 23 Essential HTML 5 Resources

    [...] 23 Essential HTML 5 Resources. [...]

  • http://html-five.net/2009/07/15/23-essential-html-5-resources/ 23 Essential HTML 5 Resources // HTML Five

    [...] Carson does a great compilation of 23 Essential HTML 5 Resources, from tutorials to practical [...]

  • http://hpsk.heteml.jp/junt74/?p=39 ブクマク 07/16/2009 | 何か

    [...] Carsonified » 23 Essential HTML 5 Resources [...]

  • http://pelfusion.com/ PelFusion

    thanks….article is helpful

  • http://blogs.tantacom.com/loslinksdefelix/enlaces/enlaces-de-interes-16072009 Enlaces de interés: 16/07/2009 | Los Links de Félix

    [...] 23 Essential HTML 5 Resources [...]

  • http://odzyskiwanie-danych.instantspot.com Odzysk Danych

    I prefer PHP personaly. I know I might get flamed for that but HTML always seemed a bit too.. straightforward to me. It’s just too simple.

  • http://www.kygeek.com/daily-links/daily-links-for-thursday-july-16th-2009 Daily Links for Thursday, July 16th, 2009

    [...] Carsonified » 23 Essential HTML 5 Resources [...]

  • http://www.robertkern.com/web-development/23-essential-html-5-resources.html 23 essential HTML 5 resources | PHP Web developer, Robert Kern

    [...] as well. With that in mind, we’ve compiled a list of articles to get you started!” – Ryan Carson via carsonified.com Share and [...]

  • Ryan Carson

    @ Al – Thanks :) I’ll fix that now.

  • Ryan Carson

    @ Rich Clark – Thanks for the heads up. I’ve updated the list and added you guys.

  • http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/ HTML5 and The Future of the Web | How-To | Smashing Magazine

    [...] 23 Essential HTML 5 ResourcesA comprehensive list of articles and resources related to HTML 5. [...]

  • http://design-newz.com/2009/07/16/23-essential-html-5-resources/ 23 Essential HTML 5 Resources | Design Newz

    [...] 23 Essential HTML 5 Resources [...]

  • http://oli-studio.com/ Oli

    Not to blow my own horn, but

    <horn tooting>
    HTML5 structure—HTML4 and XHTML1 to HTML5
    HTML5 id/class name cheatsheet
    </horn tooting>

    ;-)

    peace – oli

    (Here’s hoping that works—a note on what code is permitted in comments would be great!)

  • http://geek.michaelgrace.org Mike Grace

    Very nicely done. Thank you. ; ) I added it to my collection of top bookmarks featured at http://geek.michaelgrace.org/webnet/

  • http://www.tech7.net/html5-and-the-future-of-the-web-4.html HTML5 and The Future of the Web « Tech7.Net

    [...] 23 Essential HTML 5 Resources A comprehensive list of articles and resources related to HTML 5. [...]

  • http://www.dzinepress.com Dzinepress

    i’m getting help, really thankful to you :)

  • Ryan Carson

    @ Oli – Thanks bud. I’ll check those out.

  • http://www.usartstudios.com/news-articles/html5-and-the-future-of-the-web.html U.S. Art Studios Inc. » Blog Archive – HTML5 and The Future of the Web – U.S. Art Studios Inc. . A full firm advertising agency firm specialized in motion picture, photography, graphic design, printing and web design.

    [...] 23 Essential HTML 5 Resources A comprehensive list of articles and resources related to HTML 5. [...]

  • http://siarto.com/2009/07/17/html-5-weekly-review-3/ HTML 5 Weekly Review #3 | Jeff Siarto

    [...] 23 Essen­tial HTML 5 Resources Another list of resources and peo­ple to fol­low regard­ing HTML 5. [...]

  • http://locallab.wordpress.com/2009/07/17/html5-and-the-future-of-the-web/ HTML5 and The Future of the Web « LocalLab : Foire aux Infos

    [...] 23 Essential HTML 5 Resources A comprehensive list of articles and resources related to HTML 5. [...]

  • http://designvisibility.com/web-design/html5-and-the-future-of-the-web.html HTML5 and The Future of the Web | Design Visibility

    [...] 23 Essential HTML 5 Resources A comprehensive list of articles and resources related to HTML 5. [...]

  • http://www.squico.com/2009/07/18/carsonified-%c2%bb-23-essential-html-5-resources/ Carsonified » 23 Essential HTML 5 Resources | Squico

    [...] In: Design inspiration 18 Jul 2009 Go to Source [...]

  • http://www.webmaster9.com/2009-07/23-usefull-html-5-resources-for-you.html 23 Usefull HTML 5 Resources For You | Webmaster 9

    [...] VIA SHARETHIS.addEntry({ title: "23 Usefull HTML 5 Resources For You", url: "http://www.webmaster9.com/2009-07/23-usefull-html-5-resources-for-you.html&quot; }); [...]

  • http://robertobaca.com/r/413 A collection of stuff » Blog Archive » Una lista de recursos esenciales para HTML 5

    [...] Una lista de recursos esenciales para HTML 5 July 18th 2009 in Recortes Everyone is excited about the possibilities of HTML 5, but there’s a lot to learn and absorb as well. With that in mind, we’ve compiled a list of articles to get you started!Carsonified » 23 Essential HTML 5 Resources [...]

  • http://mandarine.wordpress.com/2009/07/19/links-for-2009-07-18/ links for 2009-07-18 « Mandarine

    [...] Carsonified » 23 Essential HTML 5 Resources (tags: html webdev list tutorial reference) [...]

  • http://www.evolve-mma.com BJJ

    Very interesting post. thanks for the info.

  • http://www.cssnolanche.com.br/24-resources-para-html5/ 24 Resources para HTML5 » CSS no Lanche

    [...] Com certeza todos nós desenvolvedores não vemos a hora de sair a especificação final do HTML e então podermos sair desenvolvendo aplicações sem algum receio. Enquanto isso, fique com alguns links interessantes que encontrei no blog Carsonified: [...]

  • http://richclarkdesign.com Rich Clark

    Cheers Ryan,

    I should also add if you go view this Delicious links (html5gallery) I’ve been bookmarking HTML 5 articles for a while now that might be of interest to people.

  • Ryan Carson

    Cheers – I’ll try to check it out!

  • http://it.bfitz.me/?p=1293 ?Stars? of the week « it.bfitz.me

    [...] 5 is here! …and here are 23 resources to get you up to speed. I recommend the cheat [...]

  • http://diventare.org/2009/08/02/html5/ HTML5 « Diventare

    [...] 23 Essential HTML5 Resources [...]

  • http://www.incubaweb.com/html5-css3-y-el-futuro-del-desarrollo-web/ HTML5, CSS3 y el futuro del desarrollo Web | Incubaweb

    [...] 23 Essential HTML 5 Resources [...]

  • http://blogografia.com/html5-css3-y-el-futuro-del-desarrollo-web.html HTML5, CSS3 y el futuro del desarrollo Web : Blogografia

    [...] 23 Essential HTML 5 Resources [...]

  • http://9elements.com/io/?p=153 HTML5 Canvas Experiment « IO 9elements

    [...] – Carsonified linklist about HTML5 [...]

  • http://www.thewebsqueeze.com/web-design-articles/kick-ass-squeeze-july-2009.html Kick-Ass Squeeze – July 2009

    [...] to treat post categories differently, but sometimes a little extra hacking is required.” 23 Essential HTML 5 Resources – “Everyone is excited about the possibilities of HTML 5, but there’s a lot to learn [...]

  • http://blogfreakz.com/web-design/ultimate-resources-for-learning-html5/ Ultimate resources for learning HTML5 | blogfreakz.com

    [...] 23 Essential HTML 5 Resources [...]

  • http://trackteq.com/2009/70-must-have-css3-and-html5-tutorials-and-resources/ 70 Must-Have CSS3 and HTML5 Tutorials and Resources | trackteq.com

    [...] 23 Essential HTML 5 Resources from Carsonified’s Think Vitamin blog. [...]

  • http://www.iconlandia.it/442/70-must-have-css3-and-html5-tutorials-and-resources-2.html 70 Must-Have CSS3 and HTML5 Tutorials and Resources – Iconlandia

    [...] 23 Essential HTML 5 Resources from Carsonified’s Think Vitamin blog. [...]

  • http://album.amb.com.tw/2009/08/10/70-must-have-css3-and-html5-tutorials-and-resources/ AMB Album » 70 Must-Have CSS3 and HTML5 Tutorials and Resources

    [...] 23 Essential HTML 5 Resources from Carsonified’s Think Vitamin blog. [...]

  • http://www.scripting.com.cn/70-must-have-css3-and-html5-tutorial-and-resource/ 70+ 必备的 CSS3 和 HTML5 教程资源 « 脚本

    [...] 23 Essential HTML 5 Resources 来源于 Carsonified’s Think Vitamin blog 博客。 [...]

  • http://designadept.com/blog/70-must-have-css3-and-html5-tutorials-and-resources/ Adept > 70 Must-Have CSS3 and HTML5 Tutorials and Resources

    [...] 23 Essential HTML 5 Resources from Carsonified’s Think Vitamin blog. [...]

  • http://www.css3gallery.net/css3-articles/70-css3-html5-tutorials/ CSS3 Gallery, Showcase & Inspiration. Showcasing the best CSS3 Web Design on the Internet | 70 CSS3 & HTML5 Tutorials | CSS 3 Gallery

    [...] 23 Essential HTML 5 Resources from Carsonified’s Think Vitamin blog. No Ratings Yet  Loading … [...]

  • http://blog.almacenplantillasweb.es/2009/08/css3-y-html5-tutoriales-y-recursos-para-el-nuevo-diseno-web/ CSS3 y HTML5: Tutoriales y recursos para el nuevo diseño web | Recursos para desarrollo y diseño web – AlmacenPlantillasWeb Blog

    [...] 23 Essential HTML 5 Resources de Carsonified’s Think Vitamin blog. [...]

  • http://blog.dieweltistgarnichtso.net/linkschleuder-3 Linkschleuder (3) – Die Welt ist gar nicht so.

    [...] Essential HTML5 Resources Geschrieben von erlehmann, postiert am 2. Nov 2009 um 08:00, kategorisiert Linkschleuder and tagged china, felltypes, gameoflife, html5, spieltheorie. Permalink. RSS feed für Kommentare. Post a comment or leave a trackback: Trackback URL. Linkschleuder (2) [...]

  • http://bradfrostweb.com/blog/web/html5-resources-examples-demos/ Brad Frost’s Blog » Words that would otherwise be coming out of my mouth.

    [...] 23 Essential HTML5 Resources via Carsonified [...]

  • http://www.graficicreativi.com/gestione-siti-web-cms/11272-css3-now-html-5-a.html#post94675 Css3 Now! (& Html 5) – Grafici Creativi

    [...] – Smashing Magazine Demo della rivista SmashingMagazine in HTML5 Smashing HTML5! Risorse HTML5 23 Essential HTML 5 Resources HTML 5 Demos and Examples HTML5 gallery html5doctor W3C html 5 html5 validator [...]

  • http://blog.genggao.net/inspiration/beautiful-html5-web-design-showcases/ 12 Beautiful HTML5 Web Design Showcases | Geng Gao | the Blog | Design, Software, Gadgets blog

    [...] 23 Essential HTML 5 Resources – Think Vitamin [...]

  • http://awebspark.com/2010/01/18/html-5/ HTML 5

    [...] 23 Essential HTML 5 Resources [...]

  • http://www.gaixiaohui.com/?p=258 70+ 必备的 CSS3 和 HTML5 教程资源 « SomeDay I'll Fly | Gabriel's blog

    [...] 23 Essential HTML 5 Resources 来源于 Carsonified’s Think Vitamin blog 博客。 [...]

  • http://www.staynerdymyfriends.com/?p=38 Being Stale | Stay Nerdy My Friends

    [...] Carsonified they have posted 23 Essential HTML 5 Resouces which will take some time to pick through but gives a pretty good heads up on HTML5 and how easy it [...]

  • http://diarionerd.in/2010/o-que-muda-com-o-html-5/ O que muda com o HTML 5? « Diário Nerd

    [...] você tiver facilidade na leitura em inglês pode conferir esse post AQUI tbm. Onde você pode ver alguns recursos interessantes do [...]

  • http://www.paitadesign.com/blog/html5-nuovi-tag-anteprima-delle-innovazioni/ HTML5: tag nuovi e anteprima delle innovazioni | paitadesignblog

    [...] Ecco cosa c’è da sapere Dive into HTML5 – in Italiano HTML5: a list of articles to get you started Anticipiamo HTML5 HTML5 vs. Flash Audio e video HTML5 con [...]

  • http://webification.com/webification-tuesday Webification Tuesday | Webification

    [...] can be scaled and reused ad infinitum as they are for free. The icons are also regularly updated.23 Essential HTML5 resources. No picture here, just plain text. This rather sizable list has links to Wikipedia and Smashing [...]

  • http://www.iandevlin.com Ian Devlin

    Excellent list of the best HTML5 resoureces out there.

    You should also add Mark Pilgrim’s excellent Dive Into HTML5 (http://diveintohtml5.org/).

    There’s also my own HTML5 Laboratory (http://www.html5laboratory.com) which I am unable to update as often as I would like to, but it might be useful to some.

  • andbin

    Hi, If I may I would like to mention my HTML5 canvas examples available at:
    http://andbin.typepad.com/webtech/html5-canvas-examples.html

  • Molot

    Interesting article, thanks the author http://web-html.ru/

  • http://www.html5elite.com Pete | HTML5 Elite

    Great collection – thanks for sharing.

  • Maxrok

    Also “Sergey’s HTML5 & CSS3 Quick Reference”. This is the only HTML5 reference style book available, which is not based on old HTML4 book. It is concise and very well put together.

    http://www.amazon.com/s/ref=ntt_athr_dp_sr_1?_encoding=UTF8&sort=relevancerank&search-alias=books&field-author=Sergey%20Mavrody

  • http://www.facebook.com/profile.php?id=100001115014274 Hula Hola

    thx u :D

  • http://twitter.com/INSPUNLMTD InpirationsUnlimited

    Showcase your HTML5 beauties to the world at http://www.html5based.com

Badges for Treehouse

Treehouse

Learn iOS, Rails, CSS3, jQuery, Node.js, HTML5, UX and more in less than 8 minutes per day. New videos added regularly. Sign up today and get a free Web Design Toolkit.

Ads Via The Deck

Think Vitamin Radio
Episode #34: Amazon Fire and Responsive Roundtable

Check out our bi-weekly radio show. Covering the hot topics on the web.

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

Download Podcast as mp3

Advisory Board

The Think Vitamin Advisory Board in place make sure that you receive the best content possible.