great place to work

Building Web and Mobile Sites Using HTML5 – A Beginner’s Guide


HTML5 Beginner's Guide from RapidValue

HTML5 is the most popular  buzz word in the web designing space, loaded with support for the latest multimedia contents, while keeping it easy to code and making it lighter. HTML5 is intended to subsume not only HTML4, but also XHTML1 and  JavaScript, making websites  expand  into programs and not being restricted to being mere pages.

Is the support  for advanced graphics, audio and video, through simple HTML tags, enough to facilitate Flash or Silverlight, or for that matter, GIF images?

HTML5 will make the web run more smoothly and enable to offer  important features. Take a quick look at some of the key elements:


New tags embedded while coding will help to  organize the information they present to search engines’ automated indexers, in a better way. This makes the search results more relevant  and easy to decipher for everyone.


Bid adieu to all those plug-ins for animated graphics and other interactive content. A new <canvas> tag will let the web designers create graphical elements in HTML. And  as for the end users, they only need to browse  to view them and no plug-in installation is required.


Instead of installing plug-ins to play video and  audio,  people will be able to load and play these contents ‘natively’ on  their web browser. This should lead to  a simpler, faster and more secure experience.

Edit Content

Users will be able to edit text in selected portions of a page. They might jot down notes about what they have viewed, and those notes will appear when they return to the site.


A ‘must –have’ feature in any branding and  marketing website, in this social networking era. HTML5 makes this  easier to implement. An application programming interface, associated with HTML5, will let web developers set up a simple chat program. This lets the users to interact with each other beyond the limits of the comments section.

Drag and Drop

Dragging and dropping has been the standard way to move files in and around the desktop. Many of us use  Gmail or Picasa to drag and drop images from desktop and upload them. Now, that there is a <drag> tag in HTML5, this will become a common feature for any website.

Simplified Page Development

Most web pages today are coded to conform to  HTML4 and XHTML standard document types. From a developer’s point of view, HTML5 broadens and simplifies page development. This is exemplified by the HTML5 document type declaration:

<!DOCTYPE html>

 as the first line of a web page replacing an HTML4 declaration, such as:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “”>

or an XHTML declaration, such as:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “”>

Web Storage

This is the feature which enables the browser to store a large amount of data, and it  becomes  possible without affecting the website’s performance. Web Storage is more secure and performs better than the current cookie based approach.

Self-Checking Input Forms

The form <input> element in HTML5 has a bunch of new attributes specifying the text type that the input box should accept, like email, url, date, number, range etc. The HTML5 browser, automatically, checks the input text before the form is submitted, thus adding a ‘selfcheck’. Few other new <input> element attributes worth mentioning are ‘placeholder’ and ‘required’.

Check out how this works by saving the following code as a .html file and opening it with Chrome or Firefox.

<!DOCTYPE html>

<html lang=”en”>

<head><title>HTML5 Email Input Check</title></head>


<form action=”javascript:alert(‘Input Verified!’);”>

<input type=”email” required placeholder=”type email address”/>

<input type=”submit”/>




Media Sanity

HTML5 takes steps towards ensuring media sanity. Instead of a mashing up of object, embed  param-elements, relying on a plugin player. HTML5’s video element is a simple container, with the content, serving as a fallback strategy:

<!DOCTYPE html>

<html lang=”en”>

<head><title>HTML5 Video</title></head>


<video src=”test.mp4″ width=”400″ height=”300″ controls>

Your browser doesn’t support HTML5 video.





Many of the new tags in HTML5 seem pretty useful for search engine optimization. I’m talking about the <article>,<head>,<navi>,<section>,<footer> tags in particular.

And the Conclusion

There are many different ways to develop websites and web pages. HTML5 provides a richer approach to design  web pages that will be more easy, convenient and simple. HTML5 makes web programming more fun. HTML5 is important given that most of the technology ecosystem players support it – including those in the mobile space, with all the major browser such as Google, Microsoft, Apple, Google, Opera and Firefox, supporting it.

Now is the time to go for it!


Shahjahan Tapadar

Technical Architect, RapidValue Solutions


Please Share Your Thoughts & Comments Below.

How can we help you?