Here are a few useful tags that are rarely used!

1: <fieldset>

The <fieldset> tag allows you to make a window to store HTML content in. This can help you adjust the look of your site.
It isn't that hard to make one. Just do:

<form>
  <fieldset>
    <h1>some text</h1>
    <p>some more text</p>
  </fieldset>
</form>

Here's what it should look like:

These can be styled with text via the <legend> tag, like this:

<form>
  <fieldset>
    <legend>some text</legend>
    <h1>some text</h1>
    <p>some more text</p>
  </fieldset>
</form>

Now it looks like this:

Lets move onto another tag, shall we?

2: <sub>/<sup>

<sub>/<sup> are used to style letters in HTML.
If you did something like:

<p>this <sub>is</sub> cool</p>

This would be the output:

<sup> is the opposite of sub.
So, if you did

<p>this <sup>is</sup> cool</p>

The output would be

3: <progress>

This tag allows you to make a simple progress bar. This can be useful for making a game, or making a site for sharing files, etc.

Here is the basic structure for the <progress> tag:

<progress value = "int" max = "int2"></progress>

To set the percentage, we use value. Lets change the number from int to 50.

<progress value = "50" max = "int2"></progress>

The next number defines max. max is the max amount of value your progress bar can take before it hits 100% or over. Lets change it to 100.

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

Now, since the value 50 is half of 100, the progress bar should display half.

Nice!

To make the progress bar readable (for people with screen readers), just add the percentage before the </progress>, like this:

<progress value = "50" max = "100">50%</progress>

If you want to make it move like an actual progress bar, you'll probably need to program it in JS. I'm not going to go in depth about that because I don't know (but plan to learn) much about JS.

Honorable mention: <template>

I found this tag after I was done with the post, but it is very useful, so I decided to add it as an honorable mention.

The <template> tag is a property that allows you to store HTML code. Since you can store it, you can avoid using InnerHTML (in JS).

First, you write the code in the <template> tag:

<template>
  <h1>cool</h1>
  <p>pog</p>
</template>

Notice that the code doesn't do anything. That's because you need to enable it in JS!
Here is how to activate it:

document.getElementById("btn1");
function cheese() {
  const template = document.querySelector('template');
  const content = template.content.cloneNode(true);
  document.body.append(content);
}

You'll notice that it uses document.getElementById(); to get a button. Since it isn't added to the HTML yet, lets add it!
All you have to do is insert this code:

<button id = "btn1" onclick = "cheese()">template</button>

When you click the button, it should say 'cool.' (i can't show a photo because it doesn't stay on)

Closing

I hope that you found this tutorial useful!

If you find a mistake, just ping me and tell me what's wrong and I will fix it (and credit you).

Edit: Thanks for the support! Since you peeps seem to like it, i'll add styling to each of these elements (some time this week).

People who helped

@Coder100 - Helped with errors
@ch1ck3n - Told me that the <input> tag was used a lot (so I changed it to <sub>/<sup>)