8 HTML Attributes That Make Your Site Better (No JavaScript Required)

Every few months I discover an HTML attribute that’s been sitting there for years, doing exactly what I was about to write JavaScript for.

Here are eight that deserve more attention.

1. loading="lazy" for Images

<img src="photo.jpg" loading="lazy" alt="Description">

The browser won’t load the image until it’s near the viewport. Native lazy loading, no library needed.

When to use it: Any image below the fold.

When to skip it: Hero images and anything visible on load—you want those to load immediately.

2. inputmode for Better Mobile Keyboards

<input type="text" inputmode="numeric">

This tells mobile browsers which keyboard to show:

• numeric — number pad
• tel — phone keypad
• email — keyboard with @ and .com
• url — keyboard with / and .com
• search — keyboard with search button

Why it matters: type="number" has weird quirks (spinners, validation issues). inputmode="numeric" gives you the keyboard without the baggage.

3. autocomplete with Specific Values

<input type="text" name="cc-number" autocomplete="cc-number">
<input type="text" name="address" autocomplete="street-address">

Browsers can autofill more than names and emails. The full list includes:

• cc-name, cc-number, cc-exp — credit card fields
• street-address, postal-code, country — address fields
• tel, email, username — account fields
• one-time-code — SMS verification codes

The win: Faster checkout = fewer abandoned carts.

4. enterkeyhint for Mobile Submit Buttons

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

Changes the label on the mobile keyboard’s enter key:

• search — magnifying glass
• send — send arrow
• go — “Go”
• next — moves to next field
• done — closes keyboard

Small detail, but it signals what pressing Enter will do.

5. inert to Disable Everything

<div inert>
  <button>Can't click me</button>
  <a href="/">Can't focus me</a>
  <input placeholder="Can't type here">
</div>

The inert attribute makes an entire subtree non-interactive. No clicks, no focus, no keyboard navigation.

Perfect for: Modal backgrounds, off-screen content, and anything that should be temporarily disabled.

6. dialog for Native Modals

<dialog id="my-modal">
  <h2>Modal Title</h2>
  <p>Modal content here.</p>
  <button onclick="this.closest('dialog').close()">Close</button>
</dialog>

<button onclick="document.getElementById('my-modal').showModal()">
  Open Modal
</button>

Native modal behavior:

• Traps focus automatically
• Closes on Escape key
• Adds backdrop (styleable with ::backdrop)
• Handles accessibility

No library needed. Style it however you want.

7. popover for Tooltips and Menus

<button popovertarget="my-popover">Toggle</button>

<div id="my-popover" popover>
  This is a popover! Click outside to close.
</div>

New in 2024, now widely supported:

• Click outside to close (automatic)
• Only one popover open at a time (automatic)
• No JavaScript required
• Keyboard accessible

Use for: Tooltips, dropdown menus, date pickers, any floating UI.

8. form to Connect Distant Inputs

<form id="checkout">
  <!-- form fields here -->
</form>

<!-- Somewhere else in the DOM -->
<input type="text" name="promo" form="checkout">
<button type="submit" form="checkout">Complete Purchase</button>

Inputs don’t have to be inside the <form> tag. The form attribute connects them by ID.

Useful when: Layout constraints put your submit button outside the form, or you have inputs in a sidebar that should submit with the main form.

The Bigger Point

Before reaching for JavaScript, check if HTML can do it natively. Native solutions are:

• Faster (no JS to download or execute)
• More accessible (browsers handle edge cases)
• More reliable (works even if JS fails)

The platform has gotten genuinely good. Use it.

---

Want 100 more practical HTML, CSS, and JavaScript tips? 100 Coding for Website Design Tips covers modern web development one concept at a time—perfect for designers and developers who learn by doing.