References

Beginner-friendly references for web development, with live, editable examples.

The HTML <output> tag

Element All modern browsers Updated
Quick answer

The HTML <output> element displays the result of a calculation or user action. Its for attribute lists the ids of the inputs it depends on, and it is announced as a live region when its content updates.

Overview

The <output> element is the semantic place to show the result of a calculation or user action — a running total, a slider's current value, a computed subtotal. Using it (rather than a plain <span>) tells assistive technology that this text is a result.

Its for attribute can list the ids of the controls that feed the result, documenting the relationship between the inputs and their output. It also has a name, so it can participate in form data and scripting.

The standout feature is accessibility: <output> is an ARIA live region by default, so when its text changes, screen readers announce the new value automatically — no extra aria-live needed. That makes it ideal for live calculators where the result updates as the user interacts.

Syntax

<input id="x" type="number"> + <input id="y" type="number">
= <output name="sum" for="x y">0</output>

Attributes

The <output> element supports the following attributes, in addition to the global attributes available to every HTML element.

Attribute Value Description
for A single element id (on <label>) or a space-separated list of ids (on <output>). Links a label to its form control by id.
form The id of a <form> element. Associates a control with a form by id.
name A string (the field name used in the submitted data). Names a form control for submission.

Example

Live example 
<form oninput="r.value = (+a.value) + (+b.value)">
  <input id="a" type="number" value="2" style="width:60px;"> +
  <input id="b" type="number" value="3" style="width:60px;"> =
  <output id="r" for="a b">5</output>
</form>

Best practices

  • Use <output> for computed results so they are announced as results, not generic text.
  • List the contributing controls in the for attribute to document the relationship.
  • Rely on its built-in live-region behavior to announce updates — no extra aria-live needed.
  • Give it or its surroundings a clear label so the meaning of the value is obvious.

Frequently asked questions

What is the output element for?
To display the result of a calculation or user action — a total, a slider value, a computed figure — with the correct semantics.
Does the output element announce changes to screen readers?
Yes. It is an ARIA live region by default, so updates to its text are announced automatically.
How does the for attribute work on output?
It lists the ids of the controls that contribute to the result, documenting which inputs feed the output.
What is the difference between output and span?
A <span> is generic and silent; <output> conveys that the text is a result and announces updates to assistive technology.
option p