The output Tag
The output tag is a box designed to display a calculated result. A range slider showing its current value, a shopping cart that adds up as you change quantities, a converter that recalculates while you type: all of these write their result into an output element.
A span could hold the same text, but output carries meaning. Its for attribute lists the ids of the inputs the result depends on, and screen readers treat it as a live region, announcing updates without the user asking. That accessibility behavior is the real reason the tag exists.
It works in every modern browser. The classic setup needs no script tag at all: inline event handlers on the inputs assign the result straight into the output. For bigger forms, JavaScript sets output.value the same way. The element is meant for results, not for arbitrary page text.
A live calculator
The simplest setup uses oninput on the controls and assigns the computed text to the output inside the handler. No script tag needed. The page updates the result as the slider moves or the numbers change, and the output announces each change to assistive tools.
<input type="range" id="vol" oninput="result.value = vol.value">
<output id="result" for="vol">50</output>The for attribute
The for attribute lists the ids of the inputs the output depends on, separated by spaces. Browsers do not enforce it, but it documents the connection for anyone reading your HTML, and assistive tools can use it to understand the relationship.
<input id="a" type="number" oninput="sum.value = (+a.value) + (+b.value)">
<input id="b" type="number" oninput="sum.value = (+a.value) + (+b.value)">
<output id="sum" for="a b">0</output>Syntax
<output name="total">0</output><output> Speaks Updates Aloud and Its value Never Submits
Two well-hidden facts: 1) <output> has implicit ARIA role=status (live region) - when JS changes its textContent, screen readers auto-announce '75' without aria-live. Beginners replicate this with noisy <span> and miss the free announcement. 2) Despite having name attribute, <output> value is NOT submitted with the form (spec says only for forms API). You must copy it to a hidden input if server needs it. Also parseInt("") => NaN, use valueAsNumber.
<form oninput="out.value = parseInt(a.value)+parseInt(b.value)"><input id="a" type="number"><output name="out" for="a b"></output></form>
// out.value not sent; add <input type="hidden" name="total">Good to know
- Output is for results of computations, not arbitrary text.
- Screen readers announce its changes automatically.
- Use for to document which inputs feed the result.
- Inline oninput is enough for small calculators.