Looking for cool HTML components, particularly in the event you don’t know what you’re in search of, is usually like being thrown right into a pile of rubbish
Don’t fear, I did the soiled work for you!
After scavenging via the seemingly countless pile of HTML components, I dug up just a few of the hardly ever used gems!
1. meter
& progress
The progress
factor is the semantically appropriate method of displaying progress bars.
The meter
factor is progress
on steroids. Aside from displaying a scalar measurement inside a identified vary, it means that you can specify the worth’s low, excessive & optimum vary.
<meter
min="0"
max="100"
low="25"
excessive="75"
optimum="80"
worth="50"
></meter>
2. sup
& sub
You may add superscripts (like x²
) with sup
and subscripts (like x₀
) utilizing sub
to your doc.
3. datalist
datalist
means that you can add an autocomplete solutions to your enter
components.
NOTE
- The solutions are NOT LIMITED to textual content
inputs
, however can be utilized with coloration, date, time, and even vary inputs. - The default styling of the solutions is disagreeable to have a look at, to say the least. However, you may all the time type it utilizing CSS.
4. map
& space
map
and space
let you create picture maps, which is a elaborate time period for pictures with clickable areas.
<img
src="office.jpg"
alt="Office"
usemap="#workmap"
width="400"
peak="379"
/>
<map identify="workmap">
<space
form="rect"
coords="34,44,270,350"
alt="Laptop"
href="pc.html"
/>
<space
form="rect"
coords="290,172,333,250"
alt="Cellphone"
href="cellphone.html"
/>
<space
form="circle"
coords="337,300,44"
alt="Cup of espresso"
href="espresso.html"
/>
</map>
4. particulars
& abstract
particulars
and abstract
are used to create collapsible content material with out utilizing any JavaScript. It is the semantic technique of making dropdowns.
6. object
Pulling your hair out to embed recordsdata in your web site? Look no additional!
object
means that you can embed a variety of recordsdata like PDFs, pictures, movies, audio and even Youtube movies.
7. abbr
The abbr
factor means that you can add abbreviations to your doc. When the consumer hovers over the abbreviation, the total kind is displayed. Furthermore, display readers may also be configured to learn out the total kind when an abbreviation is encountered.
That’s all of us! 🎉
Reference
Observe me for weekly new tidbits on the area of tech!
Want a High Rated Entrance-Finish Improvement Freelancer to cut away your improvement woes? Contact me on Upwork
Wish to see what I’m engaged on? Try my Private Web site and GitHub
Wish to join? Attain out to me on LinkedIn
I’m a Digital Nomad and sometimes journey. Observe me on Instagram to take a look at what I’m as much as.