Introduction

We all know and love some of our most popular HTML tags like <div> and <h1> but there are plenty of Rare HTML Tags that deserve some more attention. This tutorial will go over three very helpful rare html tags that will help you develop more semantic coding.

The <optgroup> tag

If you have ever worked with drop down menus using the <select> and <option> elements, you will know that it is very hard to style the contents. By using the <optgroup> tag, you can give your list more flexibility and a little more hierarchy for a better user experience. Let’s look at an example.

What if we wanted to create a list of all the college courses provided within a drop down list that the students can view and choose from. In this situation, we must have a way to group these courses into their specific curriculum. If not, we would just have a long list of courses and no way of distinguishing which category the classes relate to. That is where <optgroup> comes in. We can use <optgroup> to add a category group title before the listing of classes in that category. Here is the code.

And here is the result


To help distinguish the subcategories, we provided the &mdash; code to indent and outline each one.

The <fieldset> tag

There are plenty of times when you are creating a form that you may have multiple sections within. The <fieldset> tag is helpful in organizing your form into sections by containing them within a box. In the example below, we have two different questions that we want separated but must also be submitted in the same form. This is where <fieldset> comes in handy. Here is the code.

And here is the result

Do you like Dogs?

Yes
No

Do you like Cats?

Yes
No


As you can see, each question is contained within one form but is clearly distinguished as two separate inputs.

The <del> & <ins> tag

These two tags are used more for styling and are very uncommon because many people choose not to show these tags. Simply put, it is a way of showing a revision to a word or sentence within a block of text. In many ways, it is used to simply correct a mistake or for humorous reasons. Here is an example of the code being used.

And here is the result

Walter likes LOVES his Dodge Challenger.

Wrapping It Up

These are just a few of the rare HTML tags that you can find. As HTML5 grows, you will definitely find that the list of hidden gems will be growing. Research the internet and see what other HTML tags you can find.