HTML 5  

Aside, Meter and Hgroup Tags in HTML 5

Introduction

 
Today, in this article let's work on some other concepts in HTML5.
 
Question Arises: What is <aside> in Html 5?
 
In simple terms "It display some content that can be wrapped up and placed somewhere on the website. Ex: Job Ads, Promotion Ads and so on".
 
Question Arises: What is <meter> in Html 5?
 
In simple terms "It defines a specified range of Usage by the user. Ex: Disk Hard Drive Usage shown in My Computer". This tag is only compatible with opera and chrome browsers.
 
Question Arises: What is <hgroup> in Html 5?
 
In simple terms "It defines a bunch of headings is wrapped up and place under the single container. Ex: Sub Headings, Sub- Sub-Headings, Main Heading all are place under single hgroup Tag".
 
So, I think we all are now good to go and implement this concept.
 
Step 1: The Complete Code of asidemeterhgroup.html looks like this:
 
Code:
  1.  <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.   <meta charset="utf-8" />  
  5.   <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame  
  6.        Remove this if you use the .htaccess -->  
  7.   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />  
  8.   <title>templates</title>  
  9.   <meta name="description" content="" />  
  10.   <meta name="author" content="Vijay" />  
  11.   <meta name="viewport" content="width=device-width; initial-scale=1.0" />  
  12.   <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->  
  13.   <link rel="shortcut icon" href="/favicon.ico" />  
  14.   <link rel="apple-touch-icon" href="/apple-touch-icon.png" />  
  15. </head>  
  16. <body style="font-family: Verdana; font-size: 22">  
  17.   <div align="center">  
  18.     <header>  
  19.       <h1 style="color: gray">Aside, Meter , Hgroup Tags - HTML 5</h1>  
  20.     </header>  
  21.     <div align="center">  
  22.       <aside>  
  23.       <h1>Hello It's a small message from aside</h1>  
  24.       <p>Hello!! How you are doing</p>  
  25.       </aside>  
  26.     </div>  
  27.     <div align="center">  
  28.        <hgroup>  <p style="color: red">Message from Hgroup</p>  
  29.            <h1>Hello !!! It's from H1</h1>  
  30.              <h2>Hello !!! It's from H2</h2>  
  31.              <h3>Hello !!! It's from H3</h3>  
  32.        </hgroup>  
  33.     </div>  
  34. <div align="center">  
  35.        <p style="color: red">Hello Meter Value: <meter value="0.5" low="0" high="10">5 out of 10</meter></p>  
  36. </div>  
  37.     <footer>  
  38.      <p style=" color: silver">© Copyright  by Vijay Prativadi</p>  
  39.     </footer>  
  40.   </div>  
  41. </body>  
  42. </html> 
Step 2: The Output of the Application looks like this:

asidemeterhgroup0.png

 
I hope this the article is useful for you. I look forward to your comments and feedback. Thanks, Vijay Prativadi...

Membership not found