7 Cool HTML Elements Nobody Uses
Tags: webdev, html, javascript, programming
Published: 2022-10-02 04:44:45

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**

![thrown-into-garbage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ca1n7b4frmvwf250s5k2.gif)

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.

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

![meter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4znrursszrxsuiqqmauj.gif)

## 2. `sup` & `sub`

You can add **superscripts** (like `x²`) with `sup` and **subscripts** (like `x₀`) using `sub` to your document.

![superscript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kon6rg26sdoklr82s6oz.png)

![subscript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wu4wv5rebjbejy10h6ky.png)

## 3. `datalist`

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

![datalist](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0363tknwjtuavuypwjy1.png)

### 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**.

```html
<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>
```

![map-and-area](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uzi08fh85fvfb0ycz9de.gif)

## 4. `details` & `summary`

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

![details](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o035mxr1q2s5939vywir.png)

## 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**.

![object](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o2wwmzwmdl819tr75130.png)

## 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.

![abbriviation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ea1omjyl68ls3cnfr46h.png)

**That's all folks! 🎉**

Finding **personal finance** too intimidating? Checkout my **Instagram** to become a [**Dollar Ninja**](https://www.instagram.com/the.dollar.ninja/)

# Reference

1. [W3Schools](https://www.w3schools.com/)
2. [MDN](https://developer.mozilla.org/en-US/)

# Thanks for reading

Need a **Top Rated Front-End Development Freelancer** to chop away your development woes? Contact me on [Upwork](https://www.upwork.com/o/profiles/users/~01c12e516ee1d35044/)

Want to see what I am working on? Check out my [Personal Website](https://tapajyoti-bose.vercel.app) and [GitHub](https://github.com/ruppysuppy)

Want to connect? Reach out to me on [LinkedIn](https://www.linkedin.com/in/tapajyoti-bose/)

I am a Digital Nomad and occasionally travel. Follow me on [Instagram](https://www.instagram.com/tapajyotib/) to check out what I am up to.

Follow my blogs for **bi-weekly new tidbits** on [Dev](https://dev.to/ruppysuppy)

**FAQ**

These are a few commonly asked questions I get. So, I hope this **FAQ** section solves your issues.

1. **I am a beginner, how should I learn Front-End Web Dev?**
   Look into the following articles:

    1. [Front End Development Roadmap](https://dev.to/ruppysuppy/front-end-developer-roadmap-zero-to-hero-4pkf)
    2. [Front End Project Ideas](https://dev.to/ruppysuppy/5-projects-to-master-front-end-development-57p)

2. **Would you mentor me?**
   Sorry, I am already under a lot of workload and would not have the time to mentor anyone.