Skip to content
← Back to Community
3 Rarely Used HTML Tags (and how to use them)
Profile icon
NotMrMan

Here are a few useful tags that are rarely used!

1:

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:

Screenshot 2021-03-12 172936

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:

Screenshot 2021-03-12 173701

Lets move onto another tag, shall we?


2:

<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:

q

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

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

The output would be

g


3:

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.

Screenshot 2021-03-12 170436

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:

Voters
Profile icon
sbzm
Profile icon
blastedbeat4521
Profile icon
SilvermoonCat
Profile icon
TheTrueGod
Profile icon
sojs
Profile icon
CarlosEduard225
Profile icon
MichaelMerrill1
Profile icon
ItamarCohen28
Profile icon
DynamicSquid
Profile icon
CullenMeyer
Comments
hotnewtop
Profile icon
firefish

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

did you just...put a space between the attribute name and the value?

Profile icon
stringycheese

I hate it when ppl do that

Profile icon
DepthStrider03

@firefish i do that all the time, its not a problem

Profile icon
DepthStrider03

i do get how it looks like hot trash though

Profile icon
sojs
Profile icon
Bookie0

Pretty nice, you can add syntax highlighting to add colors to your code block to make your tutorial better; for HTML you can add html after the 3 backticks (), orjsfor theJS` parts :)

<form> <fieldset> <legend>some text</legend>` <h1>some text</h1>` <p>some more text</p>` </fieldset> </form>
document.getElementById("btn1"); function cheese() { const template = document.querySelector('template'); const content = template.content.cloneNode(true); document.body.append(content); }

:)

Profile icon
firefish

backslashes

@Bookie0 backslash \ vs backtick ```

Profile icon
Bookie0

@firefish ah yes thanks meant backtick lol

Profile icon
theionceo

I know all of these.

Profile icon
sojs

input tag is used a lot

isnt that the only way to make form feilds.....?

<input type = "..."/>

And also:

function cheese(){...}

Why....?
And also...

Have you heard of the meter tag?
And one last: what about poor blink and marquee?
Great tutorial...
Thank you!

Profile icon
NotMrMan

@sojs

  1. no, the <form> tag can be used to hold a <fieldset> tag (if that's what you mean)
  2. i eat cheese and couldn't think of a function name
  3. i haven't heard about the <meter> tag, might be interesting
  4. i know about <marquee>, but i haven't heard about <blink>
  5. glad you liked the tutorial!
Profile icon
sojs

Cheese is good. I like a good Manchego or Brie. There's this really good spanish goat that I love as well :)
@NotMrMan

Profile icon
NotMrMan

@sojs i like brie as well, but i don't have it often

Profile icon
sojs

young or old?

I love how were talking about cheese on a coding website
@NotMrMan

Profile icon
sbzm

i eat cheddar how it @NotMrMan

Profile icon
NeilBhaduri

Thanks so much! This helped a lot.

Profile icon
NotMrMan

@NeilBhaduri np! glad i helped :)

Profile icon
thethermometer

Why is your fieldset in a form??

Profile icon
NotMrMan

@thethermometer The <fieldset> works outside of the <form> tag, but it is supposed to be the correct syntax (i don't exactly know what <form> does).

Profile icon
m4rus3ru

@NotMrMan @thethermometer The <fieldset> is meant to be used to group element within a <form>.

An example of how it is meant to be used:

<form> <fieldset> <legend>Title</legend> <input type="radio" id="radio"> <label for="radio">A label</label> </fieldset> </form>
Profile icon
maxina

wait what the difference between the div tag and the fieldset tag?

Profile icon
thethermometer

@maxina Fieldset makes a box that you can see, and you can also put a legend on it.

Profile icon
maxina

@thethermometer ah ok i would be surprised that its not commonly used tho

Profile icon
BobTheTomatoPie

i don't know why but I like to make progress bars from scratch instead of using the tag, they are just easier to style

Profile icon
NotMrMan

@BobTheTomatoPie yeah, i've noticed that as well.
Though if someone doesn't know how to make their own from scratch, it is pretty useful

Profile icon
gameprogammer

i was really looking for this tutorial because i was struggling on the loading bar.

Profile icon
gameprogammer

Really helped me.

Profile icon
NotMrMan

@gameprogammer great!
hope your project (assuming you are working on one) is going well! :)

Profile icon
gameprogammer

@NotMrMan Yes i am i am working on a big game!

Profile icon
NotMrMan

@gameprogammer oh, cool!
good luck on your game!

Profile icon
gameprogammer

@NotMrMan you can check my post when i post it

Profile icon
glitchish

@NotMrMan

https://replit.com/@NotMrMan/uncommon-html?lite=icon_title_nologo&theme=replitDark#Awesome Job! -- CodingRedpanda

(the entire thing is a link, copy it)

Profile icon
NotMrMan

interesting @CodingRedpanda

Profile icon
glitchish

@NotMrMan oof, deleted! ill just make a new one yah its interesting, kthxbye

Profile icon
[deleted]

I made won check it : http://tiny.cc/ibJUN

Profile icon
NotMrMan

nice try @IL2PG

Profile icon
dObbOb11

I closed it before it loaded :)

Profile icon
sojs

haha It got me... the tiny.cc threw me off. :)@NotMrMan

Profile icon
Whippingdot

hey sub sup tags are not really needed usually, but they are common if needed so...

Profile icon
FlaminHotValdez

pog, I don't really do much html but pog

Profile icon
ch1ck3n

nice, i found out about the progress tag thanks to this!

Profile icon
RayhanADev

Wow! That's actually pretty kewl
Now you probably won't see <svg> unless you're an intensive Frontend designer or CSS dev :D

Profile icon
NotMrMan

@RayhanADev Thanks!
yeah I suck at CSS so I haven't seen that before.

Profile icon
RayhanADev

@NotMrMan np (^_−)−☆

Profile icon
realTronsi

@RayhanADev or you just use svg for graphics... which a lot of websites do lol

Profile icon
RayhanADev

@realTronsi using svgs for graphics is a bit much imo
i just prefer pictures, and then svgs in css animation

Profile icon
[deleted]

@RayhanADev I made won check it : http://tiny.cc/ibJUN

Profile icon
RayhanADev

@IL2PG
did you put a rickroll
because if you did, i have my internet set up to block it xD

Profile icon
realTronsi

@RayhanADev well svg is used a lot in minimalistic designs which are gaining popularity. Besides svg's scalability makes it a popular choice now days for sleeker websites

Profile icon
[deleted]

@RayhanADev lol I didnt

Profile icon
RayhanADev

@realTronsi fair enough

Profile icon
dObbOb11
Profile icon
asssama212

There is plenty of input types that developers forget to use.

Also try using <datalist>, <optgroup> and check out download attribute in anchors.

Profile icon
NotMrMan

@asssama212 I actually had the input tag in this post, but

I might feature those tags in another post.

Thanks for the suggestion!

Profile icon
Coder100

psst input tag looks like this:

<input />

and you are using a lot of them incorrectly. Fieldset and legend are part of form elements, and they should be placed in their respective positions.
Otherwise you should just use css®

Profile icon
NotMrMan

@Coder100 apparently the input tag was used a lot, so I replaced it with

I also fixed the fieldset by adding an opening and closing

tag.

Profile icon
Coder100
Profile icon
ch1ck3n

The input tag isn't used? Seriously?

Profile icon
NotMrMan

@ch1ck3n I haven't seen it in many projects
Though I agree, it should be used more

Profile icon
ch1ck3n

@NotMrMan i think the input tag is used a lot

Profile icon
NotMrMan

@ch1ck3n i didn't think it was used a lot
i'll research it. if it is used a lot, i'll replace it

Profile icon
NotMrMan

@ch1ck3n Ok, I'm going to change it
MDN says that it is still widely used due to having many options

Profile icon
NotMrMan

@ch1ck3n I have updated it

Profile icon
sojs

Whaaaaat??? Every single input box, radio, checkbox, a lot of buttons, search forms, email inputs.... I can go on....
uses the input element. @NotMrMan