https://tapajyoti-bose.medium.com/7-cool-html-elements-nobody-uses-436598d85668

 
Get unlimited access
Open in app
 
 
Home
 
Notifications
 
Lists
 
Stories
---------------------------------------------------------------------
 
Write
 
Tapajyoti Bose
Tapajyoti Bose
Follow

Oct 2

*
3 min read

7 Cool HTML Elements Nobody Uses

[1]

Searching for cool HTML elements, especially if you don't know what
you're looking for, is often like being thrown into a pile of garbage

[0]

Don't worry, I did the dirty work for you!

After scavenging through the seemingly endless pile of HTML elements,
I dug up a few of the rarely used gems!

1. meter & progress

The progress element is the semantically correct way of displaying
progress bars.

The meter element is progress on steroids. Apart from displaying a
scalar measurement within a known range, it allows you to specify the
value's low, high & optimum range.

<meter
  min="0"
  max="100"
  low="25"
  high="75"
  optimum="80"
  value="50"
></meter>

[0]

2. sup & sub

You can add superscripts (like x2) with sup and subscripts (like x0)
using sub to your document.

[0]
[0]

3. datalist

datalist allows you to add an autocomplete suggestions to your input
elements.

[0]

NOTE

 1. The suggestions are NOT LIMITED to text inputs, but can be used
    with color, date, time, and even range inputs.
 2. The default styling of the suggestions is unpleasant to look at,
    to say the least. But, you can always style it using CSS.

4. map & area

map and area allow you to create image maps, which is a fancy term
for images with clickable areas.

<img
  src="workplace.jpg"
  alt="Workplace"
  usemap="#workmap"
  width="400"
  height="379"
/><map name="workmap">
  <area
    shape="rect"
    coords="34,44,270,350"
    alt="Computer"
    href="computer.html"
  />
  <area
    shape="rect"
    coords="290,172,333,250"
    alt="Phone"
    href="phone.html"
  />
  <area
    shape="circle"
    coords="337,300,44"
    alt="Cup of coffee"
    href="coffee.html"
  />
</map>

[0]

4. details & summary

details and summary are used to create collapsible content without
using any JavaScript. It's the semantic method of creating dropdowns.

[0]

6. object

Pulling your hair out to embed files on your website? Look no
further!

object allows you to embed a wide range of files like PDFs, images,
videos, audio and even Youtube videos.

[0]

7. abbr

The abbr element allows you to add abbreviations to your document.
When the user hovers over the abbreviation, the full form is
displayed. Moreover, screen readers can also be configured to read
out the full form when an abbreviation is encountered.

[0]

That's all folks! 

Reference

 1. W3Schools
 2. MDN

Follow me for weekly new tidbits on the domain of tech!

Need a Top Rated Front-End Development Freelancer to chop away your
development woes? Contact me on Upwork

Want to see what I am working on? Check out my Personal Website and
GitHub

Want to connect? Reach out to me on LinkedIn

I am a Digital Nomad and occasionally travel. Follow me on Instagram
to check out what I am up to.

--

--

More from Tapajyoti Bose

Follow
 

Top Rated Freelancer || Blogger || Cross-Platform App Developer ||
Web Developer || Open Source Contributor || FIRE Enthusiast

Love podcasts or audiobooks? Learn on the go with our new app.

Try Knowable

Recommended from Medium

 
Mini Chang
 

Mini Chang

 
Leetcode -- Sum of Subarray Minimums

 
 
Rebai Ahmed
 

Rebai Ahmed

 
Hacktoberfest 2020 I just participated [?]

 
[1]
 
Berina Vihric
 

Berina Vihric

in

 

Ministry of Programming -- Technology

 
Part 1: Startup Test Strategy

 
[0]
 
Mohammed Ayub
 

Mohammed Ayub

 
Yet Another Awesome Geo-coder -- Open Sourced Spatial Search

 
[1]
 
Dae Woo Kim
 

Dae Woo Kim

 
Azure SQL Databasero CSV pail BULK INSERT -- Python

 
 
Soumi Bardhan
 

Soumi Bardhan

in

 

DataDrivenInvestor

 
Dockerizing and Hosting your Flask Web App(Rest API) on AWS EC2

 
[0]
 
Viktor Daroczi
 

Viktor Daroczi

 
Perhaps -- Functional Programming in PHP (Part 5)

 
[1]
 
Something Ron
 

Something Ron

in

 

Bi De Pan De  Swift iOS App Kai Fa Jiao Shi 

 
Yan Jiu UIYuan Jian 

 
[1]
 

AboutHelpTermsPrivacy

---------------------------------------------------------------------

Get the Medium app

A button that says 'Download on the App Store', and if clicked it
will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will
lead you to the Google Play store
Get started
[                    ]
 
Tapajyoti Bose

Tapajyoti Bose

3K Followers

Top Rated Freelancer || Blogger || Cross-Platform App Developer ||
Web Developer || Open Source Contributor || FIRE Enthusiast

Follow
 
 

Help

 

Status

 

Writers

 

Blog

 

Careers

 

Privacy

 

Terms

 

About

 

Knowable