HTML - Less Obvious Elements

Useful HTML elements that are often overlooked but powerful for everyday development

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.

Basic Usage

<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

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>

meter

Represents a value within a known range (e.g., disk usage). Changes color based on low, high, and optimum values.

<meter value="0.8" low="0.3" high="0.7" optimum="0.5"></meter>
<!-- Shows red because value exceeds optimum range -->

<meter value="0.5" low="0.3" high="0.7" optimum="0.5"></meter>
<!-- Shows green because value is at optimum -->

Semantic Text Tags

<abbr> - Abbreviations

Abbreviation with tooltip on hover (via title attribute).

<abbr title="HyperText Markup Language">HTML</abbr>

<time> - Date and Time

Machine-readable date/time via the datetime attribute.

<time datetime="2025-01-01">January 1st, 2025</time>

<mark> - Highlighted Text

Highlights text with yellow background (relevance/search results).

Search result with <mark>highlighted</mark> term.

<kbd> - Keyboard Input

Represents a keyboard key.

Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.

<sub> / <sup> - Subscript and Superscript

Subscript and superscript text.

H<sub>2</sub>O
x<sup>2</sup>

<del> / <ins> - Deletions and Insertions

Semantically marked deleted (strikethrough) and inserted (underlined) text.

<del>$99.90</del> <ins>$59.90</ins>

<figure> / <figcaption> - Figures with Captions

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.

Text Inputs

text

<input type="text" placeholder="Enter text..." />
<!-- Free text. Default when type is omitted. -->

Numbers & Ranges

number

<input type="number" min="0" max="100" step="5" />
<!-- Numbers only. Supports min, max, and step. -->

Date & Time

date

<input type="date" />
<!-- Native date picker from browser. -->

Other

color

<input type="color" value="#ec4899" />
<!-- Native color picker. Returns hexadecimal value. -->

Useful Input Attributes

Attribute	Description
required	Makes the field mandatory — form won’t submit without it filled.
disabled	Disables the field — can’t be edited or submitted in form.
readonly	Field is visible and submitted in form, but not editable by user.
placeholder	Hint text displayed when field is empty.
autofocus	Automatically focuses this field when page loads.
pattern	Validates value with regular expression. E.g., pattern="[0-9]{5}" for ZIP code.
maxlength / minlength	Limits max/min number of allowed characters.
autocomplete	Controls browser autofill. E.g., "off", "email", "new-password".

Never rely solely on client-side validation. Always validate on the server as well.