Now, I've just finished reading the excellent 'HTML5 Up and Running' by Mark Pilgrim and I put together a list of F.A.Q. about HTML5 which I hope gives you a good feel about what HTML5 brings to the table.
How do I declare my page to be HTML5?
Simply start it with: <!DOCTYPE html>
Give some examples where HTML5 tries to standardise things?
- The <nav> element is used for navigation. Before developers would use their own CSS classes to style html lists to get the effect of tabs and navigation lists.
- HTML5 introduces elements such as <footer>,<header> . Before developers would write their own custom CSS classes for headers and footers. These CSS classes would have their own naming which could vary from developer to developer.
Is it possible for browsers to support some html 5 features and not others?
Yes. Firefox 3.0+, Safari 3.0+, Chrome 3.0+ all support canvas. However, if you want geolocation well then it's Firefox 3.5+, Safari 5.0+, Chrome 5.0+.
What is the best way for your page to detect what html 5 features are supported?
CanvasWhat is a canvas?
A canvas is rectangle which can be defined for your web page. There are a range of simple APIs which can be used to draw on the canvas. They are from the very simple to the very sophisticated - which can be used for animations and even games such as Mutant Zombie Monsters by Bill Scott
Can I have more than one Canvas on the same page?
Yes. And give each canvas its own id and you can access it like any other element.
How do I get Canvas support for IE7, IE8?
Name some differences between HTML5 data storage and cookies?
- Cookies don't store any information. They are just pointers to information that the client can send to the server.
- With Cookies the data being stored is server side. HTML5 data storage is client side.
- Storage mechanism are going to be more sophisticated server side. HTML5 client side data storage will have limitations.
What's the big deal with autofocus in HTML5?
- Now defining which part of the page gets default focus is easy
- All form controls can have the attribute autofocus
What kind of location information do I get with Geolocation?
The location information that you can get is basically any of the properties of the position object. These are pretty self explanatory and include:
Does the browser always have to ask the user before any calls can be made to geolocation APIs?
Give some examples of the new input types supported in HTML 5?
Search boxes, Spin Boxes, Sliders, Color Pickers, Telephone numbers, Web Addresses, Email Addresses, Calendar date pickers, Months, Weeks, Times.
Does HTML5 include support for placeholder text and what is it?
Placeholder text is default text in an input field used to prompt the user what they need to write.
And Yes its supported.
So all I need to do to show a video on my page is use the <video> element?
Well no. You need to ensure the web page supports:
- the containing format (e.g. mpeg - 4, ogg, WebM, Audio Video Interleave)
- the video codec format (e.g. H.264, Theora, VP8)
- the audio codec format used in the video (e.g. mp3, vorbis)
The <video> element makes it easy to define a preference and fallback formats.
How do I include controls (play, stop, etc.) for my video?
Just include the controls flag. e.g. <video src="myvideo.webm" width="100" height="50" controls></video>
Web Worker What is a web worker?
You can spawn multiple web worker threads.
Give an example of when you would use a web worker?If you had to do some number crunching or background I/O and didn't want to block out the user.
Name some other HTML5 features you haven't even covered here?Microdata, offline and caching features, the <article> element which allows developer more control over headers, svg support and presumably many more...
- Excellent online ref for HTML 5 http://diveintohtml5.org/
- The brilliant modernizr library which lets you check what html 5 support you have http://www.modernizr.com/
- Great demos of HTML5 canvas http://www.canvasdemos.com/
- Great HTML5 demos and tutorials http://www.html5rocks.com/en/tutorials/workers/basics/
- The WHATWG community http://www.whatwg.org/
- More HTML5 demos http://html5demos.com/
(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)