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.
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.
or a code like <input type=”date” name=”birthdate” /> should automatically create a date picker drop down like this:
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.
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:
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.
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.