Q. What is HTML5?
A. A loose collection of standards and features that is still under development, yet can be used today.
Q. How is HTML5 different from XHTML?
A. XHTML is more XML-centric, and has overall stricter syntax; HTML5 has more flexible syntax and also opens the doors to new features.
Q. What are these new features HTML5 has?
A. Canvas, Video, Local Storage, Web Workers, Offline Web Apps, GeoLocation, Input types, Advanced Form Features, Microdata, and SVG (Scaled Vector Graphics). Warning: almost all of these require some knowledge of Javascript.
Q. How about a bit more detail, and an example of each feature?
A. Okay. See following notes and links. Then see the rest of this QA below.
Canvas is a way for you or the visitor to the site to draw on the page.
And here's an example of what's possible with Canvas. Here are some more demos of Canvas
Video is a way for to use "pure" video like MP4, etc, without requiring the Flash player. Like the img tag is for images, video needed its own tag as well. HTML5 video gives devices that do not support Flash (such as iPhone, iPad, etc) a way to access video. Yes it is a bit of a pain because you need to encode the videos into different formats in order for them to be read.
And here's a demo of Video
Local StorageLocal Storage is a way for you to save information on the client's website.
And here's a demo of Local Storage
Web Workers is a way for you to thread your Javascript so that your scripts run in the background.
And here's some more detail on Web Workers
Off-line Web Apps is a way to work on the Web "offline" and then periodically update changes.
Sorry, no demo.
Geolocation is not technically a part of the HTML5 spec, but it is tied in many ways to HTML5 anyway so I'm including it here. Geolocation lets you locate the web visitor (if they give you permission!).
And here's a demo of Geolocation.
SVG is Scaled Vector Graphics, and allows you to draw with vectors on a page. SVG can be used with Canvas, or all by itself. SVG is built using an XML syntax.
Here's a really simple SVG example, and here's a onemore complex SVG example.
Canvas is a way for you or the visitor to the site to draw on the page.
And here's a demo of Canvas
Q. How did the DTD, and Character set, and semantics change between XHTML and HTML5?
See this page from Dive into HTML
Q. I understand that IE 8 and previous will not recognize the new elements like "article". So how can I get IE to play along?
A. Put this code in the head of your document and even IE will properly play with your article element:
<script>document.createElement("article");</script>
Q. Is there a way I can enable all the new HTML elements at once?
A. Sure! Use Remy Sharps cool script, find it here.
Q. Which browsers/versions support HTML5?
A. There are a lot of sites that can help here. Can I Use is one of the better ones.
Q. How do I use HTML5 Features when not all browsers can support it?
A. You can use modernizr to detect if the browser supports that particular feature, and then, if it does not, write Javascript to either ignore that feature or implement that feature another way.
Q. Okay so now I know what the new element types are in HTML5 - but is it still okay to use div id="footer", div id="header", div class="section", and that kind of stuff?
A. It is totally okay and valid HTML5 code to do that, in fact it is recommended unless you are going to take the steps discussed earlier to make sure that IE will recognize the new elements.
HTML5 Resources:
HTML5.org - some good details on the new HTML
Wikipedia sums up HTML5 - some good overview and short history
Dive Into HTML 5 - a great "free" online book with plenty of examples
Q. What is CSS3?
A. CSS3 is the latest implementation of CSS, which provides a host of new features such as rounded corners, drop shadows, text shadows, gradients, transitions, etc. See a complete list of CSS3 features here.
Q. What, are some CSS3 features I can start using now?
A. The easiest and most visually rewarding features are probably rounded corners, drop shadow.
Q. How shall I deal with CSS3 features that are not implemented on all browsers?
A. You have a few choices.
1. Ignore CSS3
2. Implement CSS3 features where they are supported, and let the other browsers ignore the features.
3. You can implement CSS3 features where they are supported, and where they are not supported, you can setup fallback methods to get similar results.
Method 2 works quite well with, for example, rounded corners and shadows. The page will look better in supported browsers, obviously, but the page will still be readable with Internet Explorer versions 7-8, and earlier versions of the other browsers. Rounded corners will be visible on 75% of your visitors, depending on your target market. Sometimes that is good enough, and the figure will continue to rise as IE9 becomes more commonplace.
Method 3 also works well, but it can be tedious; to fake rounded corners, for example, you will have to create small cutout shapes that will make your corners appear rounded. If you decide to change the color or the size of the radius, you will need to generate new shapes. If this is a big deal and the client wants to pay for it, it makes sense to do; but if the site design is not yet solidified, or there are budget constraints, it may not be worth it.