JavaScript
Article

jQuery and New HTML5 Essentials

By Sam Deering

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

Important things to know:

New Tags!!!


New - Defines an article

Deprecated Tags!!!


 	Not supported in HTML5.
 	Not supported in HTML5.
 	Not supported in HTML5.
 	Not supported in HTML5.
Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. Not supported in HTML5. <strike> Not supported in HTML5. <tt> Not supported in HTML5. <u> Not supported in HTML5. <xmp> Not supported in HTML5.</code></pre> <p><strong>W3C HTML5 Reference:</strong> <a href="http://www.w3schools.com/html5/html5_reference.asp">http://www.w3schools.com/html5/html5_reference.asp</a></p> <p><strong>< audio >, < video > replace < object > for display of media content.</strong></p> <pre><code class='language-markup'><!-- 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></code></pre> <p>Note that the default supported media format for all browsers has not yet been decided.</p> <p><strong>New doctype: </strong>< !DOCTYPE html> which triggers the standards-compliant rendering mode</p> <p><strong>The Canvas element:</strong> allows for dynamic, scriptable rendering of 2D shapes and bitmap images</p> <h2>Canvas Examples</h2> <p>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?</p> <pre><code class='language-markup'><!-- 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></code></pre> <pre><code class='language-javascript'>//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);</code></pre> <p>Reference:<a href="http://en.wikipedia.org/wiki/Canvas_element">http://en.wikipedia.org/wiki/Canvas_element</a></p> <h2>More Cool HTML5 Canvas Examples</h2> <p><strong>Google logo balls animation</strong><br /> <a href="http://jquery4u.com/demos/html5-canvas-animation/"> <img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/jquery4u/2011/03/google-html5-small.png" alt="google-html5-small" title="google-html5-small" width="176" height="63" class="alignnone size-full wp-image-2336" /></a><br /> <strong>Falling confetti animation</strong><br /> <a href="http://www.html5canvastutorials.com/labs/html5-canvas-interactive-building-map/"><img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/jquery4u/2011/03/confetti-html5-small.png" alt="confetti-html5-small" title="confetti-html5-small" width="125" height="108" class="alignnone size-full wp-image-2343" /></a><br /> <strong>Raining cloud animation</strong><br /> <a href="http://www.html5canvastutorials.com/labs/html5-canvas-elastic-stars-with-kineticjs/"><img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/jquery4u/2011/03/rainingcloud-html5-small.png" alt="rainingcloud-html5-small" title="rainingcloud-html5-small" width="177" height="153" class="alignnone size-full wp-image-2344" /></a></p> <p><strong>WebGL: </strong>If web based graphics is your thing you might want to check out WebGL.<br /> It uses the HTML5 canvas element and is accessed using Document Object Model interfaces.<br /> Reference:<a href="http://en.wikipedia.org/wiki/WebGL">http://en.wikipedia.org/wiki/WebGL</a></p> <p>The HTML5 specification is expected to include <strong>support for drag & drop</strong>. Yet to be seen but gmail uses web based drag and drop. I prefer to use jQuery for drag and drop stuff!</p> <p><strong>Better MIME Type handling: </strong>read more: http://en.wikipedia.org/wiki/MIME_type</p> <p><strong>The use of Microdata: </strong>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/</p> <h2>Microdata Example</h2> <pre><code class='language-markup'><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>

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: Alot of reading material on the Official W3C Working Draft: http://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:

  1. Google Chrome 10.0.648 - 288 points
  2. Opera 11.1 - 244 points
  3. Apple Safari 5.0.3 - 228 points
  4. Mozilla Firefox 3.6 - 155 points
  5. 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!!!

  • Pingback: jQuery and New HTML5 Essentials | Web Design Northamptonshire()

  • Pingback: jQuery and New HTML5 Essentials « Big Engine Media()

  • http://dannyvankooten.com Danny

    Nice post, really comprehensive. Covers much (if not all) of what’s new in HTML 5.

    One small note tho, guess you mean ‘deprecated’ instead of ‘depreciated’. :-)

  • jquery4u

    Hi Danny,

    Thanks mate, nice spot on the grammar! I’ve fixed it up! :)

    • mb

      Nice post.

      Thank You
      -mani

  • http://newmotorcyclefairings.com Dawn Draper

    Thanks for your post. I recently looked at buying a new template that says its html5 and jquery. I didn’t know anything about this until today. thanks

  • http://graphicalinsight.com/wordpress Rob

    Hi bud,

    Just thought about the last 3 years that the RelaxNG and W3c have been working on the new spec. It is really too bad that those old MCSE’s from the 90s wanted to jump from HTML4.01 to HTML5.

    Being that one is older than 10 years and the new one isn’t out of draft.

    As far as I am concerned, I have been learning, learning, learning. Just to stay relevent in the web field.

    Its about time those WYSIWYDG editors, and the people that use them to become data-entry… If anything.

    I have slaved over SQL/PL, MXML/AS3, and at times even complex AJAX methods. So I am glad that you have brought this up.

    • jquery4u

      @Danny, Dawn, Rob, Mani – thanks for your positive feedback guys much appreciated!

  • Pingback: 10 Best jQuery and HTML5 Players | jQuery4u()

  • sudhir

    Thanks for your post. you are really cover a important thing with example awesome thanks…

  • kunal

    nice post really..its very helpful for us…

  • fswdf

    hngfnbgfn

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in JavaScript, once a week, for free.