3 Rarely Used HTML Tags (and how to use them)
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:
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>
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:
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:
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 (), or
jsfor the
JS` 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); }
:)
I know all of these.
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!
Thanks so much! This helped a lot.
@NeilBhaduri np! glad i helped :)
Why is your fieldset in a form??
@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).
@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>
wait what the difference between the div tag and the fieldset tag?
@maxina Fieldset makes a box that you can see, and you can also put a legend on it.
@thethermometer ah ok i would be surprised that its not commonly used tho
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
@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
i was really looking for this tutorial because i was struggling on the loading bar.
Really helped me.
@gameprogammer great!
hope your project (assuming you are working on one) is going well! :)
@NotMrMan Yes i am i am working on a big game!
@gameprogammer oh, cool!
good luck on your game!
@NotMrMan you can check my post when i post it
I made won check it : http://tiny.cc/ibJUN
hey sub sup tags are not really needed usually, but they are common if needed so...
pog, I don't really do much html but pog
nice, i found out about the progress tag thanks to this!
Wow! That's actually pretty kewl
Now you probably won't see <svg>
unless you're an intensive Frontend designer or CSS dev :D
@RayhanADev Thanks!
yeah I suck at CSS so I haven't seen that before.
@NotMrMan np (^_−)−☆
@RayhanADev or you just use svg for graphics... which a lot of websites do lol
@realTronsi using svgs for graphics is a bit much imo
i just prefer pictures, and then svgs in css animation
@RayhanADev I made won check it : http://tiny.cc/ibJUN
@IL2PG
did you put a rickroll
because if you did, i have my internet set up to block it xD
@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
@RayhanADev lol I didnt
@realTronsi fair enough
@RayhanADev haha
There is plenty of input types that developers forget to use.
Also try using <datalist>
, <optgroup>
and check out download
attribute in anchors.
@asssama212 I actually had the input tag in this post, but
I might feature those tags in another post.
Thanks for the suggestion!
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®
The input tag isn't used? Seriously?
<progress value = "50" max = "100">50%</progress>
did you just...put a space between the attribute name and the value?
I hate it when ppl do that
@firefish i do that all the time, its not a problem
i do get how it looks like hot trash though
why? Looks [email protected]