5 Tags I love the most in HTML 5.01

It has been quite a time that HTML 5 was launched. Most of the active sites on the internet has started to use them. To start with HTML 5 you just need an updated and modern browser. HTML as always is too easy to learn and if you can understand basic English, HTML will be nothing too difficult for you.

Here I will post about the tags that I prefer, due to their functionality, and flexibility on different browsers. I will be using the <code> tag to show how to use these codes.

1: <Abbr> tag:

The Abbr tag is pretty useful and reduces a lot of work for coders (and for advertisers as well). What it does is it shows the definition of some word when the mouse is hovered over it. Here's it's syntax:
<abbr title="Definition here">Abbreviation here</abbr>

And here it is, in play:

Abbreviation

How can be it targeted by advertisers? One can put his url there and maybe, one day, it is possible to link the text in the title attribute to some url.

I'll give this tag 3 out of 10.

2: Progress tag:

The progress tag gives you a indication of the portion of the work completed. I just used it in the last rating for the abbr tag. Cool, isn't it? Here's it in action in a webpage.

http://short4iis.tk/progress.html

The syntax runs like this:

<progress value="Value" max="Out of">

One may use looping in JavaScript to update it by 1 or something else to make it look like some process is running. Oh, unfortunately, I do not teach JavaScript here. There are a lot of tutorials online.

I'll give this one 4 out of 10.

3: Video tag

The video tag is just awesome. It eradicates the need to use Flash video players to insert a video into a HTML document. Saves a crap load of work for web developers, right! It's a flick different from the <img> tag that is used to insert images. Here runs the syntax:

<video width="width" height="height" controls>

  <source src="filename.ext" type="video/ext">

</video>

And here's it in play.

Similarly, there's an audio tag, too!

Rating: 7 out of 10!

4: Input types updated!

There are a lot more input type options than you thought of in HTML 5. Examples are date, email, date, and well, many more. The complete list is:

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

As you already know, it's format goes:

<input type="type" onclick*="JavaScript function">

An example for this with the range type is: 


* You can use other things like onkeyup and onmousewheel and others.

Rating will be 6 out of 10.

5: Details tag

The details tag is useful in its own sense due to it's flexibility and also that it makes the page load faster and hides text until user opts to show it.  It shows a small triangle which upon being click reveals the text in it. The syntax is:

<details>
<summary> Text to be shown </summary>
<p> Hidden text!</p>
</details>

And here it is in action, live:

Text to be shown

Hidden text

I will give this one 4 out of 10.

 

So there you go, this is the end of the list. HTML 5 is damn fun to learn! It works wonders if you can associate JS with this. If you felt intrigued by these, sure, you will love other tags to. Hop on to some free online tutorial courses and get them in your brain!