Hands on HTML5 – Part 1


Hands on HTML5 – Part 1


Hi All, in this series of post (Hands on HTML5), I’m gonna discuss about some of the unknown features of HTML5 and trust me this gonna be very interesting.

We all are familiar with HTML. Now it time for the HTML5 which is the latest version of markup language.
HTML 5 has a semantic structure. HTML 5 provides us various controls that will save our time while developing. Now we will see what all the controls and features are that were introduced in HTML5.


NOTE: In case you are using VS2010, please ensure you have installed Visual Studio 2010 SP1 (or later)

Then enable the HTML option in the target section

Go To Tools -> Options -> Text Editor -> HTML5

hands on HTML 5

Structure of HTML 5

As I said earlier, HTML 5 has a semantic structure. It reduces the efforts of a UI Developer. The following images will explain the structure.


Before Introducing HTML 5

before html 5











After Introducing HTML 5

after html 5











As you can see in the preceding image, HTML 5 has introduced:

  • Header
  • Nav
  • Section
  • Aside
  • Article
  • Footer


Adding you own Element

Yes, you have heard right, with HTML 5 you can create your own element by introducing some styles. See the below code.

<!DOCTYPE html>

<head runat="server">
<title>Hands On HTML5</title>
myElement {
<form id="form1">
Normal Element

<myElement>My Element</myElement>


hands on HTML5








Hope you have enjoyed this. Soon will be sharing more unknown features of HTML and how you can customize them.

JavaScript, ASP.Net & PHP Web Developer. Connect with me on Facebook and Twitter.

Share This Post

Related Articles

Powered by Paras Babbar · Designed by Paras Babbar