Learn to Code via Tutorials on Repl.it!

← Back to all posts
3 Rarely Used HTML Tags (and how to use them)
NotMrMan (119)

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

Comments
hotnewtop
firefish (947)

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

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

stringycheese (1)

I hate it when ppl do that

DepthStrider (16)

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

DepthStrider (16)

i do get how it looks like hot trash though

Bookie0 (6262)

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);
}

:)

firefish (947)

backslashes

@Bookie0 backslash \ vs backtick `

Bookie0 (6262)

@firefish ah yes thanks meant backtick lol

sojs (341)

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!

NotMrMan (119)

@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!

sojs (341)

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

NotMrMan (119)

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

sojs (341)

young or old?

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

NeilBhaduri (72)

Thanks so much! This helped a lot.

thethermometer (3)

Why is your fieldset in a form??

NotMrMan (119)

@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).

m4rus3ru (15)

@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>
maxina (61)

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

thethermometer (3)

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

maxina (61)

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

BobTheTomatoPie (3360)

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

NotMrMan (119)

@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

gameprogammer (6)

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

NotMrMan (119)

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

gameprogammer (6)

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

NotMrMan (119)

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

gameprogammer (6)

@NotMrMan you can check my post when i post it

iocoder (162)

@NotMrMan

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

(the entire thing is a link, copy it)

iocoder (162)

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

[deleted]

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

dObbOb11 (13)

I closed it before it loaded :)

sojs (341)

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

Whippingdot (652)

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

FlaminHotValdez (685)

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

ch1ck3n (2045)

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

RayhanADev (2514)

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

NotMrMan (119)

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

realTronsi (926)

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

RayhanADev (2514)

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

[deleted]

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

RayhanADev (2514)

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

realTronsi (926)

@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

[deleted]

@RayhanADev lol I didnt

asssama212 (0)

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

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

NotMrMan (119)

@asssama212 I actually had the input tag in this post, but <sub>/<sup> are less common.

I might feature those tags in another post.

Thanks for the suggestion!

Coder100 (18099)

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®

NotMrMan (119)

@Coder100 apparently the input tag was used a lot, so I replaced it with <sub>/<sup>

I also fixed the fieldset by adding an opening and closing <form> tag.

ch1ck3n (2045)

The input tag isn't used? Seriously?

NotMrMan (119)

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

ch1ck3n (2045)

@NotMrMan i think the input tag is used a lot

NotMrMan (119)

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

NotMrMan (119)

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

sojs (341)

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