The Basics of HTML5 - dummies

By Lisa Lopuck

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

With the introduction of the new <canvas> element in HTML5, there’s now a container (similar to the CSS div element) that can hold cool JavaScript animations and interactive functions. Because JavaScript is a powerful scripting language and can do a lot of what Flash can do, this canvas-plus-JavaScript combination presents a real alternative approach to web animation supported on both desktop and mobile browsers.

The downside, of course, is that you’ll have to tame JavaScript to make all this neat stuff happen — and JavaScript is a pretty robust language! The upside is that the sky is the limit. With JavaScript, you can create fancy user interfaces, draw diagrams with basic shape elements, scale and rotate items, and load external images in and out. To use the <canvas> tag, you take two actions: You include a <canvas> tag in your HTML and create a JavaScript that targets the canvas.

Touchscreen support

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

In the past, to get a user’s geographical location, you’d have to use an IP detection script that accessed a database and make a reasonable guess about the user’s general whereabouts, accurate to a regional level. HTML5 now supports retrieving more specific geolocations: Using JavaScript, you can find longitude and latitude information through GPS (for mobile devices) and Wi-Fi router info (for laptop and desktop computers). You can even obtain altitude and a time stamp on the location. Of course, the user must agree to release that location information.

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.