Obscure HTML Attributes on My Radar

attributesHTMLMarkup

I don’t reach for these every day, but they fascinate me. Some are old, some new, and all of them feel like hidden corners of the spec worth exploring.

What I like about digging into HTML attributes is that they reveal just how much thought has gone into the language over time. Some of these were designed for edge cases, others for accessibility or performance, and a few feel like delightful quirks that never quite caught on. I wouldn’t call them part of my daily toolkit, but I keep them in the back of my mind, waiting for the project where one suddenly feels like the perfect fit.

This is my running list of attributes I’ve discovered, rediscovered, or just admired from afar.

Custom Ordered Lists

I’m more of a <ul> person, but <ol> has some unique features worth exploring.

  • reversed: Number the list in reverse order (high → low).
  • start: Define what number to start from.
  • type: Use numbers (default), letters, or Roman numerals.
<ol reversed start="5" type="I">
  <li>Fifth</li>
  <li>Fourth</li>
  <li>Third</li>
</ol>

enterkeyhint

Lets you change what users see on the “enter” key of virtual keyboards. Supported values:
enter, done, go, search, send, next, previous.

<input type="text" enterkeyhint="search" placeholder="Search…">

Can I Use • MDN docs

download

When a link is clicked, you can instruct the browser to download the target rather than open it.

Without a value, the file name defaults to the source. With a value, you can suggest a name:

<a href="/plain-text.pdf" download>Download File</a>
<a href="/plain-text.pdf" download="notes.pdf">Download Notes</a>

This also works with data: URIs, which makes for fun little “generate & download” tricks in the browser without touching server headers.

decoding

Hints to the browser how to decode images.
Options: sync, async, or auto.

<img src="hero.png" alt="Hero Image" decoding="async">

It doesn’t change network load time, but it influences when the image becomes visible.

loading

Native lazy-loading baked into the spec, works on both images and iframes.
Values: lazy or eager.

<img src="big-photo.jpg" alt="Lazy Loaded" loading="lazy">
<iframe src="ad.html" loading="lazy"></iframe>

cite + datetime

Adds context for quotes and edits:

<blockquote cite="https://developer.mozilla.org/">
  Quoting MDN…
</blockquote>

<del cite="https://bugzilla.mozilla.org/" datetime="2020-07-23">
  Old text
</del>
<ins datetime="2020-07-23">
  New text
</ins>

label (on <optgroup>)

Grouping <select> options cleanly:

<select>
  <optgroup label="Birds">
    <option>Jay</option>
    <option>Cardinal</option>
  </optgroup>
  <optgroup label="Mammals" disabled>
    <option>Lion</option>
    <option>Quokka</option>
  </optgroup>
</select>

fetchpriority

A relatively new attribute that hints to the browser how urgently a resource should be fetched. Useful for performance tuning, though still not widely seen in the wild.

<img src="hero.jpg" alt="Main hero image" fetchpriority="high">
<link rel="stylesheet" href="theme.css" fetchpriority="low">

Values are high, low, or auto.
This lets you tell the browser: “Hey, this image is critical, grab it first” or “this stylesheet is not as important, deprioritize it.”

One caveat: I do worry this can lead to over-engineering or over-thinking. Browsers are already smart about resource loading, so this attribute is best used sparingly, when you’ve actually measured a bottleneck.

nonce

This one feels almost magical. You add a random value to a <script> or <style> tag and then configure your Content Security Policy (CSP) to allow only resources with that nonce. The browser enforces that only trusted inline code executes.

<script nonce="r4nd0m">
  console.log("This script will only run if CSP allows this nonce");
</script>

I love the concept — it’s elegant security baked into HTML — but in practice it’s tough to maintain. Every request needs a fresh nonce generated on the server and wired into headers. It feels just out of reach for me to use regularly. Maybe one day.

What I love about HTML is that it’s never really “done.” Even after decades of writing markup, I keep bumping into attributes that surprise me – some brand new, some older but overlooked. They remind me that the spec is both practical and quirky, and that there’s always another trick hiding in plain sight.