Thursday 7 February 2013

HTML5 - A Basic Guide For Beginners


In 2011, Adobe announced that it will stop the development of Flash for mobile browsers. Surely, this bit of news came as a bit of shocker to many, since a number of users had started using their mobile devices to browse the web by this time. Luckily, the solution to this problem was already there in the form of HTML 5. 

html5

The foundation of HTML 5 – which is the latest standard of the HTML, was laid way back in 2004 and the very first version was launched in 2008 in Firefox browser. Today, a number of top sites are being developed using HTML 5. 

This is mainly because of the numerous advantages offered by HTML 5. For instance,  it reduces the need for external plug-ins, which was not the case with Flash; it provides better error handling, it replaces scripting with more markup and makes it easy for web developers to code web pages; it is device independent and offers cross-platform compatibility. However, the best thing about HTML 5 is that it is compatible with almost all the latest web browsers such as Mozilla Firefox, IE 9, Google Chrome, Safari etc, which solves the problem of discontinuity of Flash mentioned above.

So what exactly is HTML 5?

HTML 5 is no Rocket Science. It is basically the plain old HTML accompanied by JavaScript and CSS.  It consists of new and improved elements, attributes, offers full CSS 3 support, audio/video tags that are easy to use, 2D/3D support, web storage, local SQL database, web app and a special type of media element called the Canvas.

Let us look at some of the new elements of HTML 5:

The Doctype declaration: 

The Doctype declaration in HTML 5 is a breeze. All you need to do is define it once and then start coding. For instance a simple layout of HTML 5 with a doctype declaration looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<header>
</header>
</body>
</html>

The Canvas element:  

The Canvas element is the best thing to happen in HTML 5. It is used extensively in graphic web apps, which needs to be dynamic in nature. It is this element, which holds immense potential for the web pages in the years to come.
<canvas id= “Canvas1” width=“100” height= “80”>
</canvas>

Some new media elements:  

HTML 5 also brings with itself a number of new media elements namely, <audio>,<video>,<embed> and <source>. 

Video
 
<video width=”350” height=”200” controls>
<source src=“movie1.mp4 type=”video/mp4>
</video>

Audio

<audio controls>
<source src= “abc.mp3” type=“audio/mpeg”>
</audio>

So, these were some of the highlights of HTML5. These and numerous other features make HTML 5 the future of web technology. You can read more about this wonderful technology on the internet, go through some of the best sites developed using it and even use it for developing your very own web pages. Cheers!

AVI Web Solutions is a leading professional web design outsourcing company in London offering creative web design and quality web design services at affordable rates. Feel free to call us at 020 7096 0572