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 (), 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); }
:)
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]