HTML 5 Programming


HTML 5 Programming

In this article we discussed, what is HTML5, how it differs from its previous versions and a brief overview of its main new features like semantics, audio and video support, canvas etc. It is not all, there is a lot more to it then we discussed. However, you now know from where to start.

In this article we discussed, what is HTML5, how it differs from its previous versions and a brief overview of its main new features like semantics, audio and video support, canvas etc. It is not all, there is a lot more to it then we discussed. However, you now know from where to start.

HTML 5 Programming


HTML5 is a Markup language (A Markup language is a set of markup tags) used for structuring and presenting content on the World Wide Web. It is the fifth revision and newest version of the HTML standard. It offers new features that provide not only rich media support, but also enhanced support for creating web applications that can interact with the user, his/her local data and servers more easily and effectively than that of the previous version.

How it is different from its predecessors

There is a term used frequently in HTML called "TAG Soup" that refers to structurally and syntactically incorrect code. This malformed code still works. Almost 90% webpages on internet are malformed in some way or the other, due to lack of rules defined for TAG Soup. Previously, any new browser was to test all such malformed pages in existing browsers and reproduce or reverse engineer their error handling mechanism to display the webpage's content rightly. HTML5 is an attempt to discover and code this error handling for standardising and consistent display of things.

HTML5 reaches almost all devices, such as desktop, mobile, TV etc. It can also be used to create cross platform mobile applications, due to its low power usage.

HTML introduced Application Programming Interfaces (APIs) for complex web applications. A few of these APIs are:

  • Geolocation
  • Local Storage (Alternative for Cookies)
  • Camera
  • Gyroscope (a device that uses gravity to measure orientation)

To make it multimedia and graphics friendly, <video>, <audio> and <canvas> elements were added. For better semantics of document, elements such as <section>, <article>, <header>, <footer>, <aside>, and <nav> were added. Some other attributes and elements were either removed, changed, redefined or standardized. The idea here was to make anything that previously needed a browser plugin - an integral part of the browser standard itself.

Programming with HTML5

HTML programming needs but a computer. There are many HTML editors available. You can even write HTML code in notepad (for Windows) or in TextEdit (for Mac) and it is recommended to do so if you are taking your first step into coding. If you are already familiar with it, that you can also use advanced editors such as Visual Studio 2010 SP1, Microsoft WebMatrix or Sublime Text to name a few.
We will start where previous versions of HTML leave us i.e. from the technical and practical differences. If you want to know it all from the beginning click here.

  1. Document type declaration:
  2. The declaration <!DOCTYPE> helps the browser to determine both the type and version of the document and to display a web page correctly. It is not case sensitive, so you can type it anyway you want but the common declaration is <!DOCTYPE html>.

  3. Semantic elements redefined:
  4. W3C dug through huge amounts of webpages and added commonly used IDs and classes as elements. These are: section, article, header, footer, main, figure, aside and nav. Although these are self-explanatory but just in case one is unsure, below is a visualisation of these elements.

    So now, there is no need to define various divisions (done as <div>) and then separately mention the ID and/or class names for all division. These newly defined elements will convey the information to browser by themselves. You can also create your own elements using CSS.

  5. Graphics Elements:
  6. A new element was introduced in HTML5 for rendering graphics called canvas. It does exactly what it means, which is to create a blank rectangular surface for drawing. To draw graphics on it, one must use a scripting language (usually JavaScript). To know more about JavaScript click here.

    Below is the declaration for canvas, give it attributes like ID (for reference while scripting), width and height and you are good to go.
    <canvas id="myCanvas" width="300" height="300"> </canvas>

    Previously web browsers used Scalable Vector Graphics as a standard for drawing. The difference between Canvas and SVG is that canvas causes graphics to be directly rendered to display whereas SVG retains a complete model of the object to be rendered. It means that you cannot alter the graphics created from canvas. If you want to make a change, you will have to again start from the beginning. In SVG, alterations are easier to implement. You can change a specific step and browser will re-render the graphics accordingly. It makes for less work but is very heavyweight to maintain.

  7. Native Audio and Video Support:
  8. It is a thing that is most talked about. Unlike its predecessors which used plug-in like Silverlight or Flash, HTML5 have new <audio> and <video> tags which are simpler to use and are supported by all major browsers. These tags have become very popular. Youtube, which previously used flash to play videos, now has been fully redesigned to use HTML5 video tag.

It isn't perfect however. The issue is that audio and video files need codecs to play and different browsers support different codecs. So, as a resolution, you need to provide multiple sources of audio and video (using src attribute) to accommodate various browsers. The browser will try different files and will play the one for which it has supporting codec.

Both audio and video tags have a common control attribute, which, when enabled, will display play-pause button, a progress bar and volume controls. Its look and feel varies with browsers. Among other attributes, both audio and video elements have autoplay, loop and preload. Other than that, you can also change the size of player screen in video tag using height and width attributes.