Title
Hands on HTML5 – Part 1
Introduction
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
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
After Introducing 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>
<html>
<head runat="server">
<title>Hands On HTML5</title>
<script>
document.createElement("myElement");
</script>
<style>
myElement {
display:block;
background-color:orange;
width:100px;
height:100px;
font-size:20px;
}
</style>
</head>
<body>
<form id="form1">
<div>
Normal Element
</div>
</form>
<myElement>My Element</myElement>
</body>
</html>
Output
Hope you have enjoyed this. Soon will be sharing more unknown features of HTML and how you can customize them.
