Most of us web developers are used to HTML. But there are some tags which are rarely used but very powerful. Let's dive in

1. Detail tags

The details tag is used to show additional info about a particular topic or word. The additional info can be shown and hidden at will. It is used like this

<details>
I am a boy
</details>

which will show like this

I am a boy.

2. Progress tag

The progress tag is used to show the completion progress of a task. It is used to show the the stage you are in the completion of a task as a progress bar

<progress  max="100" value="70"></progress>

The max value shows how much work the task is while the value shows the stage you are

3. kbd

The kbd tag is used for keyboard input. It is show to show the key to press instead of clicking.

<p>Please press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy this text.</p>

4. wbr tag

A browser breaks a text if it is too long and sometimes it breaks at the wrong place. The wbr tag is used to specify the place to break the text

<p>Break this line here<wbr> and go to the next</p>

4. Del and ins

The del tag is used to show that a word or sentence has been deleted by striking through ti while the ins shows that the text was added by underlining it. Just like the del is used to show that the text is wrong while the ins shows that it is right.

<p><del>Delete this text</del> and <ins>insert this.</ins></p>

5. Sub and Sup

The sub tag is for sub scripted text while the sup is for super scripted text

<p>a<sup>2</sup>+ b<sup>2</sup></p>
<p>H<sub>2</sub>0</p>

which shows like this a²+b², H₂0

6. Mark tag

The mark tag is used to mark or highlight a particular text

<p><mark>Mark this text</mark></p>

which will show like this Mark this text

7. Code tag

The code tag is used to show a text in code format

<code>I am a code</code>

which will show like this I am a code