10 Subtle HTML Features Most Developers Forget

HTML seems simple. It’s the foundation of the web, and most of us learned it in our first few weeks of development. But hidden in that simplicity are a handful of underused, underrated, and often forgotten features that can improve accessibility, semantics, and even performance.

Let’s explore 10 HTML features that most developers either forget exist — or never learned in the first place.

1. <details> and <summary>: Built-in Toggle Elements

<details>
  <summary>Show Code</summary>
  <pre><code>console.log("Hello, world!");</code></pre>
</details>

This combo gives you a built-in accordion, no JavaScript needed. It’s accessible by default and perfect for FAQs, collapsible code blocks, and documentation.

2. inputmode: Control the Mobile Keyboard

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

You want a number keyboard on mobile — but don’t want to use type="number" (which can be buggy)? Use inputmode="numeric" instead. It’s perfect for PINs, OTPs, or phone numbers.

3. download Attribute in <a> Tags

<a href="resume.pdf" download>Download My Resume</a>

Want a link to trigger a file download rather than opening it? No JavaScript needed — just add the download attribute.

4. hidden Attribute: Instantly Hide Elements

<div hidden>This is not visible</div>

The hidden attribute hides elements without CSS. It’s also respected by screen readers, making it more semantically correct in some cases than display: none.

5. label + for: Improve Accessibility & Clickability

<label for="email">Email</label>
<input id="email" type="email" />

Yes, label improves accessibility. But more than that — it expands the clickable area for checkboxes, radios, and inputs, creating a smoother UX.

6. <fieldset> and <legend>: Group Form Fields Semantically

<fieldset>
  <legend>Payment Info</legend>
  <label>Card Number <input /></label>
</fieldset>

These tags not only help screen readers — but also make your forms visually and structurally easier to navigate. Most devs never use them, but they’re gold for accessible forms.

7. autocomplete: Let the Browser Help You

<input type="email" autocomplete="email" />

Using autocomplete attributes properly helps users fill out forms faster and with fewer errors. It also improves conversion and accessibility.

Bonus: autocomplete="one-time-code" for OTP inputs is supported on mobile devices!

8. <meter> and <progress>: Visual Indicators Without JS

<meter value="0.7">70%</meter>
<progress value="30" max="100">30%</progress>

Need to show performance, storage usage, or progress? These elements give you built-in visuals that are semantic and screen-reader-friendly.

9. <time datetime="">: Semantic Dates

<time datetime="2025-06-01">June 1, 2025</time>

Perfect for blogs, event listings, and search engines. Using the datetime attribute ensures the date is machine-readable — great for SEO and accessibility.

10. aria-* Attributes: Silent Power for Accessibility

<button aria-label="Close menu">✖</button>

While not strictly HTML-only, ARIA attributes are vital for screen reader users. They make interactive elements understandable when visuals alone aren’t enough.

Final Thoughts

HTML is more than just boxes and tags — it’s the semantic backbone of the web. By using these subtle features, you:

• Write cleaner, more maintainable code

• Improve accessibility without extra effort

• Reduce reliance on JavaScript for common UI behaviors

Take Action

Next time you build a form, a blog post, or even a static site, challenge yourself to use at least 3 of these features. Your users — and future self — will thank you.

If you found this useful, consider:

• Sharing your favorite HTML trick in the comments

• Following me for more frontend insights