HTML5 is an evolving web standard. It has good adoption across browsers – IE (10), Firefox, Chrome, Safari, Opera. To see the level of compliance in your browser, visit http://html5test.com. In this post, we will go over the basic features of HTML5.

Semantic tags

Semantic tags like article, section etc are more meaningful than plain div tags.

Input types

HTML5 introduces new input types – email, telephone, date, number. For example, email allows user to enter only valid email addresses. Date input shows a calendar to pick dates. Number input allows only integers or decimals.

Canvas

Draw shapes within a canvas tag using JavaScript. Get a context. Use the context to draw shapes and strings.

SVG

Canvas allow bitmap operations. HTML5 SVG supports vector graphics. The following markup draws a rectangle, circle and some text using SVG.

CSS3

Define styles using CSS3. For eg, render a rounded border as follows.

CSS3 has rich animations. The following style animates the height for a duration of 5 seconds:

Geolocation

Geolocation gets the location of the device. The following script gets the latitude and longitude of the current position.

Multi-media

HTML5 has good multi-media support. The audio and video tags in HTML5 embed audio and video respectively.

Other features

LocalStorage, IndexedDB, WebWorkers, and WebSockets are other interesting features in HTML5. Local storage provides more storage within the browser session. Much more than what is available with cookies. IndexedDB allows a database to embedded locally. WebWorkers allows browsers to run long processes without affecting the UI. WebSockets allow bi-directional socket communication with the server, the most popular being chat and gaming applications.

Learn HTML5 in 5 minutes
Tagged on:

Leave a Reply

Your email address will not be published. Required fields are marked *