Creating new element in HTML5 – Sibeesh Passion https://www.sibeeshpassion.com My passion towards life Fri, 17 Jul 2015 12:50:04 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 /wp-content/uploads/2017/04/Sibeesh_Passion_Logo_Small.png Creating new element in HTML5 – Sibeesh Passion https://www.sibeeshpassion.com 32 32 HTML 5 Elements in a Look: Part 1 https://www.sibeeshpassion.com/html-5-elements-in-a-look-part-1/ https://www.sibeeshpassion.com/html-5-elements-in-a-look-part-1/#disqus_thread Thu, 29 Jan 2015 19:39:28 +0000 https://sibeeshpassion.com/?p=881 HTML 5 Introduction

We all are familiar with HTML. Now HTML 5 is the latest version of markup language. HTML 5 has a semantic structure. In HTML 5 we have been given with some controls that will save your time when developing. Now we will see what all the controls and features are that were introduced in HTML 5.

Before we start, please ensure that you have installed Visual Studio 2010 SP1 (or later).

Then enable the HTML option in the target section.

Got to Tools -> Options -> Text Editor -> HTML.

html

HTML 5 Markup

The DOCTYPE declaration

[html]
<!DOCTYPE html>
[/html]

The character encoding (charset) declaration
[html]
<meta charset=“UTF-8″>
[/html]

HTML 5 Example
[html]
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8″>
<title>Sibeesh Passion wish you a happy new year</title>
</head>
<body>
Welcome to Sibeesh Passion</body>
</html>
[/html]

Structure of HTML5

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

Before Introducing HTML 5

Before Introducing HTML 5

After Introducing HTML 5

After Introducing HTML 5

As you can see in the preceding image, HTML 5 has introduced new tags.

  • Header
  • Nav
  • Section
  • Aside
  • Article
  • footer

Adding our own elements!

Yes it is true, we can create our own element by introducing some styles, now we will see how to do this.

To do this we need a markup as follows.
[html]
<!DOCTYPE html>
<html>
<head>
<title>Your own element </title>
<script>document.createElement(“yourelement”)</script>
<style>
yourelement {
display: block;
}
</style>
</head>
<body>
<div>
Normal element
</div>
< yourelement >My element</ yourelement >
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Your own element </title>
<script>document.createElement(“yourelement”)</script>
<style>
yourelement {
display: block;
}
</style>
</head>
<body>
<div>
Normal element
</div>
< yourelement >My element</ yourelement >
</body>
</html>
[/html]

Please note that we have created a new element yourelement.

Cool.

See you soon in the next part.

Kindest Regards,

Sibeesh Venu

]]> https://www.sibeeshpassion.com/html-5-elements-in-a-look-part-1/feed/ 0