What's new in HTML5, Benefits and Perks

Marc Whitlow, 23 December 2011

The first noticeable change that we will see in HTML5 is the Doctype and Charset.  In previous versions of HTML there were many different Doctype’s. However in HTML5 the Doctype has been totally streamlined making this even easier to implement. The html Doctype is simply <! Doctype html>, this change has come about as HTML5 is now a free standing mark-up language. The HTML5 charset has also been streamlined, again making this implementation so simple. HTML 5 uses UTF-8 and is implemented with a single Meta tag <Meta charset=”UTF-8”>

The structure of a website has now been streamlined also. The developers of HTML 5 have acknowledged that all websites have a base structure consisting of headers, navigation, body content, side bars and footers as well as other features. To accompany this structure HTML5 now has new tags to support these elements within your website. Below is a list of some of the new structure features and an explanation of what they do.

 HTML 5*

<section>  - This defines different sections within a page

<header> - This defines the header of a page

<footer> - This defines the footer of a page.

<nav> - This defines the navigation of a page.

<article> - This is used to define an article item OR the primary content on a page.

<aside> - This is used to define extra contents on a page. Such as a sidebar or banner.

<figure>  - This is used to define the images with a page which are used to annotate an article.

HTML 5 also brings new Inline elements to your website. Below is a list of some of the new Inline elements available in HTML 5

<video> & <audio> -  This is used for Inline multimedia content.

<mark> - this is used to indicate content that is marked in some fashion

<time> - this is used to indicate content that is a time or date

<meter> - this is used  to indicate content that is a fraction of a known range - such as disk usage

<progress> - this is used to indicate the progress of a task towards completion

<mark> -  This represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.

<canvas> - This is used for rendering dynamic bitmap graphics on the fly such as graphs and games!

 HTML 5**

When using html 5 we have the ability to create websites faster, and more compatible with many of the webs latest browsers. 

* Image from http://coding.smashingmagazine.com/wp-content/uploads/images/html5/html5_structure.png
** Image from http://static.splashnology.com/articles/HTML-5/periodic-table.jpg