Skip to main content
HTML elements that are less commonly discussed but extremely useful for day-to-day development, including <details>, <dialog>, <progress>, <meter>, and more.

​
Interactive Elements

​
<details> and <summary>

Creates a native HTML collapsible accordion without JavaScript. The <summary> is the clickable title; the rest inside <details> is the hidden content. 
<details>
  <summary>Click here</summary>
  <p>Hidden content</p>
</details>
The open attribute makes the element start in an expanded state.

​
<dialog>

Native HTML modal controlled via JavaScript with .showModal() and .close(). The open attribute displays it inline (without backdrop). 
<dialog id="modal">
  <p>Modal content</p>
  <button onclick="modal.close()">Close</button>
</dialog>

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

<style>
  dialog::backdrop {
    background: rgba(0, 0, 0, 0.6);
  }
</style>
When opened with .showModal(), it automatically creates a backdrop that can be styled via ::backdrop CSS pseudo-element.

​
Form Elements

​
<datalist>

Adds autocomplete suggestions to an <input>. The user can still type freely — it’s not a required select. 
<input list="frutas" placeholder="Type a fruit..." />

<datalist id="frutas">
  <option value="Apple" />
  <option value="Banana" />
  <option value="Mango" />
  <option value="Strawberry" />
  <option value="Watermelon" />
</datalist>
Linked to the input via the list attribute that points to the datalist’s id.

​
Progress Indicators

​
<progress> and <meter>

Progress bar for a task. Use value and max. Without value, it stays in an indeterminate state (animated).
<!-- Determinate progress -->
<progress value="70" max="100"></progress>

<!-- Indeterminate (loading) -->
<progress></progress>

​
Semantic Text Tags

Abbreviation with tooltip on hover (via title attribute).
<abbr title="HyperText Markup Language">HTML</abbr>
Machine-readable date/time via the datetime attribute.
<time datetime="2025-01-01">January 1st, 2025</time>
Highlights text with yellow background (relevance/search results).
Search result with <mark>highlighted</mark> term.
Represents a keyboard key.
Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.
Subscript and superscript text.
H<sub>2</sub>O
x<sup>2</sup>
Semantically marked deleted (strikethrough) and inserted (underlined) text.
<del>$99.90</del> <ins>$59.90</ins>
Wraps images, charts, or code blocks with a semantic caption.
<figure>
  <img src="photo.jpg" alt="Landscape" />
  <figcaption>Beautiful mountain landscape</figcaption>
</figure>

​
Input Types Reference

The type attribute completely changes the behavior and appearance of inputs — validation, mobile keyboard, native browser UI. 
<input type="text" placeholder="Enter text..." />
<!-- Free text. Default when type is omitted. -->

​
Useful Input Attributes

AttributeDescription
requiredMakes the field mandatory — form won’t submit without it filled.
disabledDisables the field — can’t be edited or submitted in form.
readonlyField is visible and submitted in form, but not editable by user.
placeholderHint text displayed when field is empty.
autofocusAutomatically focuses this field when page loads.
patternValidates value with regular expression. E.g., pattern="[0-9]{5}" for ZIP code.
maxlength / minlengthLimits max/min number of allowed characters.
autocompleteControls browser autofill. E.g., "off", "email", "new-password".
Never rely solely on client-side validation. Always validate on the server as well.

Build docs developers (and LLMs) love

Get started for freeTalk to us