Categories
HTML PROGRAMMING TUTORIALS WEB BROWSER WEB DEVELOPMENT

HTML Meter Tag Explained

HTML Meter Tag is a new type of HTML tag introduced in the HTML 5 specification. So chances are, you are not so familiar with it. Right? But do not worry, as we will start exploring everything there is to the HTML meter tag in this article. So you will soon be able to start using it in your websites and web apps.

Sounds good? Great! Then let us get started!

What Is An HTML Meter Tag?

So consider this situation. You are creating a dashboard in your web app that, among many other things, also shows the storage space left in your hard disk. Now how will you go about designing it?

So the chances are, you might create a custom HTML element that is styled using its CSS properties to display the storage space graphically. But even if it seems a valid solution, problem is you need to keep creating such custom HTML elements frequently. And if you are designing a web app having a dashboard showing multiple data, these custom elements will only increase. Right?

HTML5 Meter tag explained with example
HTML5 Meter tag explained

So then what is an easier solution for this problem than that? Well for one, would it not be easier if we had a built in HTML element to display such measurements? With the growing number of web apps with dashboards, having such a prebuilt HTML element makes sense, right?

Well, that is precisely what the HTML5 specification guys decided to do! And that is how the HTML Meter tag came into picture!

So What Does The Meter Tag Do?

The idea was to create an HTML element that can be used to display any measured values within it. So that is what a Meter tag does!

A Meter tag can be used to display a measured value within a given range of values.

Sounds good? Great! Then let us move on to take a look at an example piece of code that uses the Meter tag. Shall we?

HTML Meter Tag Example

So for this example, let us assume that we want to display the size of a cloud storage space. For brevity, let us say we want to display the size of our mail box which is currently at 66% full. Alright?

So how do we go about using the Meter tag to display this value? And how will the displayed result look like?

To answer these questions, let us start writing our code as shown below:

<!DOCTYLE html>

<html>
  <head>
  </head>
  <body>
    <label for="disk">Disk Usage: </label>
    <meter id="disk" value="0.7">70%</meter>
  </body>
</html>

Now, if you copy the above piece of coded into a new file and save it as meter.html, what do you see?

Go ahead and try it out! I want you to do it yourself so that you become familiar with how to use the HTML meter tags.

Did you try it? If you did, you should see that the result looks something like this:

70%

Conclusion

So that is it! That is how the Meter tag works! You just feed the right value into the “value” property of the Meter tag and it will display the meter gauge accordingly. Go ahead and test it out with few more different values and see how the gauge changes yourself.

Finally, if you have any questions or suggestions, let me know in the comment below! So until next time, take care!

Categories
HTML TUTORIALS

List Of HTML Empty Elements

What are HTML Empty Elements?

Empty elements of HTML code are those HTML elements that have start tags but do not have an associated end tags. So these are the HTML elements which can contain only attributes associated within them but no content by themselves.

Sometimes, HTML Empty elements are also called as Void Elements of HTML.

Some of the interesting features of Empty Elements of HTML includes:

  • They can never have raw text or CDATA associated within themselves.
  • They can never have any additional child nodes in the DOM tree.

A list of HTML Empty Elements are as follows:

  • <br> Insert A Line break
  • <hr> Insert A Horizontal line
  • <img> Insert an image from a file in the path defined by its “src” attribute
  • <meta> Defines the metadata of a web page
  • <source> Insert a media file
  • <link> Used only in a document header to link in an external resource
  • <input> Used to declare an input element to accept user input.

Hope this gave you good idea about what HTML tags are considered HTML Empty elements. I will continue to write further on more such lesser known information related to web development in future articles as well.

Until next time, happy coding! 🙂

Categories
HTML STATIC WEBSITES TUTORIALS WEB SERVER WORDPRESS

What does Hyper Text Markup Language (HTML) even mean?

HTML is the language used to develop web pages for the world wide web. But what does HTML even mean? We know that HTML stands for Hyper Text Markup Language, but what does each of these terms even signify? This post will try to discuss upon each of these words and their significance in the world of the web.

What is Hyper Text?

Hyper text refers to the ability of web pages to link with each other, within the same website or between websites on the internet.

What is a Markup Language?

HTML is a markup language. But what does markup language even mean? It means that all the building blocks that make up a HTML web page are made up of HTML elements defined by HTML markups. In other words, HTML markups are special tags used to define all the HTML elements that make up a web page. These HTML markups includes tags like <head>, <title>, <body>, <footer> etc.

Why use semantic HTML markups for your web page?

With the recent HTML 5 specification, there has been an increase in the amount of these HTML markups (or tags) defined by the specification so that there are more semantically meaningful HTML markup tags available to define a web page. These new semantically appropriate HTML markup tags help improve the readability and understanding of the sections of these web pages by machines (aka algorithms) such as search engines.