HTML5 <output> Tag

The HTML <output> tag is used to represent the result of a calculation or user action. It was introduced in HTML5.

The only content permitted inside this element is phrasing content. Both the starting and ending tag are mandatory for this element. The parent of the <output> tag can be any element that accepts phrasing content.

The following style is applied to this element by default:

output {
  display: inline;
}

output {
  unicode-bidi: -webkit-isolate;
}

Here is an example of using this tag:

<form onsubmit="return false" oninput="o.value = a.valueAsNumber + 25">
  <input name="a" type="number" step="any"> + 25 =
  <output name="o"></output>
</form>

Attributes

for

A list of IDs of other elements, indicating that those elements contributed input values to (or otherwise affected) the calculation.

form

The form element that this element is associated with (its “form owner”). The value of the attribute must be an ID of a form element in the same document. If this attribute is not specified, the output element must be a descendant of a form element. This attribute enables you to place output elements anywhere within a document, not just as descendants of their form elements.

name

The name of the element.

Examples

See the Pen HTML output Tag by Tutorialio (@tutorialio) on CodePen.

Further Reading

  1. Read more about the HTML <output> element on MDN.
  2. You can also read the HTML <output> tag reference on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top