6 Game changing, Less-Known HTML Elements — Make Your Website Professional

4 min readMay 23, 2023

From progress bars, dropdowns, to adding links within images, FAQ sections and many more. Make your website look professional with these HTML elements.

While there are many such articles already out there, they miss out on some awesome HTML tags. So I’ve covered them as well in this article.

Progress bars

There are two ways to implement progress bars in plain HTML.

<label for="loading-bar">Loading</label>
<progress id="loading-bar" value="50" max="100"></progress>

Result of the above code, Progress bars | Image by Author

The progress element is best used with JavaScript to show progress in tasks, such as loading.

Alternatively, use meter.

<label for="score">Your score</label>
<meter id="score" value="36" min="0" max="50"></meter>

Result of the above code, Meter bars| Image by Author

You can set low, optimum and high values, so the color of the progress bar changes when it’s above that value.

Add clickable areas within images

You can create an image which has a clickable area using map and area

<img src="ASSET.png" alt="IMAGE" usemap="#map-example">

<map name="map-example">
    <area shape="rect" coords="0,0,25,25" href="BLUE.HTML">
    <area shape="rect" coords="0,25,25,50" href="BROWN.HTML">
    <area shape="rect" coords="25,0,50,25" href="RED.HTML">
    <area shape="rect" coords="25,25,50,50" href="PURPLE.HTML">
</map>

The result of the above code| Image by Author

With the above code, if I click on the blue part of the image, I will be directed to BLUE.HTML page, and when I click on the red part, I will go to RED.HTML page (see image below).

Autocomplete suggestions in input boxes

You can add autocomplete suggestions in input boxes using datalist and options.

<label for="framework"></label>
<input type="text" name="framework" id="framework" list="favourite-frameworks">

<datalist id="favourite-frameworks">
    <option value="React">React</option>
    <option value="Vue"></option>
    <option value="Angular"></option>
</datalist>

The above code will give autocomplete options.

Working example of datalist| Image by Author

Dropdowns and Option groups

Dropdowns are actually very easy to implement in HTML with the <select> element.

<select name="favourite-lang" id="favourite-lang">
    <option value="C#">C#</option>
    <option value="C++">C++</option>
    <option value="C">C</option>
</select>

You can add the required attribute to make it required in a form.

You can also disable options or make an option the default.

<select name="favourite-lang" id="favourite-lang">
    <option value="C#">C#</option>
    <option value="C++" selected>C++</option>
    <option value="C">C</option>
    <option value="Fake" disabled>NOT A Language</option>
</select>

How Disabled option looks| Image by Author

optgroups group options together options under a common heading.

<select name="sport" id="sport">
    <optgroup label="Played With a Bat">
      <option value="Cricket">Cricket</option>
      <option value="Baseball">Baseball</option>
    </optgroup>
  <optgroup label="Played With a raquet">
      <option value="Badminton">Badminton</option>
      <option value="Tennis">Tennis</option>
    </optgroup>
</select>

Abbreviation

While it is not necessary to use this tag, it can help your website be more accessible.

When you have an abbreviation, enclose it within <abbr> tag and give it a title.

<abbr title="World Health Organization">WHO</abbr> is an organization.

How Abbreviations are displayed| Image by Author

Details and summary blocks

The summary is shown by default. When it is clicked on, more details are shown.

FAQs
<details>
  <summary>How can I enroll?</summary>
  <p>To enroll, please click on this link</p>
</details>

Details and summary when closed (left) and opened (right) | Image by Author

It can be further customized in CSS, to make something like a question answer section or FAQs section.

Using Web Animations, we can add animations to make a smooth open and close.

These are just some of the many cool tags HTML offers. It makes our job easier, and some are just fun to experiment with.

Thanks for reading the article till here.

If you liked this article, you can show your support by clapping and following me for more content on HTML, CSS and Frontend Technologies.

I am the creator of ZindaCSS, a utility class-based CSS framework which offers features like :hover states, custom values, animations and responsiveness. Please check it out here.