{"id":5141,"date":"2011-02-09T10:50:39","date_gmt":"2011-02-09T10:50:39","guid":{"rendered":"https:\/\/www.heartinternet.uk\/blog\/?p=5141"},"modified":"2011-02-09T10:50:39","modified_gmt":"2011-02-09T10:50:39","slug":"41-great-html5-tutorials-and-resources","status":"publish","type":"post","link":"https:\/\/www.heartinternet.uk\/blog\/41-great-html5-tutorials-and-resources\/","title":{"rendered":"41 Great HTML5 Tutorials and Resources"},"content":{"rendered":"<p> Want to learn more about HTML5 and implementing it on your website, but not sure where to start? We\u2019ve pulled together a list of great links to help you with the latest version of this essential web language.<\/p>\n<p><a href=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2011\/02\/heart-internet-html5-2.png\"> <img decoding=\"async\" title=\"heart-internet-html5-2\" src=\"\/blog_assets\/wp-content\/uploads\/2011\/02\/heart-internet-html5-2.png\" alt=\"\" \/><\/a><\/p>\n<h4>Browser Compatibility<\/h4>\n<p>The first point of reference is finding out which aspects of HTML5 work in which browsers (so far).<\/p>\n<p>&bull;&nbsp; \u00a0\u00a0\u00a0 <a href=\"https:\/\/caniuse.com\/\" target=\"_blank\">Can I use&#8230;<\/a><\/p>\n<p>&bull;&nbsp; \u00a0\u00a0\u00a0 <a href=\"https:\/\/html5test.com\/\" target=\"_blank\">HTML5 Browser Test<\/a><\/p>\n<p>&bull;&nbsp; \u00a0\u00a0\u00a0 <a href=\"https:\/\/blogs.sitepoint.com\/2010\/11\/26\/html5-and-css3-for-the-real-world\/\" target=\"_blank\">HTML5 and CSS3 for the Real World<\/a><\/p>\n<p>&bull;&nbsp; \u00a0\u00a0\u00a0 <a href=\"https:\/\/html5readiness.com\/\" target=\"_blank\">HTML5 Readiness<\/a><\/p>\n<p>&bull;&nbsp; \u00a0\u00a0\u00a0 <a href=\"https:\/\/code.tutsplus.com\/tutorials\/how-to-make-all-browsers-render-html5-mark-up-correctly-even-ie6--net-8669\" target=\"_blank\"> How to make all browsers render HTML5 mark-up correctly (even IE6)<\/a><\/p>\n<p>&bull;&nbsp; \u00a0\u00a0\u00a0 <a href=\"https:\/\/www.findmebyip.com\/litmus\/#html5-web-applications\" target=\"_blank\">HTML5 and CSS3 Support<\/a><\/p>\n<p><a href=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2011\/02\/heart-internet-html5-3.png\"> <img decoding=\"async\" title=\"heart-internet-html5-3\" src=\"\/blog_assets\/wp-content\/uploads\/2011\/02\/heart-internet-html5-3.png\" alt=\"\" \/><\/a><\/p>\n<h4>HTML5 Introductions and Outlines<\/h4>\n<p>If you\u2019re keen to get stuck in or want some background reading, bookmark these links for essential information about getting started with HTML5.<\/p>\n<p>&bull;&nbsp; \u00a0\u00a0\u00a0 <a href=\"https:\/\/diveintohtml5.org\" target=\"_blank\">Dive into HTML5<\/a><\/p>\n<p>&bull;&nbsp; \u00a0\u00a0\u00a0 <a href=\"https:\/\/designshack.co.uk\/articles\/html\/html5-the-basics-1-of-4\" target=\"_blank\">DesignShack&#8217;s HTML5: The Basics<\/a><\/p>\n<p>&bull;&nbsp; \u00a0\u00a0\u00a0 HTML5 for beginners<\/p>\n<p>&bull;&nbsp; \u00a0\u00a0\u00a0 <a href=\"https:\/\/code.tutsplus.com\/tutorials\/html-5-and-css-3-the-techniques-youll-soon-be-using--net-5708\" target=\"_blank\">HTML5 and CSS3 techniques you&#8217;ll soon be using<\/a><\/p>\n<p>&bull;&nbsp; \u00a0\u00a0\u00a0 <a href=\"https:\/\/www.w3.org\/TR\/html5-diff\/\" target=\"_blank\">HTML5 differences from HTML4<\/a><\/p>\n<p>&bull;&nbsp; HTML5: Old and New Semantics<\/p>\n<p>&bull;&nbsp; \u00a0\u00a0\u00a0 <a href=\"https:\/\/www.focus.com\/images\/view\/11905\/\" target=\"_blank\">WTF is HTML5?<\/a> (infographic)<\/p>\n<p>&bull;&nbsp; \u00a0\u00a0\u00a0 <a href=\"https:\/\/dev.w3.org\/html5\/spec\/Overview.html\" target=\"_blank\">W3&#8217;s HTML5 Overview<\/a><\/p>\n<p><a href=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2011\/02\/heart-internet-html5-4.png\"> <img decoding=\"async\" title=\"heart-internet-html5-4\" src=\"\/blog_assets\/wp-content\/uploads\/2011\/02\/heart-internet-html5-4.png\" alt=\"\" \/><\/a><\/p>\n<h4>Cheat Sheets &amp; Quick Reference Guides<\/h4>\n<p>Keep these to hand for at-a-glance reminders of essential HTML5 tags.<\/p>\n<p>&bull;&nbsp; \u00a0\u00a0\u00a0 <a href=\"https:\/\/woorkup.com\/2009\/12\/16\/html5-visual-cheat-sheet-reloaded\" target=\"_blank\">Woorkup&#8217;s HTML5 Visual Cheat Sheet Reloaded<\/a><\/p>\n<p>&bull;&nbsp; \u00a0\u00a0\u00a0 <a href=\"https:\/\/blog.nihilogic.dk\/2009\/02\/html5-canvas-cheat-sheet.html\" target=\"_blank\">HTML5 Canvas Cheat Sheet<\/a><\/p>\n<p>&bull;&nbsp; \u00a0\u00a0\u00a0 <a href=\" https:\/\/adactio.com\/extras\/pocketbooks\/html5\/\" target=\"_blank\">HTML5 Pocketbook<\/a><\/p>\n<p>&bull;&nbsp; \u00a0\u00a0\u00a0 <a href=\"https:\/\/slides.html5rocks.com\/#landing-slide\" target=\"_blank\">HTML5 Slides<\/a><\/p>\n<p><a href=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2011\/02\/heart-internet-html5-5.png\"> <img decoding=\"async\" title=\"heart-internet-html5-5\" src=\"\/blog_assets\/wp-content\/uploads\/2011\/02\/heart-internet-html5-5.png\" alt=\"\" \/><\/a><\/p>\n<h4>Creating Layouts, Pages &amp; Templates<\/h4>\n<p>These step-by-step tutorials will help you get started with creating HTML5 pages and websites.<\/p>\n<p>&bull;&nbsp; \u00a0\u00a0\u00a0 <a href=\"https:\/\/www.pvmgarage.com\/2010\/04\/touch-the-future-create-an-elegant-website-with-hmtl-5-and-css3\/\" target=\"_blank\">Create an elegant website with HTML5 and CSS3<\/a><\/p>\n<p>&bull;&nbsp; \u00a0\u00a0\u00a0 <a href=\"https:\/\/www.smashingmagazine.com\/2009\/08\/04\/designing-a-html-5-layout-from-scratch\/\" target=\"_blank\">Designing an HTML5 layout from scratch<\/a><\/p>\n<p>&bull;&nbsp; \u00a0\u00a0\u00a0 <a href=\"https:\/\/tutorialzine.com\/2010\/02\/html5-css3-website-template\/\" target=\"_blank\">HTML5 and CSS3 Website Template<\/a><\/p>\n<p>&bull;&nbsp; \u00a0\u00a0\u00a0 <a href=\"https:\/\/www.webmonkey.com\/2010\/02\/building_web_pages_with_html_5\/\" target=\"_blank\">Building web pages with HTML5<\/a><\/p>\n<p>&bull;&nbsp; \u00a0\u00a0\u00a0 <a href=\"https:\/\/inspectelement.com\/tutorials\/code-a-backwards-compatible-one-page-portfolio-with-html5-and-css3\/\" target=\"_blank\">Code a backwards-compatible one page portfolio with HTML5 and CSS3<\/a><\/p>\n<p>&bull;&nbsp; \u00a0\u00a0\u00a0 <a href=\"https:\/\/html5doctor.com\/designing-a-blog-with-html5\/\" target=\"_blank\">Designing a blog with HTML5<\/a><\/p>\n<p><a href=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2011\/02\/heart-internet-html5-6.png\"> <img decoding=\"async\" title=\"heart-internet-html5-6\" src=\"\/blog_assets\/wp-content\/uploads\/2011\/02\/heart-internet-html5-6.png\" alt=\"\" \/><\/a><\/p>\n<h4>Tags, Attributes &amp; Elements in Practice<\/h4>\n<p>If you\u2019re interested in learning more about a particular feature of HTML5 and how you can apply it to your website, check out these pages:<\/p>\n<p>&bull;&nbsp; Structural tags in HTML5<\/p>\n<p>&bull;&nbsp; \u00a0\u00a0\u00a0 <a href=\"https:\/\/html5doctor.com\/native-drag-and-drop\/\" target=\"_blank\">HTML5 native drag and drop<\/a><\/p>\n<p>&bull;&nbsp; \u00a0\u00a0\u00a0 <a href=\"https:\/\/html5doctor.com\/the-header-element\/\" target=\"_blank\">HTML5: The header element<\/a><\/p>\n<p>&bull;&nbsp; \u00a0\u00a0\u00a0 <a href=\"https:\/\/dev.opera.com\/articles\/view\/html-5-canvas-the-basics\/\" target=\"_blank\">HTML5 Canvas &#8211; The Basics<\/a><\/p>\n<p>&bull;&nbsp; \u00a0\u00a0\u00a0 <a href=\"https:\/\/www.alistapart.com\/articles\/taking-advantage-of-html5-and-css3-with-modernizr\/\" target=\"_blank\">Taking advantage of HTML5 and CSS3 with Modernizr<\/a><\/p>\n<p>&bull;&nbsp; \u00a0\u00a0\u00a0 <a href=\"https:\/\/html5doctor.com\/the-video-element\/\" target=\"_blank\">HTML5: The video element<\/a><\/p>\n<p>&bull;&nbsp; \u00a0\u00a0\u00a0 <a href=\"https:\/\/dev.opera.com\/articles\/view\/custom-html5-video-player-with-css3-and-jquery\/\" target=\"_blank\">Custom HTML5 video player with CSS3 and jQuery<\/a><\/p>\n<p>&bull;&nbsp; \u00a0\u00a0\u00a0 <a href=\"https:\/\/html5doctor.com\/html-5-boilerplates\/\" target=\"_blank\">HTML5 Boilerplates<\/a><\/p>\n<p><a href=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2011\/02\/heart-internet-html5-7.png\"> <img decoding=\"async\" title=\"heart-internet-html5-7\" src=\"\/blog_assets\/wp-content\/uploads\/2011\/02\/heart-internet-html5-7.png\" alt=\"\" \/><\/a><\/p>\n<h4>Forms<\/h4>\n<p>Creating beautiful and functional forms just got easier. Take a look at these impressive guides to find out more.<\/p>\n<p>&bull;&nbsp; \u00a0\u00a0\u00a0 <a href=\"https:\/\/articles.sitepoint.com\/html5-forms\" target=\"_blank\">Sitepoint on HTML5 Forms<\/a><\/p>\n<p>&bull;&nbsp; \u00a0\u00a0\u00a0 <a href=\"https:\/\/www.alistapart.com\/articles\/forward-thinking-form-validation\/\" target=\"_blank\">A List Apart &#8211; Forward-thinking Form Validation<\/a><\/p>\n<p>&bull;&nbsp; \u00a0\u00a0\u00a0 <a href=\"https:\/\/code.tutsplus.com\/tutorials\/rethinking-forms-in-html5--net-11620\" target=\"_blank\">Rethinking forms in HTML5<\/a><\/p>\n<p>&bull;&nbsp; \u00a0\u00a0\u00a0 <a href=\"https:\/\/24ways.org\/2009\/have-a-field-day-with-html5-forms\" target=\"_blank\">Have a field day with HTML5 forms<\/a><\/p>\n<p><a href=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2011\/02\/heart-internet-html5-8.png\"> <img decoding=\"async\" title=\"heart-internet-html5-8\" src=\"\/blog_assets\/wp-content\/uploads\/2011\/02\/heart-internet-html5-8.png\" alt=\"\" \/><\/a><\/p>\n<h4>Mobile Apps<\/h4>\n<p>Wondering how you can make an HTML5 app or translate your code to mobile? Have a look at these:<\/p>\n<p>&bull;&nbsp; \u00a0\u00a0\u00a0 <a href=\"https:\/\/www.mobilehtml5.com\/post\/371921120\/tutorial-your-first-mobile-html5-app-the-basics\" target=\"_blank\">Your first mobile HTML5 app tutorial<\/a><\/p>\n<p>&bull;&nbsp; \u00a0\u00a0\u00a0 <a href=\"https:\/\/sixrevisions.com\/web-development\/html5-iphone-app\/\" target=\"_blank\">HTML5 iPhone app<\/a><\/p>\n<p>&bull;&nbsp; Design and code a cool iPhone app website in HTML5<\/p>\n<p>&bull;&nbsp; \u00a0\u00a0\u00a0 <a href=\"https:\/\/www.ibm.com\/developerworks\/web\/library\/wa-offlineweb\/index.html\" target=\"_blank\">Create offline web applications on mobile devices with HTML5<\/a><\/p>\n<p>&bull;&nbsp; \u00a0\u00a0\u00a0 <a href=\"https:\/\/www.ibm.com\/developerworks\/library\/x-html5mobile1\/index.html\" target=\"_blank\">Creating mobile web applications with HTML5<\/a><\/p>\n<p><i>Have you come across any HTML5 links you\u2019d like to share? Feel free to leave a comment below!<\/i><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Want to learn more about HTML5 and implementing it on your website, but not sure where to start? We\u2019ve pulled together a list of great links to help you with&#8230;<\/p>\n","protected":false},"author":2,"featured_media":8209,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[],"class_list":{"0":"post-5141","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-your-website"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>41 Great HTML5 Tutorials and Resources - Heart Internet<\/title>\n<meta name=\"description\" content=\"41 Great HTML5 Tutorials and Resources - Written by the team at Heart Internet.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.heartinternet.uk\/blog\/41-great-html5-tutorials-and-resources\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"41 Great HTML5 Tutorials and Resources - Heart Internet\" \/>\n<meta property=\"og:description\" content=\"41 Great HTML5 Tutorials and Resources - Written by the team at Heart Internet.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.heartinternet.uk\/blog\/41-great-html5-tutorials-and-resources\/\" \/>\n<meta property=\"og:site_name\" content=\"Heart Internet\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/heartinternet\/\" \/>\n<meta property=\"article:published_time\" content=\"2011-02-09T10:50:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_your_website1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1620\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Eliot Chambers-Ostler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@heartinternet\" \/>\n<meta name=\"twitter:site\" content=\"@heartinternet\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Eliot Chambers-Ostler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/41-great-html5-tutorials-and-resources\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/41-great-html5-tutorials-and-resources\/\"},\"author\":{\"name\":\"Eliot Chambers-Ostler\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28\"},\"headline\":\"41 Great HTML5 Tutorials and Resources\",\"datePublished\":\"2011-02-09T10:50:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/41-great-html5-tutorials-and-resources\/\"},\"wordCount\":520,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/41-great-html5-tutorials-and-resources\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_your_website1.jpg\",\"articleSection\":[\"Your Website\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.heartinternet.uk\/blog\/41-great-html5-tutorials-and-resources\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/41-great-html5-tutorials-and-resources\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/41-great-html5-tutorials-and-resources\/\",\"name\":\"41 Great HTML5 Tutorials and Resources - Heart Internet\",\"isPartOf\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/41-great-html5-tutorials-and-resources\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/41-great-html5-tutorials-and-resources\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_your_website1.jpg\",\"datePublished\":\"2011-02-09T10:50:39+00:00\",\"description\":\"41 Great HTML5 Tutorials and Resources - Written by the team at Heart Internet.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/41-great-html5-tutorials-and-resources\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.heartinternet.uk\/blog\/41-great-html5-tutorials-and-resources\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/41-great-html5-tutorials-and-resources\/#primaryimage\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_your_website1.jpg\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_your_website1.jpg\",\"width\":1620,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/41-great-html5-tutorials-and-resources\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.heartinternet.uk\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"41 Great HTML5 Tutorials and Resources\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/heartblog.victory.digital\/#website\",\"url\":\"https:\/\/heartblog.victory.digital\/\",\"name\":\"Heart Internet\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/heartblog.victory.digital\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\",\"name\":\"Heart Internet\",\"url\":\"https:\/\/heartblog.victory.digital\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp\",\"width\":992,\"height\":252,\"caption\":\"Heart Internet\"},\"image\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/heartinternet\/\",\"https:\/\/x.com\/heartinternet\",\"https:\/\/www.linkedin.com\/company\/heart-internet-ltd\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28\",\"name\":\"Eliot Chambers-Ostler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg\",\"caption\":\"Eliot Chambers-Ostler\"},\"url\":\"https:\/\/www.heartinternet.uk\/blog\/author\/eliot-chambers-ostler\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"41 Great HTML5 Tutorials and Resources - Heart Internet","description":"41 Great HTML5 Tutorials and Resources - Written by the team at Heart Internet.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.heartinternet.uk\/blog\/41-great-html5-tutorials-and-resources\/","og_locale":"en_GB","og_type":"article","og_title":"41 Great HTML5 Tutorials and Resources - Heart Internet","og_description":"41 Great HTML5 Tutorials and Resources - Written by the team at Heart Internet.","og_url":"https:\/\/www.heartinternet.uk\/blog\/41-great-html5-tutorials-and-resources\/","og_site_name":"Heart Internet","article_publisher":"https:\/\/www.facebook.com\/heartinternet\/","article_published_time":"2011-02-09T10:50:39+00:00","og_image":[{"width":1620,"height":720,"url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_your_website1.jpg","type":"image\/jpeg"}],"author":"Eliot Chambers-Ostler","twitter_card":"summary_large_image","twitter_creator":"@heartinternet","twitter_site":"@heartinternet","twitter_misc":{"Written by":"Eliot Chambers-Ostler","Estimated reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.heartinternet.uk\/blog\/41-great-html5-tutorials-and-resources\/#article","isPartOf":{"@id":"https:\/\/www.heartinternet.uk\/blog\/41-great-html5-tutorials-and-resources\/"},"author":{"name":"Eliot Chambers-Ostler","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28"},"headline":"41 Great HTML5 Tutorials and Resources","datePublished":"2011-02-09T10:50:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.heartinternet.uk\/blog\/41-great-html5-tutorials-and-resources\/"},"wordCount":520,"commentCount":2,"publisher":{"@id":"https:\/\/heartblog.victory.digital\/#organization"},"image":{"@id":"https:\/\/www.heartinternet.uk\/blog\/41-great-html5-tutorials-and-resources\/#primaryimage"},"thumbnailUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_your_website1.jpg","articleSection":["Your Website"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.heartinternet.uk\/blog\/41-great-html5-tutorials-and-resources\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.heartinternet.uk\/blog\/41-great-html5-tutorials-and-resources\/","url":"https:\/\/www.heartinternet.uk\/blog\/41-great-html5-tutorials-and-resources\/","name":"41 Great HTML5 Tutorials and Resources - Heart Internet","isPartOf":{"@id":"https:\/\/heartblog.victory.digital\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.heartinternet.uk\/blog\/41-great-html5-tutorials-and-resources\/#primaryimage"},"image":{"@id":"https:\/\/www.heartinternet.uk\/blog\/41-great-html5-tutorials-and-resources\/#primaryimage"},"thumbnailUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_your_website1.jpg","datePublished":"2011-02-09T10:50:39+00:00","description":"41 Great HTML5 Tutorials and Resources - Written by the team at Heart Internet.","breadcrumb":{"@id":"https:\/\/www.heartinternet.uk\/blog\/41-great-html5-tutorials-and-resources\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.heartinternet.uk\/blog\/41-great-html5-tutorials-and-resources\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.heartinternet.uk\/blog\/41-great-html5-tutorials-and-resources\/#primaryimage","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_your_website1.jpg","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_your_website1.jpg","width":1620,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/www.heartinternet.uk\/blog\/41-great-html5-tutorials-and-resources\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.heartinternet.uk\/blog\/"},{"@type":"ListItem","position":2,"name":"41 Great HTML5 Tutorials and Resources"}]},{"@type":"WebSite","@id":"https:\/\/heartblog.victory.digital\/#website","url":"https:\/\/heartblog.victory.digital\/","name":"Heart Internet","description":"","publisher":{"@id":"https:\/\/heartblog.victory.digital\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/heartblog.victory.digital\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/heartblog.victory.digital\/#organization","name":"Heart Internet","url":"https:\/\/heartblog.victory.digital\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp","width":992,"height":252,"caption":"Heart Internet"},"image":{"@id":"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/heartinternet\/","https:\/\/x.com\/heartinternet","https:\/\/www.linkedin.com\/company\/heart-internet-ltd"]},{"@type":"Person","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28","name":"Eliot Chambers-Ostler","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/image\/","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg","caption":"Eliot Chambers-Ostler"},"url":"https:\/\/www.heartinternet.uk\/blog\/author\/eliot-chambers-ostler\/"}]}},"_links":{"self":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts\/5141","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/comments?post=5141"}],"version-history":[{"count":0,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts\/5141\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/media\/8209"}],"wp:attachment":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/media?parent=5141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/categories?post=5141"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/tags?post=5141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}