The Basics of HTML5
The newest evolution of HTML is HTML5, which takes web design leaps and bounds forward. This generation offers an expanded set of elements and properties — allowing for cool new design and interaction possibilities. Because HTML5 also supports mobile web devices, it has rapidly become the new standard and is by now supported by all major browsers (although Internet Explorer does require that the web page include a code shim — a redundant code segment written in a way that Internet Explorer can understand).
A mobile and device-friendly solution for websites
With the introduction of HTML5, one particularly thorny issue may have finally been laid to rest: achieving cool animation effects on Apple devices without the use of Flash. The Apple device platform has never supported Flash. This refusal was more about Flash hogging battery-and-bandwidth resources than about company rivalry with Adobe (the makers of Flash). Whatever the case, any websites that used Flash for anything whatsoever — say, navigation, interaction, or animation effects — would simply not work on iPhones or iPads. HTML5 came to the rescue.
An animation alternative
In recent years, the advent of touchscreen devices has forced designers to rethink the way they design interfaces. Designers can make use of several touch events: finger on something, finger moving across an element, and finger removed — or (in more technical terms) touchstart, touchmove, touchend, and touchcancel. These HTML5 native events work in WebKit (which are the Chrome and Safari browsers) and enable almost any kind of finger interaction such as drag, pinch and zoom, and rotate.
Geolocation for websites
Now, a user’s longitude and latitude points are only useful to retrieve in the context of a map — so you have to integrate this data with Google’s Static Map API.
The other thing to note is that once the browser knows your position, it’s possible to track your position as well! That might sound Big Brother-ish, but imagine a mobile application that knows where you are in a shopping mall and serves up coupons for stores you are in or near as you move about.
Powerful content handling
Several upgrades in HTML5 allow designers more control over various content elements on the page. For example, the new contenteditable attribute can be assigned to any element that you want the user to be able to edit — say, a text field that has example text that the user can replace with purpose-specific text.
Another upgrade that HTML5 provides is an expansion to the form-design toolkit. Now you can add range sliders, a search field, an option to insert default text into input fields such as find books, a pop-up calendar for date selection, and even a color selector that opens the computer’s color picker. Also, HTML5 offers native support for required form elements. You can simply add the required attribute to an input, select, or text area element. In concert with this new required component, CSS allows you to target these required fields and give them a unique look and feel.