The <output> Element

A native HTML element for displaying calculation results and user action outcomes. Updates are automatically announced to screen readers.

Example 1: Simple Addition

The classic calculator example:

+ = 30

Example 2: Range Slider with Formatted Output

Showing a user-friendly version of a slider value:

50%

Example 3: Character Counter

Real-time feedback as you type:


0 / 100

Example 4: Password Strength Indicator

Dynamic feedback without a form:

Enter a password

Example 5: Button Click Counter

Output from a user action, not a calculation:

0 clicks

Example 6: Shopping Cart Total

Multiple inputs contributing to one output:



Total: $50.00