HTML has come a long way compared to when it was introduced. The language's (turing complete?) native features allow us access to functionalities and levels of interactivity that were previously only accessible via third-party solutions (heavy lifting by JavaScript). Nowadays, native HTML can be used to create powerful and accessible features without the need for external libraries. Here are a few of my favorite underrated HTML elements.

Dialog

The <dialog> element allows you to create modal dialog boxes, which are often used to display important information or prompts to the user. Dialog boxes are natively supported in all major browsers, so you don't need to use any external libraries to implement them.

<button onclick="window['example-dialog'].showModal()">Show Modal</button>
<!-- It is not recommended to directly access the window object like in 
     this example. This is just for demonstration purposes -->

<dialog id="example-dialog">Native Dialog is Awesome!!!</dialog>

When using dialog modals, all the behaviors of a modal such as focus trapping and background interaction blocking are built-in. Accessibility considerations include adding ARIA roles and aria-modal attributes.

<button onclick="window['example-dialog'].show()">Show Dialog</button>
<button onclick="window['example-dialog'].showModal()">Show Modal</button>
<dialog id="example-dialog">
  Native Dialog is Awesome!!!
  <button onclick="window['example-dialog'].close()">Close Modal</button>
</dialog>

There are two types of dialogs. Using the open attribute on the dialog element or using the .show() method on the dialog element opens a non-modal dialog and using the .showModal() method opens a modal dialog. The difference is that when a modal dialog is open, everything outside of the modal is inert and interactions outside the dialog are blocked. Notice that when the dialog is open, the text behind the modal is not selectable, however, the document is still scrollable. To fix that, we could use the following CSS selector:

html:has(dialog[open]) {
    overflow: hidden;
}

<button onclick="window['example-dialog'].show()">Show Dialog</button>
<button onclick="window['example-dialog'].showModal()">Show Modal</button>
<dialog id="example-dialog">
  Native Dialog is Awesome!!!

  <!-- first method -->
  <form method="dialog">
    <button>Ok</button>
  </form>

  <!-- second method -->
  <form>
    <button formmethod="dialog">Ok</button>
  </form>

  <!-- third method -->
  <button onclick="window['example-dialog'].close()">Close Modal</button>
</dialog>

You can close a dialog modal, either by pressing the ESC key or by using any of the methods above. To learn more about dialog, view the MDN docs or this article by web.dev.

Details and Summary

The <details> and <summary> elements allow you to create accordion menus, where users can click on a heading to expand or collapse a section of content. This is a great way to organize large amounts of information in a concise and easy-to-scan format.

<h2>Details and Summary</h2>
<details>
  <summary>Click to learn more!</summary>
  <p>Hi, this content can only be seen when details is toggled open</p>
</details>

Clicking the summary toggles the open attribute on the details element. You can also use the open attribute to include custom CSS styles based on the open state of the details disclosure widget.

details[open] summary {
  background-color: red;
}

To learn more about the <details> element, view the MDN docs.

Meter and Progress

The <meter> and <progress> elements allow you to create visual representations of progress bars. The <meter> element is typically used to represent a value within a specific range, while the <progress> element is used to represent the progress of a task.

Using <meter>, we can indicate different ranges based on what value we set for its attributes.

The attributes min, max, low and high set the ranges of the meter element, the value attribute sets the amount of the meter filled and the optimum attribute tells the browser how to color the ranges.

<h2>Meter</h2>
<meter
  id="meterLow"
  min="0"
  max="100"
  low="33"
  high="66"
  optimum="80"
  value="30"
>
  at 30/100
</meter>
<meter
  id="meterMid"
  min="0"
  max="100"
  low="33"
  high="66"
  optimum="80"
  value="50"
>
  at 50/100
</meter>
<meter
  id="meterHigh"
  min="0"
  max="100"
  low="33"
  high="66"
  optimum="80"
  value="70"
>
  at 70/100
</meter>

We can reverse the colors of the meter by setting optimum lower than low. This is useful when lower values are the preferred range.

<h2>Meter Reverse</h2>
<meter
  id="meterLow"
  min="0"
  max="100"
  low="33"
  high="66"
  optimum="20"
  value="30"
>
  at 30/100
</meter>
<meter
  id="meterMid"
  min="0"
  max="100"
  low="33"
  high="66"
  optimum="20"
  value="50"
>
  at 50/100
</meter>
<meter
  id="meterHigh"
  min="0"
  max="100"
  low="33"
  high="66"
  optimum="20"
  value="70"
>
  at 70/100
</meter>

The <progress> element is simpler than <meter> as it only accepts two attributes (aside from the Global Attributes) max and value. This element displays the amount that is filled in a single color, though not adding the value attribute animates the progress bar, which makes it look like a loading indicator.

<h2>Progress</h2>
<label for="progressVal">With attributes</label>
<br />
<progress id="progressVal" value="60" max="100">
  This isn't displayed
  <p>neither is this</p>
</progress>
<br />
<label for="progress">Without value attribute</label>
<br />
<progress id="progress" max="100"></progress>

Those keen enough may have noticed that the content between the <meter> and <progress> elements aren't being displayed. This is because it is intended to act as a fallback for old browsers that don't support these elements. They should not be confused as an alternative for an accessibility label.

To learn more about <meter> and <progress>, view the MDN docs for meter and progress, respectively.

Optgroup

The <optgroup> element, as its name says, is an element that allows you to group related options in a <select> element. This can make it easier for users to find the option they are looking for, especially if the <select> element contains a large number of options.

<h2>Optgroup</h2>
<select name="beverages" id="beverages">
  <optgroup label="Hot Drinks">
    <option value="coffee">Coffee</option>
    <option value="tea">Tea</option>
  </optgroup>
  <optgroup label="Cold Drinks">
    <option value="soda">Soda</option>
    <option value="iced-tea">Iced Tea</option>
  </optgroup>
  <optgroup label="Juices">
    <option value="orange-juice">Orange Juice</option>
    <option value="apple-juice">Apple Juice</option>
  </optgroup>
</select>

Input types

The <input> element has a wide variety of input types, including type="color", which allows users to select a color from a color picker.

<label for="color">Input: type=color</label>
<input id="color" type="color" />

Input type="file" allows single or multiple file uploads. We can also use the accepts attribute to specify the allowed file types. For example, to allow users to upload only image files, you would use the following attribute:

<input type="file" accepts="image/*" />

For specific file types, we include the string of the file extensions in a comma-separated value.

<input type="file" accept=".jpg, .jpeg, .png" />

• The string audio/* means "any audio file".

• The string video/* means "any video file".

• The string image/* means "any image file".

e.g. to allow any image file and/or PDF files:

<input type="file" accept="image/*,.pdf" />

To learn more about various input types, visit the MDN docs.

Anchor: Linking to HTML elements

The <a> element can be used to link to HTML elements. To link to an element, simply use the fragment identifier (#) followed by the ID of the element. For example, the following code would link to the element with the ID line-break

<a href="#line-break">Line Break</a>

Clicking the link above navigates directly to the specified element with the ID "line-break."

Bonus: VS Code and Emmet

VS Code is a lightweight IDE that is popular among web developers. It comes with a pre-installed extension called Emmet, which can help you speed up your development by providing access to snippets. To use Emmet, simply type a CSS-like expression and press Tab to generate the corresponding HTML code.

Here is a link to a cheat sheet for using Emmet: https://docs.emmet.io/cheat-sheet/

Conclusion

By learning about and using underrated these elements, you'll find yourself well-equipped to create compelling and accessible web experiences without unnecessary dependencies.

If you think that I missed an underrated HTML element, please leave a comment and share how you've used it in your project.

Introduction

I'm Muaz Asif, a full-stack web and mobile engineer with a strong focus on JavaScript frameworks and technologies. I love learning about new tools, libraries, and frameworks, and I'm always eager to tinker with the latest and greatest technologies.

Background

This article has been in the pipeline for almost two years now. In my case, it wasn't that I didn't want to write, but it was the fear of inadequacy and the pursuit of perfection that led to endless delays. The more I learned about programming, the more I felt like there was always something more to learn, a new concept to grasp, and a better way to explain it. This self-imposed pressure prevented me from sharing what I already knew.

On the path I was on, I might've only written a single article in my life, if I would even ever write one!

Embracing Imperfection

The turning point came when I realized that it's okay not to know everything and that the best way to learn is often through teaching. I understood that there's an audience out there craving for explanations of even the basics. That there is value in the content that I have learned, even though initially I may be blind to its value.

Now, even though this article may have a lot of rough edges, to me it is special. It signifies that I took the first step, the most difficult step, which also gives me a starting point to improve upon gradually.

I accepted that my writing might not be perfect, and that's okay. The first draft doesn't have to be flawless; it just needs to exist. Perfection can always be refined in subsequent revisions.

Just Getting Started

From this point forward, I plan to document my learnings and insights during my programming journey. These are exciting times for web development, where the line between server and client is blurred, and new programming paradigms are emerging. The JavaScript ecosystem is constantly evolving, with new tools and libraries released every day.

The current landscape may appear overwhelming, as the fragmented ecosystem means there are multiple approaches to solving the same challenges, often based on personal preference. I aim to share my perspective on existing or new solutions, helping others navigate the complex web of choices, and helping you make informed decisions.

Conclusion

I'll leave you with a quote to summarize what I want to convey with this article:

The best time to plant a tree was 20 years ago, the second best time is now.

I hope you enjoyed this article. Please follow me on social media or subscribe to my blog to stay updated on future posts. And, most importantly, don't be afraid to start!