It isn’t yet a standard, but I can’t wait for Firefox and IE9 to get properly on board – at the time of writing, Chrome and Safari both support a fair chunk, but this is likely to change when the standard gets officially signed off.
DOCTYPE
First, the new doctype is so much simpler!
The !DOCTYPE declaration.
HTML Video:
Again, so simple, no more huge chunks of flash vars and calls for scripts with divs for placing!
See Apple’s specification for Safari / iPhone and the iPhone Safar / Viewport configuration is worth a little mention..
The correct codec is needed (x264 is the most popular right now, but firefox uses the open source ogg codec).
You can use Handbrake to encode the mp4’s to the iPhone’s strict requirements and this should work for chrome/safari – Firefox does not yet support it (it uses the ogg codec, but may soon support x264) and IE9 will support x264 upon release.
There is also a fall-back method for using traditional video tools if html5 is not supported – so don’t worry too much about compatability – you can wrap your old video code in the new video tags (in theory, although we will see how well that works in practice!).
HTML 5 Tags
You may want to add HTML 5 tags to dreamweaver – it takes a couple of minutes, but worth it.
The big differences (besides audio/video tags) are the semantic tags for defining different segments of the page – it makes things start to look like a big XML document so that machines can process the info better. So now you have a ‘header‘ segment of the page, the ‘nav‘ segment, a ‘section‘ segment and nested ‘articles‘ within the main ‘sections’ of the page. At the bottom is of course the ‘footer‘ segment. You can also use ‘footer’ segments within each ‘article’ to contain the reply/comment/next navigational links or author/publication dates that might appear at the end of the article segment. All these tag can be styled with css too – which removes a few more div’s. See more on all these tags and there use here.
What about all those old browsers? Will IE6 Support it?
See the above link; note the bit towards the end about using javascript to allow IE6 to apply CSS styles to the new HTML5 tags – so all websites can move towards it.. when the W3C people actually sign it off as a standard!
More on the html5 specification / tags:
http://www.w3schools.com/html5/default.asp
http://www.w3schools.com/html5/html5_reference.asp
http://en.wikipedia.org/wiki/HTML5
Leave a Reply