Lesser-Known Native HTML Elements

Interactive Collapsible Content

The <details> and <summary> elements create expandable sections:

<details>
    <summary>Click to expand this section</summary>
    <p>This content was hidden and is now visible.</p>
</details>

Supported in all modern browsers. Older browsers show the content expanded.

Native Modal Dialogs

The <dialog> element creates proper modal windows with built-in focus management and keyboard navigation:

<dialog id="my-dialog">
    <form method="dialog">
        <h3>Dialog Title</h3>
        <p>Dialog content here.</p>
        <button type="submit">Close</button>
    </form>
</dialog>

<button onclick="document.getElementById('my-dialog').showModal()">
    Open Dialog
</button>

Note: This example uses minimal JavaScript just for the demo. In production, you'd want proper event handlers.

Visual Progress and Measurements

Two elements for showing data visually without custom styling:

Progress Bars

Loading progress: 32%

Indeterminate progress: Loading...

<progress value="32" max="100">32%</progress>
<progress>Loading...</progress>

Measurements and Gauges

Disk usage: 6 out of 10

Test score: 60%

Temperature: 75°F

<meter value="6" min="0" max="10">6 out of 10</meter>
<meter value="75" min="32" max="100" low="65" high="85" optimum="75">
    75°F
</meter>

Form Calculations and Output

The <output> element displays calculated results from form inputs:

<form>
    <label for="price">Price: $</label>
    <input type="number" id="price" value="100">
    
    <label for="tax">Tax Rate: </label>
    <input type="range" id="tax" min="0" max="15" value="8.5">
    <output for="tax">8.5</output>%
    
    <strong>Total: </strong>
    <output for="price tax">$108.50</output>
</form>

Typography for Global Languages

The <ruby> element adds pronunciation guides or translations above text - originally for Japanese, but works for any language:

Hindi greeting: नमस्ते(namaste)

Sanskrit: संस्कृतम्(saṃskṛtam)

<ruby>
    नमस्ते
    <rp>(</rp>
    <rt>namaste</rt>
    <rp>)</rp>
</ruby>

The <rp> elements provide fallback parentheses for browsers that don't support ruby annotations.

Semantic Text Markup

These elements add meaning to technical content:

<kbd>

Keyboard input: Press Ctrl+C to copy

<samp>

Sample output: $ ls -la

<var>

Variables: The equation is y = mx + b

<mark>

Highlighted text: Search results for HTML elements

<abbr>

Abbreviations: HTML is semantic

<kbd>Ctrl</kbd>+<kbd>C</kbd>
<samp>$ ls -la</samp>
<var>y</var> = <var>mx</var> + <var>b</var>
<mark>highlighted text</mark>
<abbr title="HyperText Markup Language">HTML</abbr>

Benefits

• Screen readers understand semantic elements
• Search engines parse structured content better
• No JavaScript dependencies to maintain
• Native browser implementations are fast
• Works without JavaScript

Browser Support

Most of these elements have excellent support in modern browsers:

• details/summary: Supported everywhere (Chrome 12+, Firefox 49+, Safari 6+)
• dialog: Chrome 37+, Firefox 98+, Safari 15.4+ (needs polyfill for older browsers)
• meter/progress: Universal support
• output: Universal support
• ruby: Universal support with varying styling