Aside, Meter and Hgroup Tags in HTML 5

Vijay Prativadi

6y10.8k30100Article

HTML5Meter TagAside Taghgroup Tag

3 Comments

Join the conversation! Your thoughts help the community grow.

Mahesh Chand14y ago
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.
- Mahesh Chand14y ago
  Thanks for the clarification Vijay.
- Vijay Prativadi14y ago
  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...!!!

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:

<!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" />
<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>
</footer>
</div>
</body>
</html>

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

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