jQuery and New HTML5 Essentials

HTML5-logo
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: https://en.wikipedia.org/wiki/HTML5

Important things to know:

New Tags!!!

<!-- html5 new tags -->
<article> New - Defines an article
<aside> New - Defines content aside from the page content
<audio> New - Defines sound content
<canvas> New - Defines graphics
<command /> New - Defines a command button
<datalist> New - Defines a dropdown list
<details> New - Defines details of an element
<embed /> New - Defines external interactive content or plugin
<figcaption> New - Defines the caption of a figure element
<figure> New - Defines a group of media content, and their caption
<footer> New - Defines a footer for a section or page
<header> New - Defines a header for a section or page
<hgroup> New - Defines information about a section in a document
<keygen> New - Defines a generated key in a form
<mark> New - Defines marked text
<meter> New - Defines measurement within a predefined range
<nav> New - Defines navigation links
<output> New - Defines some types of output
<progress> New - Defines progress of a task of any kind
<rp> New -	Used in ruby annotations
<rt> New - 	Defines explanation to ruby annotations.
<ruby> New - Defines ruby annotations
<section> New - Defines a section
<source /> New - Defines media resources
<summary> New - Defines the header of a "detail" element
<time> New - Defines a date/time
<video> New - Defines a video
<wbr> New - Defines a possible line-break

Deprecated Tags!!!

<!-- html5 depreciated tags: (Use stylesheets for most of these guys!) -->
<acronym> 	Not supported in HTML5.
<applet> 	Not supported in HTML5.
<basefont /> 	Not supported in HTML5.
<big> 	Not supported in HTML5.
<center> 	Not supported in HTML5.
<dir> 	Not supported in HTML5.
<font> 	Not supported in HTML5.
<frame /> 	Not supported in HTML5.
<frameset> 	Not supported in HTML5.
<noframes> 	Not supported in HTML5.
<strike> 	Not supported in HTML5.
<tt> 	Not supported in HTML5.
<u> 	Not supported in HTML5.
<xmp> 	Not supported in HTML5.

W3C HTML5
Reference: https://www.w3schools.com/tags/default.asp

< audio >, < video > replace < object > for display of media content.

<!-- The following HTML5 code fragment will embed a WebM video into a web page. -->
<video src="movie.webm" poster="movie.jpg" controls>
This is fallback text to display if the browser
does not support the video element.
</video>

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

Canvas Examples

JavaScript code may access the area through a full set of drawing functions similar to other common 2D APIs, thus allowing for dynamically generated graphics. Some anticipated uses of canvas include building graphs, animations, games, and image composition. Use jQuery for dynamic drawing on canvas?

<!-- The following code creates a Canvas element in an HTML page: -->
<canvas id="example" width="200" height="200">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

//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);

Reference: https://en.wikipedia.org/wiki/Canvas_element

More Cool HTML5 Canvas Examples

Google logo balls animation

Falling confetti animation

Raining cloud animation

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.
Reference: https://en.wikipedia.org/wiki/WebGL

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 about this here: https://en.wikipedia.org/wiki/Media_type

The use of Microdata: This is basically 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/

Microdata Example

<section itemscope itemtype="http://data-vocabulary.org/Person"> 
        Hello, my name is 
        <span itemprop="name">Jhon Doe</span>, 
        I am a 
        <span itemprop="title">graduate research assistant</span> 
        at the 
        <span itemprop="affiliation">University of Dreams</span>. 
        My friends call me 
        <span itemprop="nickname">Jhonny</span>. 
        You can visit my homepage at 
        <a href="http://www.JhonnyD.com" itemprop="url">www.JhonyD.com</a>. 
        </section><section itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
                I live at 
                <span itemprop="street-address">1234 Peach Drive</span> 
                <span itemprop="locality">Warner Robins</span>
                , 
                <span itemprop="region">Georgia</span>.
        </section>
</xmp></u></tt></strike></noframes></frameset></font></dir></center></big></applet></acronym></wbr></video></time></summary></section>

A common misconception is that HTML5 can provide animation within web pages, which is untrue. Either JavaScript/jQuery or CSS3 is necessary for animating HTML elements. Animation is also possible using JavaScript/jQuery and HTML 4.

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:
A lot of reading material on the Official W3C Working Draft:
https://www.w3.org/TR/FileAPI/

Browser Testing

your-html5-score
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

Final Thoughts:
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!!!