What is new in HTML5 ?

HTML5 is the latest version of the markup language used for structuring and presenting content on the World Wide Web. In less technical terms, HTML is the language used to create a website and HTML5 is its latest version.

What is new?

HTML5 has introduced some new elements like <header>, <footer>, <nav>, <section>, <audio>, <video>, <canvas> and <svg>.  It has also introduced some form control attributes that will help display controls in a form with minimum coding. Some examples are <input type=”range”…> which shows a slider control and <input type=”date”…> which displays a calendar to choose a date.

You can see some sample HTML5 source code I wrote and the result below. Click on Run Pen to view. You can view the code by clicking the HTML tab and you can interact with the results under Result tab.

HTML5 also introduced a bunch of interesting APIs. You can use HTML Geolocation API to locate a user’s position. HTML Drag and Drop is another common feature using which you can “grab” an object and drag it to a different place. You can check out the cool Drag and Drop feature on the W3Schools website. HTML Application Cache in another feature which means that a web application is cached and accessible without an internet connection.

What is Obsolete?

Some elements have been replaced (for example, <acronym> with <abbr>) and some completely dropped (for example, <frame> and <noframes>). You need to use CSS in place of some of the obsolete elements (for example, <font>, <center> and <strike>).

Why use HTML5?

I am using HTML5 for various things during my web development:

1. For prototyping: I usually create my first prototype using pen and paper. But then I straight away move onto a simple prototype using HTML and CSS
2. For template/theme design: Although most part of WordPress is written in PHP, it is HTML5 and CSS that defines the finer details (like, where I want the article date to appear)
3. For page design: Sometimes while writing an article, I think of adding some colour or design element and this is another place where HTML becomes handy (for e.g., the green box I used below)