15 Rare HTML Attributes Every Web Developer Should Know in 2026

Posted on: June 24, 2026
A guide to little-known but powerful HTML attributes for web developers

Something quietly remarkable happened to HTML between 2023 and 2025: it got powerful. A wave of new attributes shipped across every major browser, and a lot of the JavaScript we still write by reflex now has a native, one-line equivalent. Accordions, modals, tooltips, smarter mobile keyboards, faster image loading: plain HTML can do all of it.

This is a tour of 15 attributes that are genuinely useful but still flying under the radar. Most are widely supported today; where support is partial, it is flagged clearly. And because nearly all of them can be added in the Webflow Designer through Element Settings → Custom Attributes, designers can ship these without writing code.

The new wave (2023 to 2025)

Start here. These are the attributes with the biggest "wait, HTML can do that now?" factor, and each one replaces a chunk of JavaScript you may still be shipping.

1. popover: menus and tooltips with zero JavaScript

Add the popover attribute to any element and pair it with a button using popovertarget. The browser handles opening, closing, stacking on the top layer, and "light dismiss" (click outside or press Escape to close). No script required.

<button popovertarget="menu">Open menu</button>
<div id="menu" popover>
  I'm on the top layer, with free Escape and click-away dismiss.
</div>

popover="auto" gives light-dismiss and closes other popovers; popover="manual" stays open until you close it. It pairs beautifully with CSS anchor positioning. Support: Baseline since early 2025 (Chrome/Edge 114, Safari 17, Firefox 125). Gotcha: a popover is not a modal, it does not trap focus or block the page. For a true modal, use <dialog>.

2. inert: the right way to disable background content

The inert boolean attribute makes an element and all of its descendants non-interactive: unfocusable, unclickable, and ignored by assistive technology. It is the native fix for the classic bug where keyboard and screen-reader users can tab into a "hidden" modal background.

<main inert>...page content behind the modal...</main>
<div role="dialog">The active modal</div>

Support: Baseline (widely available) since April 2023. Gotcha: inert has no default styling, so add your own dimming (for example [inert] { opacity: .5; }) so sighted users can see the content is disabled.

3. details name: exclusive accordions, no script

Give several <details> elements the same name and they behave as an exclusive accordion: opening one closes the others. This is the native answer to one of the most common Webflow requests, the FAQ accordion.

<details name="faq"><summary>Question 1</summary>Answer 1</details>
<details name="faq"><summary>Question 2</summary>Answer 2</details>

Support: Baseline across browsers in 2025 (Chrome 120, Safari 17.2, Firefox 130). Gotcha: any one can be open or all can be closed, so do not assume one is always expanded.

4. hidden="until-found": collapsed text that Ctrl-F can still find

Content marked hidden="until-found" is visually hidden but stays discoverable by the browser's find-in-page (Ctrl/Cmd-F) and by URL fragment links. When matched, it reveals itself and fires a beforematch event, so you can expand the surrounding accordion too.

<div hidden="until-found">Searchable collapsed text lives here.</div>

This solves a long-standing problem: text inside collapsed accordions and tabs is normally invisible to Ctrl-F. Support (partial): Chrome/Edge and Firefox support it; Safari was still catching up in late 2025, so verify on Can I Use. It degrades gracefully (stays hidden) where unsupported.

5. contenteditable="plaintext-only": editable without the mess

This makes an element editable but strips rich-text formatting, so pasted content arrives as plain text. Ideal for code editors, chat inputs, or any "fancy textarea" where you do not want pasted HTML and inline styles.

<div contenteditable="plaintext-only">Type or paste; formatting is removed.</div>

Support (partial): Chrome/Edge and Safari have shipped it for a while; Firefox added it in 136. Provide a sanitizing fallback for older Firefox.

Better mobile forms

These attributes cost almost nothing and noticeably improve conversion on phones, where forms are hardest to fill in.

6. inputmode: the right keyboard, without type="number"

inputmode hints which on-screen keyboard to show (numeric, decimal, tel, email, url, search, none) without the downsides of type="number" (spinners, odd validation).

<input type="text" inputmode="numeric" pattern="[0-9]*" placeholder="OTP code">

Support: widely supported. Gotcha: it is only a hint and only affects touch keyboards; desktop is unaffected.

7. enterkeyhint: relabel the mobile return key

Set the label on the on-screen Enter key: enter, done, go, next, previous, search, or send. A "Search" or "Send" key reads as more intentional in multi-step forms and chat inputs.

<input type="search" enterkeyhint="search">

Support: widely supported. Gotcha: cosmetic only; you still wire up the action yourself.

8. autocomplete: the tokens you have never used

Beyond on and off, autocomplete accepts a rich vocabulary so browsers and password managers fill fields precisely. Two standouts: one-time-code makes iOS surface an SMS code above the keyboard, and the payment tokens (cc-number, cc-exp, cc-csc) speed up checkout.

<input autocomplete="one-time-code" inputmode="numeric">
<input type="text" autocomplete="username webauthn">

Correct tokens are also a WCAG technique for identifying input purpose, so this is an accessibility win as well as a conversion one. Support: core tokens are widely supported. Gotcha: the webauthn token must come last in the string.

9. datalist: native autocomplete suggestions

Point an input at a <datalist> with list and the browser gives you a typeahead dropdown, no JavaScript or dependencies.

<input list="cities" name="city">
<datalist id="cities">
  <option value="London"><option value="Lagos"><option value="Lima">
</datalist>

Support: widely supported. Gotcha: you cannot style the dropdown, matching is prefix-only, values are not enforced, and some screen-reader combinations announce options poorly. Reach for a JS combobox when you need richer behavior.

10. dirname and capture: two niche but handy ones

dirname submits a field's text direction (ltr/rtl) as an extra form value, so servers can store mixed-direction content (for example Arabic plus English) correctly. It has been Baseline since August 2023.

<textarea name="comment" dir="auto" dirname="comment-dir"></textarea>

capture on a file input tells mobile devices to open the camera directly (user for front, environment for rear), perfect for one-tap photo uploads. Support (partial): Android/Chrome honor it; iOS Safari and desktop ignore it and fall back to the normal picker, so treat it as progressive enhancement.

<input type="file" accept="image/*" capture="environment">

Performance and Core Web Vitals

These directly affect your LCP and load times, which in turn affect SEO rankings and conversions.

11. loading, decoding and fetchpriority

Three small attributes with an outsized effect on speed:

  • loading="lazy" defers off-screen images and iframes until they are near the viewport.
  • decoding="async" decodes images off the main thread so they do not block surrounding content.
  • fetchpriority="high|low|auto" nudges resource priority; boost your LCP hero, deprioritize below-the-fold assets.
<img src="hero.jpg" fetchpriority="high" decoding="async" alt="...">
<img src="thumb.jpg" loading="lazy" decoding="async" alt="...">

Support: widely supported. Gotcha: never put loading="lazy" on your LCP/hero image; it delays the most important paint. Use fetchpriority="high" there instead, and always set width and height to avoid layout shift.

12. referrerpolicy and crossorigin

referrerpolicy controls how much referrer information leaks to a destination (for example no-referrer or strict-origin-when-cross-origin), which protects privacy and hides internal URLs. crossorigin sets CORS mode and is required to read cross-origin images into a <canvas> or to get detailed script error reporting.

<a href="https://partner.com" referrerpolicy="no-referrer">External link</a>
<img src="https://cdn.example.com/pic.jpg" crossorigin="anonymous" alt="...">

Support: both widely supported. Gotcha: crossorigin needs matching CORS headers from the server or the resource fails to load.

UX polish

The finishing touches: small attributes that smooth over rough edges.

13. download: clean save-to-disk links

The download attribute forces a "save" instead of navigating, and can rename the file.

<a href="/files/q1.pdf" download="Q1-Report.pdf">Download report</a>

Support: widely supported. Gotcha (important): the custom filename and forced download only work reliably for same-origin, blob:, and data: URLs. For cross-origin files (a CDN, say) the browser may ignore it and navigate instead; you need a Content-Disposition: attachment header from the server.

14. spellcheck and translate

spellcheck="false" turns off the red squiggles on usernames, codes, and slugs. translate="no" tells browser and Google translation tools to leave content alone, ideal for brand names and code samples.

<input name="slug" spellcheck="false">
<span translate="no">Webflow</span>

Support: spellcheck is widely supported; translate works best in Chrome and Google Translate. Gotcha: spellcheck is only a hint and often has no effect on mobile, where the OS handles spelling.

15. accesskey: include it, then think twice

accesskey defines a keyboard shortcut to focus or activate an element. It is genuinely lesser-known, but it is also widely regarded as problematic: it clashes with browser and screen-reader shortcuts, breaks on international keyboards, and can be announced repeatedly by assistive tech. For public sites, the honest advice is to avoid it; if you must, keep values unique and documented.

<button accesskey="s">Save</button> <!-- use with caution -->

Shipping these in Webflow

Most of these work right inside Webflow. In the Webflow Designer, select an element, open Element Settings → Custom Attributes, and add the attribute name and value (for example name popover with an empty value, or loading set to lazy). That covers nearly every attribute here. The handful that act on form behavior, like inputmode and enterkeyhint, go on your input elements the same way.

Pick a few that fit your next build: inert and popover for cleaner modals and menus, details name for FAQs, inputmode and autocomplete for friendlier mobile forms, and fetchpriority for a faster hero. Each one is a little less JavaScript to maintain.

Want a fast site that uses the platform well instead of fighting it? Grab a free audit and we will show you where native HTML can replace code on your pages.

Sources