Great HTML5 tags you may have missed

Since front end development nowadays is so focused on JavaScript it’s easy to forget that new features are added to HTML as well.

HTML 5.1 is already 5 years old (1 November 2016) and I am embarrassed to say that there are some new tags that have passed me by.

<summary> and <details>

Ever since the golden (?) days of jQuery developers have been forced to use JavaScript to add collapsible fields to a page, but no more!

The <summary> tag is used with <details> to specify a visible heading with a (optionally) hidden, collapsible content field.

Code:

<details>
  <summary>Read more...</summary>
  Details are hidden from view 😮
</details>

Result:

Read more…

Details are hidden from view 😮

It’s also possible to have the details text open by default, just add an open-property.

Code:

<details open>
  <summary>Read more...</summary>
  This text is not hidden by default
</details>

Result:

Read more…

This text is not hidden by default

This property can also be used to change the styling when open/closed and it’s good to know that the arrow can be changed or removed as well.

Code:

details {
  background-color: #fff;
}
details > summary {
  list-style: none;
}
details[open] {
  background-color: #ccc;
}

Result:

Read more…

This text is not hidden by default

If you can’t stay away from JavaScript, the <details>-tag has a toggle-event that you can subscribe to for updates.

<datalist>

The <datalist> tag specifies a list of pre-defined options and allows users to add more to it. It provides an autocomplete feature that allows you to get the desired options with a type-ahead.

It would be easy to think of this as an alternative to the <select>-tag, but it should be seen as a text-input with built in suggest functionality since the user is not forced to explicitly select one of the given values.

Code:

<label for="fav-lang">Favourite programming language:</label>
<input list="lang" id="fav-lang" name="fav-lang" />

<datalist id="lang">
  <option value="TS">TypeScript</option>
  <option value="JS">JavaScript</option>
  <option value="Java"></option>
  <option value="C#"></option>
  <option value="Rust"></option>
  <option value="Python"></option>
</datalist>

Result:

Favourite programming language:

Caveats

There seem to be some issues when using datalist with a large list (> 512) of options so you might want to consider how many items you put in the list.

<meter>

Use the <meter> tag to visualize a value in a range of numbers. The most common use case I’ve seen is for visualizing the strength in a password.

Code:

<label for="score">Lighthouse score:</label>
<meter id="score" min="0" max="100" low="40" high="80" optimum="90" value="85">85/100</meter>

Result:

Lighthouse score: 85/100

<progress>

Quite similar to the <meter>-tag but, progress always has a minimum value of 0.

Code:

<label for="progress">Progress:</label>
<progress id="progress" max="5" value="3">3/5</progress>

Result:

Progress: 3/5

<mark>

The <mark>-tag is used to semantically highlight any text for clarity and is maybe best used in search results to mark parts of a bigger text block.

Code:

<p>“Ph’nglui mglw’nafh Cthulhu R’lyeh wgah’nagl fhtagn.”</p>
<p>Legrasse had one point in advance of Professor Webb, for several among his mongrel prisoners had repeated to him what older celebrants had told them the words meant. This text, as given, ran something like this:</p>
<p>“In his house at R’lyeh dead <mark>Cthulhu waits dreaming.</mark>”</p>
<p>And now, in response to a general and urgent demand, Inspector Legrasse related as fully as possible his experience with the swamp worshippers; telling a story to which I could see my uncle attached profound significance. It savoured of the wildest dreams of myth-maker and theosophist, and disclosed an astonishing degree of cosmic imagination among such half-castes and pariahs as might be least expected to possess it.</p>

Result:

“Ph’nglui mglw’nafh Cthulhu R’lyeh wgah’nagl fhtagn.”

Legrasse had one point in advance of Professor Webb, for several among his mongrel prisoners had repeated to him what older celebrants had told them the words meant. This text, as given, ran something like this:

“In his house at R’lyeh dead Cthulhu waits dreaming.”

And now, in response to a general and urgent demand, Inspector Legrasse related as fully as possible his experience with the swamp worshippers; telling a story to which I could see my uncle attached profound significance. It savoured of the wildest dreams of myth-maker and theosophist, and disclosed an astonishing degree of cosmic imagination among such half-castes and pariahs as might be least expected to possess it.

Autocapitalize <input>

While not a tag, the autocapitalize attribute can be added to input-elements to force digital keyboards, usually on mobile devices, to behave in a certain way.

It’s good to know that the attribute will not do any changes to the actual value for the input, so it will have no impact when used with a physical keyboard. autocapitalize will make the mobile keyboard change case depending on the value given to the attribute.

Code:

<!-- none: all letter should default to lowercase -->
<input type="text" autocapitalize="none" />

<!-- characters: ALL CHARACTERS SHOULD BE UPPERCASE -->
<input type="text" autocapitalize="characters" />

<!-- sentences: First letter of each sentence should be uppercase -->
<input type="text" autocapitalize="sentences" />

<!-- words: First Letter Of Every Word Should Be Uppercase -->
<input type="text" autocapitalize="words" />

It should be noted that an input of type url, email, or password will not use autocapitalize.