April 15, 2026 · 8 min read
10 underrated HTML features that actually improve tour apps
Ten practical HTML attributes and elements that improve performance, accessibility, and UX without extra JavaScript.
I have been diving deeper into raw HTML lately, and it still has hidden gems many teams ignore in favor of heavy JavaScript or CSS hacks.
These attributes and native features can improve performance, accessibility, and user experience with almost no extra code.
Here is a practical list I now use more often in real projects.
1. Controlling resource priority with fetchpriority
When a page loads many images and scripts, the browser does not always guess the most important assets correctly.
Add fetchpriority="high" to critical hero images and above-the-fold content. Use low for less important assets.
This tiny change can improve Largest Contentful Paint.
Resource priority on images · html
<img src="hero-image.jpg" fetchpriority="high" alt="Main banner" />
<img src="gallery-thumb.jpg" fetchpriority="low" alt="" />2. Smarter image decoding with decoding
After download, images still need decoding before paint.
Use decoding="async" for non-critical images so rendering is not blocked, and decoding="sync" only when immediate display is required.
Non-critical image · html
<img src="gallery-photo.jpg" decoding="async" alt="Gallery photo" />Critical image · html
<img src="logo-critical.png" decoding="sync" alt="Brand logo" />3. inert: disable an entire interactive region
Instead of disabling each button and link manually, add inert to the container.
Everything inside becomes non-interactive: no clicks, no focus, and no text selection.
This is useful for modals, loading states, and temporarily blocked UI sections.
Inert container · html
<div class="preview-mode" inert>
<!-- all links and buttons inside are disabled -->
</div>4. popover attribute for native overlays
Use popover or popover="auto" on an element and trigger it with popovertarget from a button.
For simple tooltips, dropdowns, and lightweight overlays, this removes the need for extra libraries.
The browser handles stacking, focus behavior, and light-dismiss by default.
5. Preventing unwanted capitalization with autocapitalize
Mobile keyboards often capitalize the first letter in email and username fields.
Add autocapitalize="off" to avoid input friction in auth flows.
Disable keyboard autocapitalization · html
<input type="email" autocapitalize="off" autocomplete="username" />6. autofocus done right
autofocus is old but still useful when applied intentionally on dedicated pages such as login or search.
Do not overuse it on dense forms where it can disrupt keyboard flow and accessibility expectations.
7. spellcheck="false" for technical inputs
Disable spellcheck for usernames, API keys, slugs, and similar technical strings.
Keep spellcheck enabled for normal prose fields where users benefit from typo correction.
Technical text input · html
<input type="text" spellcheck="false" value="my-project-v2" />8. Protecting terms from translation with translate="no"
Browser translation can break brand names, technical terms, and inline code words.
Wrap critical terms with translate="no" to keep wording accurate across translated pages.
Protect technical terms · html
The <span translate="no">padding</span> property controls inner spacing.9. hidden instead of style="display:none"
Use the semantic hidden attribute instead of inline style toggles.
It is cleaner to read, easier to toggle from JavaScript, and pairs well with <dialog> workflows.
Unhide element in JS · ts
element.hidden = false;10. enterkeyhint for better mobile keyboards
Customize the mobile Enter key label to match intent, such as Search, Send, Next, or Done.
Small keyboard hints make forms feel cleaner and more polished.
Mobile keyboard action hint · html
<input type="search" enterkeyhint="search" />Final take
Most of these features require zero additional JavaScript and are widely supported in modern browsers in 2026. They are small changes, but together they noticeably improve real user experience.