HTML Gems Uncovered
A collection of powerful and underused HTML elements
Discover hidden HTML elements that can supercharge your web projects. Explore, learn, and get inspired by practical examples and code snippets.
Browse GemsElements
Dialog
The <dialog> element represents a dialog box or other interactive component, such as a dismissible alert, inspector, or sub-window.
Details & Summary
The <details> element creates a disclosure widget in which information is only visible when the widget is toggled into an 'open' state. A <summary> element provides a summary, caption, or legend for the <details> element's disclosure box.
Datalist
The <datalist> element contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls.
Meter
The <meter> element represents either a scalar value within a known range or a fractional value.
Output
The <output> element is used to display the result of a calculation or user action, especially in forms or calculators. It creates a semantic relationship between the inputs and the result, improving accessibility for screen readers.
Mark
The <mark> element is used for semantic highlighting of text, indicating that the text is relevant or important, such as search term matches. It provides meaning to assistive technologies, unlike a plain <span>.
Time
The <time> element is used to mark up dates, times, or durations in a machine-readable way, while displaying a human-friendly format to users. The datetime attribute uses the ISO 8601 format, making it useful for search engines, browsers, and assistive technologies.
Figure & Figcaption
The <figure> element is used to semantically group media or content with an associated caption, while <figcaption> provides the caption. This improves accessibility and gives meaning to images, code snippets, and quotes.