Post
Ask Question

HTML 5 Elements in a Look: Part 1

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


Similar Articles