This is actually pretty basic HTML that anyone can learn, I learned it after watching a YouTube tutorial on how to make something completely different. Needless to say the guy indirectly taught me how to do something that I thought was freakin' awesome! It's so easy in fact, that I decided I'd share it with you guys, since I plan on using it now. :)
<progress id="healthbar" value="100" max="100" style="width:300px;"></progress>
In the code above my value is at 100-- meaning my healthbar is maxed. I haven't taken damage yet in the RP, woot! Now, after getting slapped around by my enemy to the point I'm half beaten I can easily make this bar change. I just have to make my value 50 and poof, the code will change the bar to this. It's fucking cyber magic dudes.
If you want to change the length of your bar as a whole, just change the width, it's easy as pie. By changing my width from 300px, to 100px I end up with the bar below.
No credit needed guys, take it as you want it. Just remember who it was that taught you if anyone ever asks. Enjoy!