Firefox 4 Features (Part 5) – HTML5

How cool is HTML5? Answer – TOTALLY! Ok, to many people, this isn’t a new fact, not by far. Now that’s a bit of a claim to make, and like with all claims, you have to back them up. The reason why HTML5 is so good is that it helps bring greater cohesion to developing for the web.How?

  • Reduced Need for External Javascript Libraries

    There are now three new attributes in form fields which help provide inbuilt validation. These are:

  • placeholder

  • pattern

  • required

  • New Form Elements

    HTML5 includes 5 new form elements that allow for forms that better and more naturally reflect real-world scenarios. With these you won’t have to add in specific libraries for customising the text field element along with validation libraries. These are:

  • url

  • email

  • phone number

  • search

  • data list

  • Native Video, Audio and the WebM – An Open Format

    The new video tag obfuscates the need to use the embed and object tags. Through the video tag, you can include your video fluidly with a variety of source formats allowing you to cater to a wide-ranging audience. With the increasing support of WebM by both Mozilla, Google and Opera, you will be able to render your content in a patent-unencumbered and royalty-free manner.

  • Examples:

Fallback to Flash

<video src=”video.ogv” controls>

<object data=”flvplayer.swf” type=”application/x-shockwave-flash”>

<param value=”flvplayer.swf” name=”movie”/>

</object>

</video>

<video>

<source id=”mp4_src”

src=”video.mp4″

type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2″‘>

</source>

<source id=”3gp_src”

src=”video.3gp”

type=’video/3gpp; codecs=”mp4v.20.8, samr”‘>

</source>

<source id=”ogg_src”

src=”video.ogv”

type=’video/ogg; codecs=”theora, vorbis”‘>

</source>

</video>

  • Inline SVN and MathML and an Improved Parser

    Do you have a lot of scientific or mathematical information that you need to include in your website or your posts. Whereas previously MathML required it’s own page, now it’s very simple and pain-free to include it wherever you need it.

  • “As a completely new parsing feature, HTML5 introduced support for inline SVG and MathML in text/html. This means that you can now use SVG and MathML inline in text/html similarly to what has previously been possible in application/xhtml+xml.”1
  • IndexedDB – Storing Data Locally on the Client

    Up until now, you could store user and session information in one of two primary ways, Cookies and Sessions. Both of these have their merits, but also have some pretty large limitations. Cookies are the subject of some contention about their merits and how much they infringe on peoples privacy, not to mention the limited amount of information that can be stored. Sessions are a lot better, but when not used well, can lead to issues with data integrity. The two are also able to be simply and quickly deleted by the user, sometimes causing them to be rather unreliable.

But in a nutshell, you can summarise the new features in to four areas.

  • Form Validation
  • New Field Types
  • New Field Attributes
  • New Form Properties

1https://developer.mozilla.org/en/HTML/HTML5/HTML5_Parser

If you liked what you read and would like to see more, please retweet it, or give it a like on Facebook or even give it some Digg love. And we always value you feedback and comments.

Matt's Pic About Matthew Setter

Matthew Setter, a passionate Australian, is the founder and chief-editor of Malt Blue. Follow him on Twitter at @maltblue and find out more about him on the team page.

Browsers firefox