Description

The HTML element <output> is used to define a region that displays a result of some calculation.

The result can be text output from a calculation performed by a client-side JavaScript.

The below table summarizes its usage.

Usage Details
Placement It is displayed as an Inline element.
Contents It can contain Inline elements and text.
Tags Both the opening and closing tags are required.
Versions HTML 5

Syntax

Here is the basic syntax of the <output> element.

<output>...</output>

Examples

Run this on IDE

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example - HTML Element output</title>
</head>
<body>
    <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>
</body>
</html>

Attributes

The following table shows the list of supported and unsupported attributes for the <output> element.

Attribute Type Details
Element-Specific Attributes The tag <output> has some element-specific attributes listed in the below table.
Global Attributes Like all other HTML tags, the tag <output> supports the HTML Global Attributes.
Event Attributes The tag <output> also supports the HTML Event Attributes.

Here is a list of attributes that are specific to the <output> element.

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

Browser Compatibility

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

  • Google Chrome 10+
  • Internet Explorer or Edge x
  • Firefox 4+
  • Apple Safari 5.1+
  • Opera 11+

Related Links