Building Web and Mobile Sites Using HTML5 – A Beginner’s Guide
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.
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:
as the first line of a web page replacing an HTML4 declaration, such as:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
or an XHTML declaration, such as:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
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.
<head><title>HTML5 Email Input Check</title></head>
<input type=”email” required placeholder=”type email address”/>
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:
<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!
Technical Architect, RapidValue Solutions