3 Rarely Used HTML Tags (and how to use them)
Here are a few useful tags that are rarely used!
<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:
Here's what it should look like:
These can be styled with text via the
<legend> tag, like this:
Now it looks like this:
Lets move onto another tag, shall we?
<sup> are used to style letters in HTML.
If you did something like:
This would be the output:
<sup> is the opposite of sub.
So, if you did
The output would be
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
To set the percentage, we use
value. Lets change the number from
The next number defines
max is the max amount of value your progress bar can take before it hits 100% or over. Lets change it to 100.
Now, since the value
50 is half of
100, the progress bar should display half.
To make the progress bar readable (for people with screen readers), just add the percentage before the
</progress>, like this:
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.
<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
Notice that the code doesn't do anything. That's because you need to enable it in JS!
Here is how to activate it:
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:
When you click the button, it should say 'cool.' (i can't show a photo because it doesn't stay on)
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
<progress value = "50" max = "100">50%</progress>
did you just...put a space between the attribute name and the value?
input tag is used a lot
isnt that the only way to make form feilds.....?
Have you heard of the
And one last: what about poor
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
5. glad you liked the tutorial!
Wow! That's actually pretty kewl
Now you probably won't see
<svg> unless you're an intensive Frontend designer or CSS dev :D
There is plenty of input types that developers forget to use.
Also try using
<optgroup> and check out
download attribute in anchors.
psst input tag looks like this:
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®