HTML <output> Tag

The <output> tag is a container that presents the results of a calculation or a user action. It can also display the result of a client-side action (i.e. JavaScript).




An <output> element that displays the results of a calculation.

The result of 8 * 8 = 64.

<p>The result of 8 * 8 = <output name="result">64</output>.</p>

Using <output>

The <output> tag displays the result of a calculation or conclusion of a user action.

This element may also display client-side JavaScript results.

More Examples

An <output> element displaying the value of the range <input> element.
Move the slider and see the <output> values change.

The value is 25
<form oninput="result.value = slider.value">
  <input type="range" id="slider" value="25"> 
  <br /><br />
  The value is <output name="result" for="slider">25</output>

Code Explation:

oninput - specifies the function to execute when any input element inside the form changes

The slider value is assigned to the <output> element when changes are made.

Attributes for <output>

This table lists the <output> tag attributes.

Attribute Value Description
for element-id Relationship between elements used in calculation and its result
form form-id Id of the form where the ouput element belongs to
name name Output element name
id    identifier Defines a unique identifier for the output.
class    classnames Sets one or more CSS classes to be applied to the output.
style    CSS-styles Sets the style for the output.

For additional global attributes see our global attributes list.

Code Tags

The <output> tag is part of a group of tags that create coding (programming) related features on web pages. This group is referred to as the Code tag group. Together, these tags allow you to create code-friendly pages.

A list of code tags.

Element Description
<pre> Displays pre-formatted text in fixed-width font -- usually computer code
<code> An element that is used to display computer code
<samp> Displays sample output from a coumputer code
<output> Displays output results of a calculation
<var> Defines its content as a variable
<!--...--> Marks text as comments in the source code. Not visible to users

Browser support

Here is when <output> support started for each browser:

10.0 Mar 2011
4.0 Mar 2011
13.0 Nov 2015
11.0 Dec 2010
5.1 Oct 2011

You may also like