7 Modern HTML Features You Should Know

I know this might come as a shock since HTML is the base on which we build web apps, and the general assumption is that HTML is the easiest markup language out there. However, if you are not keeping up with the constant updates in the Web APIs space, and trust me, there are quite a few of them, you’ll be surprised to find out that your knowledge is getting deprecated quite fast.

So let’s make sure you are making the most of the tools provided natively by the browsers, and look at 7 cool HTML and Web features you might not be familiar with.

Dialog

We’ll start with the Dialog since this one is probably more familiar. Modals are a common pattern in modern UIs, and you can now leverage the browser’s native support to define and control them on the screen. With the native implementation, you have access to a bunch of features from the get go.

<dialog>
  <h1>Awesome!</h1>
  <form method="dialog">
    <button>Done</button>
  </form>
</dialog>

const dialog = document.querySelector("dialog");
const btn = document.querySelector("button");

btn.addEventListener("click", () => {
  dialog.showModal();
});

Dialogs will be closed when the escape key is pressed, you can style the backdrop using the associated pseudo-element

::backdrop {
  background: #000;
  opacity: 0.75;
}

and, you can easily exchange values through the return value property.

dialog.addEventListener("close", () => {
  console.log(dialog.returnValue);
});

Dialogs will block the interaction with the rest of the page, but, if you want a non-modal behavior, you can use the Popover API instead.

In its most basic form, any element can be defined as a popover through an attribute, and can then be linked to a button or input via the target attribute.

<div id="pop" popover>Like and Subscribe!</div>
<button popovertarget="pop" popovertargetaction="show">Show</button>
<button popovertarget="pop" popovertargetaction="hide">Hide</button>

Then, through target action you can either show, or hide the element.

It is also worth mentioning that popovers can have an implicit auto state which means they’ll be closed when the user clicks outside the element or he presses the escape key.

<div id="pop" popover="auto">Like and Subscribe!</div>
<button popovertarget="pop" popovertargetaction="show">Show</button>
<button popovertarget="pop" popovertargetaction="hide">Hide</button>

If you want more control over this, you can switch to manual, and the popover cannot be “light dismissed”.

<div id="pop" popover="manual">Like and Subscribe!</div>
<button popovertarget="pop" popovertargetaction="show">Show</button>
<button popovertarget="pop" popovertargetaction="hide">Hide</button>

Details Disclosure

Another element allowing us to conditionally display elements on the page is Details disclosure, which displays a summary whenever the widget is toggled into an “open” state.

<details>
  <summary>Details</summary>
  Something small enough to escape casual note
</details>

DataList Element

The DataList element could also be really useful in a lot of scenarios since it allows you to define the permissible or recommended options available within other controls.

<label for="lang">Language</label>
<input list="lang-options" id="lang" />
<datalist id="lang-options">
  <option value="JavaScript"></option>
  <option value="Go"></option>
  <option value="Kotlin"></option>
</datalist>

These controls can be either plain inputs, or, more interestingly, time, or ranges.

<input type="time" list="hours" />
<datalist id="hours">
  <option value="12:00"></option>
  <option value="14:00"></option>
  <option value="16:00"></option>
</datalist>

<input type="range" list="tip" min="0" max="10" />
<datalist id="tip">
  <option value="0"></option>
  <option value="2"></option>
  <option value="4"></option>
</datalist>

Inert Attribute

The inert attribute allows you to ignore elements together with their descendants.

<div id="app" inert class="loading">...</div>

The browser will ignore input events sent by the user, including focus-related ones. Note that by default, there is no visual way to tell whether or not an element or its subtree is inert, so visual queues fall under your responsibility.

[inert] {
  opacity: 0.5;
  pointer-events: none;
}

On top of that, remember that the disabled attribute is still a better choice to make form controls “inert”.

<button disabled>Click me</button>

Color Picker

Switching gears to some more specialized features, the color picker is a small yet useful addition to the standard.

<input type="color" /> <button id="color">Pick</button>

This has a very specific usage, but covers a scenario which was previously handled exclusively through 3rd party libraries.

// Color Picker
const input = $("input");
const btn = $("button");

btn.addEventListener("click", () => {
  input.showPicker();
});

HTML Capture

Another similar feature is the HTML capture attribute. This can be added on file input elements and allows users to use their devices and capture images using either the front or the back camera.

<label for="selfie">Selfie</label>
<input type="file" accept="image/*" capture="user" />

<label for="picture">Picture</label>
<input type="file" accept="image/*" capture="environment" />

Note that this isn’t supported on regular browsers, but you should have no compatibility issues on mobile devices.

We didn’t discuss Progressive Web Apps in this article, but things are moving rapidly here as well. Please let me know if you are interested in exploring the PWA topic in more detail.

If you feel like you learned something, you should watch some of my youtube videos or subscribe to the newsletter.

Until next time, thank you for reading!