Proposal: New declarative <currency> element for semantic web and native internationalization

[GrappinoRoot]

What is the issue with the HTML Standard?

Description

I would like to propose a new native HTML element: <currency>.

While the web handles millions of e-commerce transactions daily, there is currently no declarative, semantic way to represent monetary values in HTML. Developers are forced to rely heavily on JavaScript (Intl.NumberFormat) or external libraries to format prices based on user locales. This introduces performance overhead, hydration mismatches in SSR frameworks, and poor accessibility out of the box.

A native <currency> element would solve these issues by shifting the heavy lifting of internationalization and accessibility to the browser vendor.

Proposed Syntax

<!-- basic usage: defaults to the user's browser locale -->
<currency value="1250.50" code="EUR">1 250,50 €</currency>

<!-- explicit locale overriding -->
<currency value="1250.50" code="USD" locale="en-US">\$1,250.50</currency>

<!-- short form format (e.g., millions/thousands shorthand) -->
<currency value="1500000" code="USD" display="compact">\$1.5M</currency>

Attributes

• value (required): A valid decimal floating-point number representing the raw monetary amount.
• code (required): The three-letter ISO 4217 currency code (e.g., EUR, USD, JPY).
• locale (optional): BCP 47 language tag to force a specific formatting. Defaults to the user agent's preferred language.
• display (optional): Controls the formatting style (standard, code, name, compact).

Core Use Cases & Problems Solved

1. Accessibility (A11y): Screen readers currently struggle with currency symbols (e.g., reading "$" as "dollar sign" or ignoring it entirely depending on the configuration). A native <currency> tag tells the accessibility tree exactly what the value represents, allowing speech synthesizers to read "$10.50" naturally as "ten dollars and fifty cents" or "ten point fifty US dollars".
2. SEO & Web Scraping: Search engines and bots currently use fragile regex patterns to guess prices on e-commerce sites. A semantic <currency> element provides immediate, machine-readable financial data without complex JSON-LD schemas for simple price displays.
3. Performance & SSR: Frameworks that use Server-Side Rendering (SSR) often suffer from layout shifts or hydration errors when formatting numbers, because the server locale might differ from the client locale. A declarative HTML tag lets the browser handle localized rendering instantly during the initial paint.

Relationship to existing issues

While issue #11480 focuses on interactive financial inputs (<input type="monetary">), this proposal focuses strictly on a declarative, read-only semantic element (similar to how <time> and <data> behave in the current living standard). Both features are complementary.

Prototype / Polyfill

Here is a basic proof-of-concept using Custom Elements:

class HTMLCurrencyElement extends HTMLElement {
  connectedCallback() {
    const value = parseFloat(this.getAttribute('value'));
    const code = this.getAttribute('code');
    const locale = this.getAttribute('locale') || navigator.language;
    const display = this.getAttribute('display') || 'standard';

    if (isNaN(value) || !code) return;

    const formatter = new Intl.NumberFormat(locale, {
      style: 'currency',
      currency: code,
      notation: display === 'compact' ? 'compact' : 'standard'
    });

    this.textContent = formatter.format(value);
  }
}
customElements.define('custom-currency', HTMLCurrencyElement);

[bkardell]

Perhaps worth looking at https://github.com/mozilla/explainers/blob/main/amount.md