HTML5 <output> Tag

Topic: HTML5 Tags Reference« Prev|Next »

Description

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

Syntax

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>
  • </form>

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>.

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.