HTML <output> Tag

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <output> HTML tag is used to represent the result of a calculation or the outcome of a user action within a web page. It is typically associated with form elements and is designed to display dynamically generated values, such as calculations, conversions, or live feedback based on user input.

The <output> element provides semantic meaning, helping both browsers and assistive technologies understand that the displayed content is a computed result rather than static text. This makes it especially useful for accessibility, as screen readers can identify the output as a result of user interaction.

Common use cases for the <output> tag include displaying:

The result of a mathematical calculation
Values updated through JavaScript
Feedback from form input changes
Live data such as totals, averages, or measurements

Although <output> is often used inside a <form> element, it can also be used independently anywhere in the document where calculated or dynamic content needs to be shown.

The content inside an <output> element can be updated dynamically using JavaScript, allowing real-time updates without refreshing the page. This makes it ideal for interactive interfaces, calculators, and responsive UI components.

From a semantic perspective, using <output> improves code readability and structure by clearly identifying content that represents a result rather than descriptive or instructional text. This helps maintain clean, meaningful HTML and improves accessibility for users relying on assistive technologies.

Properties

Permitted Parents: Any element that accepts phrasing content
Content: Inline and text
Start/End Tags: Start tag: required, End tag: required

Example

HTML

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0

  <input type="range" id="a" value="50">100

  + <input type="number" id="b" value="50">

  = <output name="x" for="a b"></output>

</form>

Result

Editor

Attributes

for: Specifies the relationship between the result of the calculation, and the elements used in the calculation.
form: Associates the output with a form.
name: Specifies the name of this element.

Global Attributes

The <output> tag also supports the Global Attributes in HTML5

Event Attributes

The <output> tag also supports the Event Attributes in HTML5

Browser Support

The following information will show you the current browser support for the HTML <output> tag. Hover over a browser icon to see the version that first introduced support for this HTML tag.