HTML5 is the latest revision of HTML, with the goal to make it easier to develop web applications. HTML5 has much simple syntax compared to HTML 4 and it offers lots of new features. This articles gives introduction to HTML5.

What you can do with HTML5?

- Offline Applications with Application Cache

With the HTML5, it is possible to make your web applications run offline as well. HTML5 offers offline storage feature called application cache, or AppCache to store the files in a cache, so that when the user is offline, the browser still has access to the necessary files. These files can be HTML, CSS, Javascript or any other resources the web page needs to run.

- Drag and Drop

HTML5 offers a native drag and drop feature, which allows to design interactive applications. Through Drag and Drop feature you can drag any element and drop it to the desired location.

- Add Geolocation

The HTML5′s geolocation API lets you share your location with the trusted websites.
Priavcy is a major concern with the geolocation feature. W3.org states:

User agents must not send location information to Web sites without the express permission of the user.

So for example if a user visits a web page which has implemented geolocation, using Firefox web browser.  The browser will ask for permission if the user want to share his location. If the user consent, Firefox gathers information about nearby wireless access points and visitor's computer IP address, sends this information to Google Location Services whihc is default geolocation service in Firefox. That location estimate is then shared with the requesting website.

- Audio and Video

Currently HTML lacks the necessary features to embed the multimedia files. Therefore multimedia files are embedded in HTML using various plugins. For example, Flash is widely used to embed audio and video files. However this can be done very easily in HTML5 using audio and video elements, without using any pligins.

- Form Inputs

HTML5 provides several new elements for the input type attribute, such as pop-up calendars, color selectors, number spinners and many more. These input features help building very efficient forms with better input control and validation.

Simplified Syntax

Doctype:

The doctype declaration is the first thing to do in an HTML document. It tells the web browser about what version of the markup language the page is written in.
For example, HTML 4.01 Transitional doctype is specified as:

The XHTML 1.0 Transitional doctype is:

In HTML5, the doctype declaration is much simple, and is just:

Character Encoding:

To validate or display an HTML document, a program must choose a character encoding.
Character encoding tells the browser and validator what set of characters to use when converting the bits to characters.
Following is example of UTF-8 Character encoding declaration in HTML 4.01:

The XHTML

The character encoding syntax is very simple in HTML 5, and that is:

So our very basic HTML5 document can be:

The <script> tag:

The <script> tag is used to define a client-side script, such as a JavaScript. In HTML 4. the type attribute is required, but it is optional in HTML5.
For example, In HTML4, the script tag is used as following:

and in HTML5:

HTML5 has added a new optional attribute 'async' to the script tag. which tells the browser to execute the script asynchrously with the rest of the page, so the script will be executed while the page continues to load. This can be used as following:

or

The <link>tag:

The <link> tag defines the relationship between a document and an external resource. This tag is commonly used to include the CSS files. For example,

In HTML5, the type attribute is not required for the <link> tag, similar to <script>. For example:

New elements in HTML5

HTML5 has added some very interesting and useful tags for structuring the markup and simplifying the developement.  Some of the important tags are:

<header>
The header tag contains the header of the web page, which is typically on the top of a page containing logo and some other information such as slogan and menu etc. Instead of using <div id="header">, it can be used as <header>.

<nav>
The <nav> tag is used for the navigation menu. For example, Instead of using <div id="nav"> for the navigation, you can use <nav>.

<article>
The <article> tag represents independent, self-contained content. Examples of possible articles can be blog posts, news article, forum post, or user comment etc.

<section>
The <section> tag is used to separate the different parts of the page.
A section is a grouping of content, typically preceded by header, possibly with a footer after. sections can be nested inside of each other, if needed, and can hold any amount of typical markup.

<aside>
The <aside> tag specifies a section of the page having content that is tangentially related to the content around it. The <aside> tag can be used for sidebars or any other content that we can consider separate from the main content of the page.

<figure>
The <figure> tag is used for annotating illustrations, diagrams, photos, and code listings, etc. The<figcaption> is used inside the <figure> tag for the caption of the figure.

<footer>
The <footer> tag is used to represent the footer section and is typically located at the bottom of a page. The <footer> usually contains information such as the author, copyright information, links to terms of use, and privacy policy, etc. The contact information within a <footer> tag should be marked up using the <address> tag.

Modified elements

<a>
The <a> tag in HTML5 allows to wrap multiple emements in a single a element. For example,

In HTML 4.01, the <a> tag could be either a hyperlink or an anchor, but in HTML5, the <a> tag is always a hyperlink. If no any href attribute is specified, it is only a placeholder for a hyperlink.

<b>
The <b> tag is generally used to specify the bold text. However in HTML5, the intention with this tag is to markup text as bold without conveying any extra importance.

<hr>
In HTML5, the <hr> tag displays a horizontal rule, and defines a change in the content, while in HTML 4.01 it just displayes a horizontal rule.

<i>
The <i> tag is not exclusively for italic style of text in HTML5 (although it can be italic). It now represents the text that is in an alternate voice or mood or otherwise offset from the normal prose'.

6. Removed elements

In addition to the new and modified elements, there are some of the elements that are no longer supported in HTML5. Some of the removed elements are:

<frame>, <frameset> and <noframes>: The frame elements such as <frame>, <frameset> and<noframes> have been removed from HTML5.

<font> The <font> element was used to define font face, font size, and font color of text.
<s> and <strike>: The <s> and <strike> elements were used to define strikethrough text. Use<del> instead.
<u> This element was used to define underlined text.
<center> The <center> was used to center align text and content.
<big> It was used to make text bigger.
<applet> The <applet> was used to define an embedded applet. HTML5 encourages the use of the<object> tag instead.
<acronym> The <acronym> tag was used to define acronyms in HTML 4.01. An acronym can be spoken as if it were a word, example NATO, NASA, ASAP, GUI.

Putting all together

Here is complete code for a very basic HTML5 page: