jQuery and New HTML5 Essentials
Apart from the snazzy new logo what else does HTML5 offer us as jQuery developers?
I thought I would write a post about the rise of HTML5 and how we might take advantage of it as jQuery gurus.
The Background on HTML5?
HTML5 is a new version that is superseding HTML4.01 and XHTML1.1 as the latest HTML web format to use.
The new W3C HTML5 specification “last call” should be finalised in May 2011 (according to thier website). In particular, HTML5 adds many new syntactical features. These include the < video >, < audio >, and < canvas > elements, as well as the integration of SVG content. These features are designed to make it easy to include and handle multimedia and graphical content on the web without having to resort to proprietary plugins and APIs. Other new elements, such as < section >, < article >, < header >, and < nav >, are designed to enrich the semantic content of documents. New attributes have been introduced for the same purpose, while some elements and attributes have been removed. Some elements, such as < a >, < cite > and < menu > have been changed, redefined or standardised. The APIs and DOM are no longer afterthoughts, but are fundamental parts of the HTML5 specification. HTML5 also defines in some detail the required processing for invalid documents, so that syntax errors will be treated uniformly by all conforming browsers and other user agents. Reference: http://en.wikipedia.org/wiki/HTML5
Important things to know:
New - Defines an article
Not supported in HTML5.
W3C HTML5 Reference: http://www.w3schools.com/html5/html5_reference.asp
< audio >, < video > replace < object > for display of media content.
Note that the default supported media format for all browsers has not yet been decided.
New doctype: < !DOCTYPE html> which triggers the standards-compliant rendering mode
The Canvas element: allows for dynamic, scriptable rendering of 2D shapes and bitmap images
//This code draws a red rectangle on the screen. var example = document.getElementById('example'); var context = example.getContext('2d'); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50);
More Cool HTML5 Canvas Examples
WebGL: If web based graphics is your thing you might want to check out WebGL.
It uses the HTML5 canvas element and is accessed using Document Object Model interfaces.
The HTML5 specification is expected to include support for drag & drop. Yet to be seen but gmail uses web based drag and drop. I prefer to use jQuery for drag and drop stuff!
Better MIME Type handling: read more: http://en.wikipedia.org/wiki/MIME_type
The use of Microdata: This is bascially data nested (html machine readable annotations) within content for search engines and web crawlers better understand what information is contained in a web page. Read more on Microdata vocabularies: http://www.data-vocabulary.org/
Hello, my name is Jhon Doe, I am a graduate research assistant at the University of Dreams. My friends call me Jhonny. You can visit my homepage at www.JhonyD.com. I live at 1234 Peach Drive Warner Robins , Georgia.
Better Error Handling: A HTML5 (text/html) browser will be flexible in handling incorrect syntax.
HTML5 is designed so that old browsers can safely ignore new HTML5 constructs. No more Tag Soup!
Improvements on File API: Alot of reading material on the Official W3C Working Draft: http://www.w3.org/TR/FileAPI/
I've tested HTML5 using firefox 3.6 using this website analysis tool and it seems to be only just beating IE and lagging behind the other 3 main browsers. Not sure how accurate this tool is but the results look promising for Google Chrome.
The latest browsers HTML5 scores:
- Google Chrome 10.0.648 - 288 points
- Opera 11.1 - 244 points
- Apple Safari 5.0.3 - 228 points
- Mozilla Firefox 3.6 - 155 points
- Microsoft Internet Explorer 9 - 130 points
Because the specification has not yet been finalised I would suggest making sure the tags your using are widely supported by the browsers your targeting based on their layout engines. See this comparison table to check support for elements, attributes, Globals, Forms, API's and others. Pay perticular attention to Gecko (Firefox), Trident (Internet Emplorer) and Webkit (Safari/Chrome) layout engines. More on jQuery and HTML5 to come!!!