Amazing HTML tips & tricks that you should know

Most of what we write JavaScript for in a form or a page already exists as an HTML attribute or element. These are the ones I see developers rediscover most often, each with a line of code and a note on where it works. All support figures are the Baseline status as of October 2026.

1. spellcheck

<textarea spellcheck="true"></textarea>
<input type="text" spellcheck="false" name="username">

Tells the browser whether to underline misspellings in an editable element. Turn it off on usernames, codes and anything the dictionary will flag wrongly. Widely available.

2. capture

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

On a phone, opens the camera directly instead of the file picker: environment for the rear camera, user for the front one. Desktop browsers ignore it and show the picker. Mobile only by design.

3. contenteditable

<p contenteditable="true">Click to edit this text</p>

Makes any element editable in place. It is what every rich-text editor is built on. For plain text, add contenteditable="plaintext-only" so pasted formatting is dropped. Widely available.

4. input type="color"

<input type="color" value="#1d4ed8">

A native colour picker, returning a hex string. Works in all desktop browsers; some mobile browsers show a reduced picker, so test on your target devices.

5. theme-color

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#111318" media="(prefers-color-scheme: dark)">

Colours the browser chrome around your page on mobile, and the title bar of an installed PWA. The media attribute lets you set one per colour scheme, which is how this blog does it.

6. optgroup

<select>
  <optgroup label="Europe">
    <option>France</option><option>Germany</option>
  </optgroup>
  <optgroup label="Africa">
    <option>Tunisia</option><option>Morocco</option>
  </optgroup>
</select>

Groups options under a non-selectable heading. Widely available since forever, still rarely used.

7. details and summary

<details name="faq">
  <summary>What is Baseline?</summary>
  <p>A shared definition of which web features are safe to use.</p>
</details>

A native accordion: keyboard accessible, announced to screen readers, and find-in-page can open it. Give several a common name and only one stays open at a time. Widely available.

8. inputmode

<input type="text" inputmode="numeric" pattern="[0-9]*" name="otp">
<input type="text" inputmode="email">

Chooses the on-screen keyboard without changing the input's type or validation. The numeric variant is the right way to ask for a one-time code: type="number" would add spin buttons and strip leading zeros. Widely available.

9. loading="lazy"

<img src="photo.webp" width="1280" height="720" alt="..." loading="lazy">
<iframe src="https://www.youtube-nocookie.com/embed/..." loading="lazy"></iframe>

Defers loading until the element is near the viewport. Keep width and height so the layout does not jump, and never lazy-load the first image on the page. Widely available since June 2026 for both images and iframes.

10. popover

<button popovertarget="menu">Options</button>
<div id="menu" popover>
  <button>Rename</button>
  <button>Delete</button>
</div>

A menu, tooltip or toast on the top layer with no JavaScript: opens from the button, closes on Escape or on a click outside, one at a time. Baseline newly available since January 2025, so it works in current browsers and needs a fallback only for old ones.

Honourable mention: field-sizing

textarea { field-sizing: content; }

Not HTML but the fix for the oldest HTML annoyance: a textarea that grows with its content, no script. Newly available since June 2026.

If one of these replaces a script in your project, that is the point. The platform has been quietly absorbing the small widgets for years; the attributes are shorter, more accessible and free.