HTML5 articles, tutorials and websites
20/03/2010With the advent of HTML5 there has been a plethora of information available online on how to understand, program and work with this new specification. The following is a list of what I consider the be the best and most helpful HTML5 articles, tutorials or websites that I’ve found over the past year.
Please let me know through a comment if you know of any other great HTML5 articles, tutorials or websites, and I’ll be glad to post them. Also thanks to all of the folks who produced all of these great free learning experiences.
Articles
At the Confoo.ca conference in Montreal, Quebec, Mark Pilgrim of Google gave an impressive keynote providing an overview of the current state of HTML 5. The information in this post was inspired by his comphehensive talk. Are you wondering what is currently available in HTML 5 and if you can start using it?
HTML 5 differences from HTML 4
HTML 5 defines the fifth major revision of the core language of the World Wide Web, HTML. “HTML 5 differences from HTML 4″ describes the differences between HTML 4 and HTML 5 and provides some of the rationale for the changes. This document may not provide accurate information as the HTML 5 specification is still actively in development. When in doubt, always check the HTML 5 specification itself.
This document illustrates how to write HTML 5 documents, focussing on simplicity and practical applications for beginners while also providing in depth information for more advanced web developers.
More on developing naming conventions, Microformats and HTML5
It seems like a lifetime ago that I first sat down with a cup of tea and a bourbon biscuit and thought about the conventions that we use for naming HTML/XHTML id and class attribute values.
I’m going to make a bold prediction. Long after you and I are gone, HTML will still be around. Not just in billions of archived pages from our era, but as a living, breathing entity. Too much effort, energy, and investment has gone into developing the web’s tools, protocols, and platforms for it to be abandoned lightly, if indeed at all.
This specification defines the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). In this version, new features are introduced to help Web application authors, new elements are introduced based on research into prevailing authoring practices, and special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability.
Tutorials
A Selection of Supported Features in HTML5
You can refer to the PNG Image with Color Coding or use the tabular data option below. Note: The table includes some modifications in regards to Opera support for audio and video which are not represented in the PNG.
Today we are going to have a quick look into the layout of HTML 5, we have put together a very basic HTML 5 page so that you can get a rough idea of what to expect from the upcoming code.
Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3
HTML5 is the future of web development but believe it or not you can start using it today. HTML5 is much more considerate to semantics and accessibility as we don’t have to throw meaningless div’s everywhere. It introduces meaningful tags for common elements such as navigations and footers which makes much more sense and are more natural.
Coding A HTML 5 Layout From Scratch
HTML5 and CSS3 have just arrived (kinda), and with them a whole new battle for the ‘best markup’ trophy has begun. Truth to be told, all these technologies are mere tools waiting for a skilled developer to work on the right project. As developers we shouldn’t get into pointless discussions of which markup is the best. They all lead to nowhere. Rather, we must get a brand new ideology and modify our coding habits to keep the web accessible.
Much of HTML 5’s feature set involves JavaScript APIs that make it easier to develop interactive web pages but there are a slew of new elements that allow you extra semantics in your conventional Web 1.0 pages. In order to investigate these, let’s look at marking up a blog.
As we have mentioned in some of our previous articles & tutorials HTML 5 offers designers, developers and people in general a much richer experience, we are still just scraping the surface of the new markup, so today we are going to have a look at how to create a HTML 5 page that uses the new drag and drop feature.
How HTML5 Web Sockets Interact With Proxy Servers
n this article, I’ll explain how HTML5 Web Sockets interact with proxy servers, load balancing routers, and firewalls. Additionally, I’ll explain how Kaazing WebSocket Gateway and its Web Socket emulation can add additional value.
If you’re a front-end developer, I want you to do me a favor. I want you to pick a project and mark it up in html5. I’m not going to ask you to code a game experience inside the canvas element or replicate a youtube video player or do anything really, except challenge you to declare semantic information about your content blocks.
HTML5 Audio Data API – Spectrum Visualizer
The experimental audio data API allows the programmer to access raw audio data and a processed FFT spectrum of the currently playing audio data through the HTML5 audio tag.
Without going into the discussion of why HTML 5 is available today and not 2022, this article is going to give you a series of HTML 5 boilerplates that you can use in your projects right now.
The HTML 5 specification includes lots of new features, one of which is the canvas element. HTML 5 canvas gives you an easy and powerful way to draw graphics using JavaScript. For each canvas element you can use a “context” (think about a page in a drawing pad), into which you can issue JavaScript commands to draw anything you want. Browsers can implement multiple canvas contexts and the different APIs provide the drawing functionality.
XHTML 2 is dead, long live HTML 5! According to W3C News Archive, XHTML 2 working group is expected to stop work end of 2009 and W3C is planning to increase resources on HTML 5 instead. And even although HTML 5 won’t be completely supported until 2022, it doesn’t mean that it won’t be widely adopted within the foreseeable future.
HTML5 id/class name cheatsheet
The mapping of HTML5 structural elements to id and class names for use with divs
Here is another impressive HTML5 example, while its not exactly advanced it does show demonstrate the raw power of HTML 5. This could also be used as a Windows Vista desktop widget or even for Windows 7 once it is released. This code could be changed to check the status of your domains. (Please test this out by disabling your internet connect either unplug your network cable, or go into “Work Offline” with your browser)
HTML 5: Nav Ambiguity Resolved
One of the new things HTML 5 sets out to do is to provide web developers with a standardized set of semantic page layout structures. For example, it gives us a nav element to replace structures like div class=”navigation”.
We’ve had a number of people ask about templates, boilerplates, and styling for HTML 5. Last week, Remy introduced some basic boilerplates for HTML 5, so to keep the momentum going, I’ve modified Eric Meyer’s CSS reset for you to use in your HTML 5 projects.
I like the xhtml syntax. It’s how I learned. I’m used to lowercase code, quoted attributes and trailing slashes on elements like br and img. They make me feel nice and comfy, like a cup of Ovaltine and The Evil Dead on the telly.
Preparing for HTML5 with Semantic Class Names
Some time ago I was asked in an interview whether I preferred HTML or CSS. It was a bit like being asked if I prefer pens or pencils. I made an instinctive choice. I chose HTML. It’s the typography of data; the inflection in our voices; the grid of meaning upon which presentation can flourish. I find it beautiful when done well, and that’s why watching HTML 5 unfold with new and refined elements is fascinating to me.
he video element is brand new in HTML 5 and allows you to, get this, play a movie in your website! The data of this element is supposed to be video but it might also have audio or images associated with it.
Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies
HTML5 defines a standard way to embed video in a web page, using a video element. Support for the video element is still evolving, which is a polite way of saying it doesn’t work yet. At least, it doesn’t work everywhere. But don’t despair! There are alternatives and fallbacks and options galore.
The debate over HTML5 vs. Flash is great for comments and page views, but all that chatter obscures the bigger issue: Should developers and designers invest in HTML5?
Yes, You Can Use HTML 5 Today!
There have been many changes to the HTML 5 landscape since my colleague, Lachlan Hunt’s 2007 article on A List Apart, A Preview of HTML 5. Let’s see what’s happening in the world of HTML 5.
Websites
The site came about following a HTML5 meetup after the Future of Web Design conference in London (2009). We decided that there wasn’t a resource that catered for the people who wished to find out more about implementing HTML5 and how to go about it, so we thought we’d better build one.
A showcase of sites using HTML5 markup
Our website is your one stop website for everything related to the new HTML 5 code, You will find many useful guides for HTML 5 resources including HTML 5 Tutorials, HTML 5 examples and HTML references.
There are 20 comments in this article: