ARTICLE

Aside, Meter and Hgroup Tags in HTML 5

Posted by Vijay Prativadi in Articles | HTML 5 on February 11, 2012

Tags: Aside Tag, hgroup Tag, HTML5, Meter Tag

Today, in this article let’s work on some other concepts in HTML5. <aside>, <meter>, and <hgroup>.

Reader Level: Intermediate

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>

<head>

Remove this if you use the .htaccess -->

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

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

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

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

</div>

<p style=" color: silver">© Copyright by Vijay Prativadi</p>

</footer>

</div>

</body>

</html>

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

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

Aside, Meter and Hgroup Tags in HTML 5

Tags: Aside Tag, hgroup Tag, HTML5, Meter Tag
Datalist Tag in HTML5

Tags: Datalist, HTML Tutorial, HTML5, HTML tutorial

post comment

Thanks for the clarification Vijay.

Posted by Mahesh Chand on Feb 12, 2012

Sir, Thanks for your Question.... Well, I would like to share the answer for this in much easy and simple way!!! let's work on differences first towards Meter and Progress tags in HTML 5. 1) Progress Tag: The word itself Says "Progress". In simple terms : Progress is something that we are trying to achieve or finish Some Task to reach the goal. So, It's a thing which moves only forwards and intimates the user of how much amount of task is completed or still pending to reach the expected goal. So, This Tag has Only Two Attributes : Only MAX and VALUE MAX --> Represents GOAL VALUE --> How much you have completed to reach the Expected goal. Question Arises Here : Why It doesn't Support Other Attributes like LOW, MIN and so on....? The Answer for this is as I mentioned before, It only moves in forwards direction towards reaching goal evaluating amount of Task Completed . So, It doesn't move away from reaching the goal Progress Tag is Only Supported in FireFox, Opera and Chrome. 2) Meter Tag : The word itself Says "Meter". In Simple terms: Meter is something unique again, which is not related towards reaching goal or finishing task. It's something which is related towards amount of file size or processing speed carried out to do some job. I mean speed or size can be increased or decreased depending upon user choice. For An Instance: If someone wants to become Well Versed in C#, Here Meter --> is amount of resources used(file size) and how quick he is learning the technology(processing speed). Here Progress is --> How many Task He is completing Daily to become well versed and how many tasks are still in pending. Question Arises: Does it Support Other Attributes like MAX, MIN, LOW, VALUE? Answer for this is Yes!!! Because Resources Used or Processing Speed can be increased or decreased to reach the expected goal. So Ohhh Yeah, We need these extra attributes for meter Tag. Meter Tag is Only Supported in Chrome and Opera Browsers. I hope you are satisfied with the answer...!!!

Posted by Vijay Prativadi on Feb 11, 2012

So Meter is like progress bar? I thought HTML 5 has its own progressbar? What about IE? You said one tag is not supported on IE? That is strange.

Posted by Mahesh Chand on Feb 11, 2012

TOP LEADERS