10 HTML Tags That You Never Heard Of ! (Most Likely)

1. The<abbr> Tag:

This tag is used to define an abbreviation or an acronym, however even though there is an <acronym> tag for, obviously, acronyms. Or should I say was...
As you can see, these two tags are so similar that the <acronym> tag was dropped in HTML5 in favor of the <abbr> tag. The only difference between them is semantic, since acronyms and abbreviations aren't the same thing in English. But to keep things simple, and not confuse people, only <abbr> is used these days.

And example use case of the <abbr> tag would be the following:

The most popular and widely use markup language is <abbr title="Hyper Text Markup Language 5">HTML5</abbr>.

If you hover your pointer over HTML5, you are supposed to see the definition of it. That's what the <abbr> tag does.

A live example could be found here.

2. The <wbr> Tag:

This is a very rarely used tag, I doubt that you would have ever come across it before reading this article. The <wbr>tag means "Word Break Opportunity", and is usually used to break very long words to prevent the browser from breaking words at a wrong place, or even creating a horizontal scroll bar ( the latter is the worst experience I had with some websites ). This tag really does solve a problem. A very rare problem, but still.

A live example of this tag could be found over here.

3. The <fieldset> Tag:

This tag is a weird one, but oh well... I'll explain it as best as I can.
The <fieldset> tag, does, in simple terms, group related elements in a form together. It does that by drawing a box around them.

Be sure to checkout the example here, it explains much better than words do.

4. The <label> Tag:

This one is not as rare as the others, but often forgotten by most of us web developers. I am guilty of forgetting it as well !
However, it is one very useful tag, that doesn't make any visible changes. How's that ? We'll, let me explain it:
It makes the usability for mouse users much better, by making the text in the <label> tag toggle an <input> tag.

Sounds complicated ? no ? Anyway, still make sure to checkout the live example.

5. The <optgroup> Tag:

This one is not as rare to you if you have grouped the options of a <select> tag into categories before. But if you haven't done that yet, you might be amazed how useful and cool this tag is. You probably noticed that I have already explained what it does, and besides, the name is self-explanatory. So I will not be wasting your precious time any further.

Checkout the live example, if your understanding of this is still not solid enough.

6. The <cite> Tag:

This one is a rare one, I don't really see it very often, and trust me, I browse the web a lot.
This tag is used to <cite> the title of a work, for example a book, a painting, a song or the like.
Yeah that's all it does really. An example use case would be:

<cite>Mona Lisa</cite> by Leonardo da Vinci. Painted in 1503.

A live example of this could be found over here.

7. The <ins> Tag:

Alright, admit it, you never heard of this tag before. It is almost never used. And that's why I put it in this post.
The <ins> tag is used to display text that has been inserted into a document, by underlining it. That's the markup way of doing it. The following tag is closely related to this one.

A live example could be found in the following paragraph.

8. The <del> Tag:

This one is the close relative of <ins> that I was talking about in the previous paragraph. They both are usually used in conjunction with each other. The <del> tag displays text that has been deleted from a document by styling the text with a strike through.

A live example of both the <del> and the <ins> tag could be found here.

9. The <address> Tag:

As the name implies, this tag is used to display addresses. All it really does is italicize the text, and offer semantic meaning. However it is mostly used for the latter reason, when used at all. Oh and did I mention ? You can style it with CSS and make it look whichever way you want. And it actually does one more thing depending on your browser, and that is adding a line break before and after it (acting as a block element).

Here is how it works:
If the <address> tag is inside the <body> tag, it represents the address of the owner of the page. However if it is inside of an <article>tag, it represents contact information for the article. And note that it should not be used for postal addresses unless they are part of the information needed to contact the author.

A live example of it could be found over here.

10. The <time> Tag:

This tag is a rare one too. And as the name implies, it has something to do with time, obviously.
What this tag does is define date and time in a human readable way, and even encode it in a machine-readable way. The latter is useful to set reminders or schedule events on a calendar, or even to enhance search results of search engines.

A live example of this cool tag could be found over here.

I hope that you enjoyed this post. I personally enjoyed researching for it and writing it quite a lot.
If you happen to find any mistakes in this post, feel free to correct me in the comments. Life is a never ending classroom afterall. :)

The image being used, was created by Pankaj Patel, and is an Open Source image.