HTML 5 Elements in a Look: Part 1

In this article you will learn about HTML 5 Elements.

HTML 5

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

    1. <!DOCTYPE html>   
    The character encoding (charset) declaration
    1. <meta charset="UTF-8">  

     

HTML 5 Example

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>Sibeesh Passion wish you a happy new year</title>  
  6. </head>  
  7.   
  8. <body>  
  9. Welcome to Sibeesh Passion</body>  
  10.   
  11. </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:

  • 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.

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.   <title>Your own element </title>  
  6.   <script>document.createElement("yourelement")</script>  
  7.   <style>  
  8.  yourelement {  
  9.     display: block;  
  10.   }   
  11.   </style>   
  12. </head>  
  13.   
  14. <body>  
  15. <div>  
  16. Normal element  
  17. </div>  
  18. < yourelement >My element</ yourelement >  
  19.   
  20. </body>  
  21. </html>   
Please note that we have created a new element yourelement.

Cool.

See you soon in the next part.

Kindest Regards,

Sibeesh Venu