Interactive Web with HTML5

By 3rd June 2012August 25th, 2015Technology & Business Intelligence
HTML5 logo

What’s new in HTML5

HTML5 is the biggest and most powerful HTML specification that W3C ever come out with.
Now developers have tools they can use to create astonishing applications that are more powerful and interactive than ever before.HTML5 is full of new functionality including the new semantic elements, the audio and video support and the canvas tag for graphic manipulation.

1. New markup

HTML5 introduces 30 new semantic elements like: header, nav, footer, aside, figure, section, article etc. That allow you to create clear HTML structure that better describes content of your page and gives you more flexibility in defining the page layout.
For the list of new HTML5 elements follow this link: W3C HTML5 new elements.

2. Forms with new input types and built in validation

With HTML5 we get thirteen new values for the <input>’s type attribute. They are as follows: search, tel, url, email, datetime, date, month, week, time, datetime-local, number, range, color. With them we can create native datepickers, colorpickers and so on. If a browser doesn’t support a given type, it will be rendered as a text field. HTML5 introduces many new attributes for input elements such as: autocomplete, autofocus, list, placeholder, max, min, multiple, pattern, required, step for easy client side form validation.

Check if your browser support new input types and attributes here and play with the demo form.

3. Canvas and SVG for graphic

Canvas allows for dynamic scriptable rendering of 2D graphics, so that you can draw, scale, rotate… start being creative!
SVG is XML based format for describing two-dimensional vector graphics that allows you to create interactive and animated images on the Web.

Below some samples to see what can you use canvas and SVG for:
Canvas Pad
Canvas Pinball
SVG Diagrams
SVG Clip paths

4. Drag and drop

Would be nice not have to use Javascript libraries to do such a common operation today as Drag and Drop page elements. Native browser Drag and Drop means faster, more interactive and responsive web applications. As for many HTML5 features, there is still work in progress on specification for Drag and Drop. The spec defines an event-based mechanism, JavaScript API, and additional markup for declaring element be draggable.

See HTML5 Drag and Drop demo here

5. Audio and Video

Not to forget some more features like Geolocation, local storage,  application cache, File Api, Cross-window Messaging,  Web workers, Touch Events, Web Sockets for real time connections… and more!

You can try HTML5 features on Microsoft Test Drive and HTML5 labs. Check out HTML5 Laboratory website as well. Run examples in different browsers.

HTML5 will probably not be fully supported for the next few years. When you decide to use HTML5 for your website remember to provide fallback functionality to older browsers. You can use the feature-detection library like Modernizr  and polyfills that will help you fill the gaps in old browsers.

Stay in touch for next articles about CSS3 and using Modernizr library.