What’s New in HTML 5 | Fun things you can do with HTML5

HTML5 – the 5th major revision of HTML is a class apart from its predecessor HTML4 – both in terms of features and ease of use. And what better way to learn the new features in HTML than by trying and seeing it for your self.

To explore the new features in html5 – simply download this blank html5 markup.txt file and start playing with the new features that are listed below.

Clean Code & Markup

HTML doctype declaration boils down to just two words:
Character Set – another two little sweet words: <meta charset=”UTF-8″>
<audio> & <video> – simple and clean tags to add audio and video to your web pages.

Form Elements

Support for newer ‘form’ elements is perhaps the most awesome feature of html5.

HTML5  has introduced 13 new input types which are as follows: color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url and week.

What this means is that a code like: <input type=”color” name=”mycolor” /> should automatically create a color picker drop down like this:
Hide inputcolor

or a code like <input type=”date” name=”birthdate” /> should automatically create a date picker drop down like this:

inputdate

Sadly however most of the browsers have not yet updated to support this feature. As on the date of writing –  this feature is only supported by Opera browser.

Other great elements that have been added to the html form are:
a) Input element include autocomplete, min, max, multiple, pattern and step.
b) The input and button elements have formaction, formenctype, formmethod, and formtarget as new attributes.
c) The button element can now have formnovalidate attribute for inbuilt html side form validation

Support for Scalable Vector Graphics

If you love graphic designing, you will surely fall in love with this new-found support for SVG elements in HTML5. Implementation is simple: simply include the vector graph element within the  code. Here’s just a list of few things that you can now do with HTML5 and SVG.

A code like: <svg> <circle cx=”100″ cy=”50″ r=”40″ stroke=”black” stroke-width=”2″ fill=”red” /> </svg> will produce a vector graphic like the one on the right:
Hide circlesvg

You can use similar markup to draw shapes like rectangle, ellipse, line, polygon, polyline, path, text and different strokings. What’s more, you can add effects like blur effects and drop shadows, gradients and much more. For more on this, check out SVG reference sheet here.

What’s more, you can animate the texts and objects using the <animate> </animate> markup.

What this means is that we will soon have html5 designed games and animations all around the place !

Support for Mathematical Markup Language

HTML5 now extends support for Mathematical Markup Language, or MathML thus allowing for writing and processing mathematical notation on the Webpage. Wondering what good it will serve ?
At the minimum, you can with ease publish complex mathematical formula like this:
notation

Support for Webpage Standard Layout

HTML 5 introduces support for standard webpage layouts like navigation, header, content, sections, sidebar, images that annotate articles and footers. Towards this HTML5 has introduced the following new tags: <header>, <nav>, <article>,<section>, <aside>, <figure>, <footer>

How will this change things ?

For one, CSS designers will no longer have to define new i.d elements for headers, footers, sidebars and other areas. They can instead specify CSS properties for these inbuilt html5 tags.

Deprecated Elements

HTML5 has deprecated certain elements from html4. The list of deprecated elements include acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, noscript, s, strike, tt and u.

While HTML5 is likely to be backward compatible for at least next 10 years, it is still a good idea to stop using these elements in your new web designs.

Switching to HTML5 – Has the time come ?

Despite all these great features it’s not advisable to completely switch to HTML5 at this stage.

A complete switch to HTML5 will be fruitful only when all browsers become HTML5 compliant and when W3C finally recommends a switch. As per some estimate – this should keep us busy for the next 5 years (at least).

Know more cool HTML5 features ?

Suggest them as comments.