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 which 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 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 bunch of headings are wrapped up and place under 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:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8" />
  <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame

       Remove this if you use the .htaccess -->

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title>templates</title>

  <meta name="description" content="" />

  <meta name="author" content="Vijay" />
  <meta name="viewport" content="width=device-width; initial-scale=1.0" />
  <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->

  <link rel="shortcut icon" href="/favicon.ico" />

  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />

</head>
<
body style="font-family: Verdana; font-size: 22">

  <div align="center">

    <header>

      <h1 style="color: gray">Aside, Meter , Hgroup Tags - HTML 5</h1>

    </header>
    <div align="center">

      <aside>

      <h1>Hello It's a small message from aside</h1>

      <p>Hello!! How you are doing</p>

      </aside>

    </div>

    <div align="center">

       <hgroup>  <p style="color: red">Message from Hgroup</p>

           <h1>Hello !!! It's from H1</h1>

             <h2>Hello !!! It's from H2</h2>

             <h3>Hello !!! It's from H3</h3>

       </hgroup>

    </div>

<div align="center">

       <p style="color: red">Hello Meter Value: <meter value="0.5" low="0" high="10">5 out of 10</meter></p>

</div>

    <footer>

     <p style=" color: silver">&copy; Copyright  by Vijay Prativadi</p>

    </footer>

  </div>

</body>

</html>

 

Step 2: The Output of the Application looks like this:


asidemeterhgroup0.png

 

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

Up Next
    Ebook Download
    View all
    Learn
    View all
    MVC Corporation is consulting and IT services based company.