Please note, this is a STATIC archive of website from 10 Sep 2022, does not collect or store any user information, there is no "phishing" involved.

HTML5 <output> Tag

Topic: HTML5 Tags ReferencePrev|Next


The <output> element represents the result of a calculation. Typically this element defines a region that will be used to display text output from some calculation that is usually performed by a client-side script (usually JavaScript).

The following table summarizes the usages context and the version history of this tag.

Placement: Inline
Content: Inline and text
Start/End Tag: Start tag: required, End tag: required
Version: New in HTML5


The basic syntax of the <output> tag is given with:

HTML / XHTML: <output> ... </output>

The example below shows the <output> tag in action.

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="range" id="a" value="50"> +
    <input type="number" id="b" value="100"> =
    <output name="result" for="a b"></output>

Tag-Specific Attributes

The following table shows the attributes that are specific to the <output> tag.

Attribute Value Description
for element-id Indicating the relationship between the result of the calculation and the elements contributed input values to this calculation. The value of this attribute can be a list of IDs of other elements.
form form-id Specifies the form element that this element is associated with.
name name Specifies name of the element.

Global Attributes

Like all other HTML tags, the <output> tag supports the global attributes in HTML5.

Event Attributes

The <output> tag also supports the event attributes in HTML5.

Browser Compatibility

The <output> tag is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 4+
  • Google Chrome 10+
  • Internet Explorer ×
  • Apple Safari 5.1+
  • Opera 11+

Further Reading

See tutorial on: HTML Forms.

Related tags: <progress>.

Bootstrap UI Design Templates