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

  1

  text/html

  . This means that you can now use SVG and MathML inline in

  1

  text/html

  similarly to what has previously been possible in

  1	application/xhtml+xml

  .”¹

• 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

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.

• Bio
• Latest Posts

Matthew Setter

Matthew is a freelance technical writer and technical editor and regular contributor to a number of tech publications, including PHP Architect, PHPMaster, CloudSpring and New Relic. When he's not contributing there, he's writing content here on Malt Blue. What can he say, he's an avid technical writer and software developer. Get in touch if you want awesome, up to the minute, technical content for your blog, business or publication.

Latest posts by Matthew Setter (see all)

• Zend Framework 2 – Hydrators, Models and the TableGateway Pattern - 05/15/2013
• Use RouteMatch in Zend Framework 2 For Easy Routing - 05/01/2013
• Why Testing Makes a Project Successful and You Can’t Afford to Deny It - 04/23/2013