Blog cikk

10 HTML Tricks Experts Use That You Can Start Using Today

Discover ten lesser-known HTML features that solve real problems without JavaScript. From native modals to semantic progress indicators, these patterns...

readytools

July 25, 2026

5 perc olvasás

10 HTML Tricks Experts Use That You Can Start Using Today

Image source: images.pexels.com

Megosztás

Native modals without the library overhead

The <dialog> element gives you a fully accessible modal dialog with built-in focus management, backdrop styling, and keyboard dismissal. No focus-trap libraries, no portal components, no z-index wars.

Code

<dialog id="confirm">
  <h3>Delete project?</h3>
  <p>This action cannot be undone.</p>
  <menu>
    <button value="cancel" autofocus>Cancel</button>
    <button value="delete" id="confirm-delete">Delete</button>
  </menu>
</dialog>

Open it with dialog.showModal() and close with dialog.close(). The ::backdrop pseudo-element styles the overlay. Form submission with method="dialog" closes the dialog automatically and sets dialog.returnValue.

Accordions that work without JavaScript

<details> and <summary> create native disclosure widgets. The browser handles open state, keyboard interaction, and ARIA attributes automatically.

Code

<details>
  <summary>Shipping rates</summary>
  <p>Free shipping on orders over $50.</p>
  <p>Standard delivery: 3-5 business days.</p>
</details>

Add the open attribute to start expanded. Style the disclosure triangle with summary::marker or hide it and use a custom icon. Nested <details> elements work correctly without extra effort.

Client-side templates the browser already parses

<template> elements are inert - their content doesn't render, scripts don't execute, images don't load. Clone template.content and append it wherever you need.

Code

<template id="card-template">
  <article class="card">
    <h3></h3>
    <p></p>
  </article>
</template>

<script>
  const template = document.getElementById('card-template');
  const clone = template.content.cloneNode(true);
  clone.querySelector('h3').textContent = 'New item';
  document.body.appendChild(clone);
</script>

This avoids innerHTML strings and keeps your template in HTML where it belongs. The cloned DocumentFragment inserts efficiently in a single DOM operation.

Responsive images without CSS hacks

<picture> with <source> elements lets the browser choose the right image based on viewport, pixel density, or format support. No JavaScript, no layout shift.

Code

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="Product dashboard" width="1200" height="600">
</picture>

Add media attributes for art direction - different crops for different breakpoints. The <img> is required as the fallback and provides the accessibility attributes.

Autocomplete that actually helps users

<datalist> provides native suggestions for text inputs. Users see a dropdown as they type, but can still enter free text. It's not a replacement for <select> when the value must come from a fixed list.

Code

<label for="framework">Framework</label>
<input list="frameworks" id="framework" name="framework">
<datalist id="frameworks">
  <option value="React">
  <option value="Vue">
  <option value="Svelte">
  <option value="Solid">
</datalist>

Combine with autocomplete="framework" (or a custom token) so password managers and browsers can prefill intelligently.

Semantic progress that screen readers announce

<progress> represents task completion. <meter> represents a scalar measurement within a known range - disk usage, battery level, exam score. Both expose value semantics to assistive technology.

Code

<!-- Indeterminate progress -->
<progress></progress>

<!-- Determinate progress -->
<progress value="42" max="100">42%</progress>

<!-- Meter with thresholds -->
<meter value="0.6" min="0" max="1" low="0.3" high="0.8" optimum="0.9">60%</meter>

Style with progress[value] and meter selectors. The optimum, low, and high attributes let browsers color-code the meter automatically.

Calculation results that announce to screen readers

<output> represents the result of a calculation. Pair it with <input type="range"> and the for attribute to create accessible sliders that announce the current value.

Code

<label for="quantity">Quantity</label>
<input type="range" id="quantity" name="quantity" min="1" max="100" value="10">
<output for="quantity" id="qty-out">10</output>

<script>
  document.getElementById('quantity').addEventListener('input', e => {
    document.getElementById('qty-out').value = e.target.value;
  });
</script>

The for attribute links the output to its controlling inputs. Screen readers announce the output value when it changes.

Mobile keyboards that match the input type

The inputmode attribute tells mobile browsers which virtual keyboard to show, independent of the input type. Use numeric for PINs, decimal for prices, email for addresses, url for links, search for search fields.

Code

<!-- PIN entry: numeric keypad, no decimal -->
<input inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code">

<!-- Price: decimal keypad with dot/comma -->
<input type="text" inputmode="decimal" pattern="[0-9.,]*">

<!-- Email: @ and .com keys -->
<input type="email" inputmode="email">

The pattern"[0-9]*" on iOS triggers the numeric keypad reliably. autocomplete="one-time-code" lets iOS suggest SMS codes automatically.

Form autofill that works across browsers

Specific autocomplete values tell password managers and browsers exactly what each field expects. The spec defines over 50 tokens - name, email, street-address, postal-code, cc-number, cc-exp, cc-csc, new-password, current-password, one-time-code.

Code

<form autocomplete="on">
  <label>Card number
    <input type="text" autocomplete="cc-number" inputmode="numeric">
  </label>
  <label>Expiry
    <input type="text" autocomplete="cc-exp" placeholder="MM/YY">
  </label>
  <label>CVC
    <input type="text" autocomplete="cc-csc" inputmode="numeric">
  </label>
</form>

Use autocomplete="off" only for fields that must never be stored - one-time tokens, CAPTCHA responses. For everything else, be specific.

Editable content that behaves like a form field

contenteditable="plaintext-only" lets users edit text directly while preserving line breaks but stripping formatting. Combined with the input event, it creates a lightweight rich-text alternative.

Code

<div
  contenteditable="plaintext-only"
  data-placeholder="Write a comment..."
  role="textbox"
  aria-multiline="true"
  aria-label="Comment"
></div>

<style>
  [contenteditable]:empty::before {
    content: attr(data-placeholder);
    color: #999;
  }
</style>

<script>
  const el = document.querySelector('[contenteditable]');
  el.addEventListener('input', () => {
    console.log('Current text:', el.textContent);
  });
</script>

The plaintext-only value (supported in modern browsers) prevents pasted HTML from creating nested elements. Add role="textbox" and aria-multiline" for accessibility.

Machine-readable dates that humans can read

<time> with a datetime attribute gives you both: a human-friendly format and an ISO 8601 timestamp for search engines, calendars, and screen readers.

Code

<time datetime="2024-03-15T09:30:00-05:00">March 15, 2024 at 9:30 AM</time>
<time datetime="2024-Q1">Q1 2024</time>
<time datetime="PT45M">45 minutes</time>

Microformats like h-entry and schema.org BlogPosting expect <time class="dt-published" datetime="...">. The element is inline by default and requires no JavaScript.

Putting it together

These ten features share a pattern: the browser already implements the hard parts - focus management, keyboard navigation, ARIA mapping, platform integration. Your job is to use the right element and provide the right attributes.

Start by auditing your codebase for custom modal components, accordion scripts, template strings, image srcset gymnastics, and hand-rolled autocomplete widgets. Replace them one at a time. The resulting code is smaller, more accessible, and easier to maintain.

HTML has grown quietly while frameworks grabbed attention. The features described here are stable, widely supported, and ready for production. They don't require a build step, a dependency, or a migration guide. They just work.

Építkezz gyorsabban a ReadyTools segítségével

Fedezd fel a ReadyTools-t: a tökéletes produktivitási csomagot alkotók számára. Gyönyörű Linksy oldalak, intelligens Lara AI, projektmenedzsment, biztonságos felhőtárhely és minden más, amire szükséged van — mind egy helyen. Kezdd el a 7 napos ingyenes próbaidőszakot még ma.

ReadyTools felfedezése

Tartalomjegyzék

Native modals without the library overhead Accordions that work without JavaScript Client-side templates the browser already parses Responsive images without CSS hacks Autocomplete that actually helps users Semantic progress that screen readers announce Calculation results that announce to screen readers Mobile keyboards that match the input type Form autofill that works across browsers Editable content that behaves like a form field Machine-readable dates that humans can read Putting it together

Olvasd tovább