New in HTML5.

<output> HTML Tag

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

Sharing is caring!

Element of
What On Earth Is Semantic Markup? (And Why Should You Learn To Write It)
What does <output> HTML Tag do?
The <output> element is used to display the result of a calculation. The <output> element is typically used in conjunction with a parent <form> and sibling <input> elements to perform a calculation. The actual calculation is typically completed using JavaScript.
Display
inline
Usage
semantic

Calculating in HTML 5

The <output> element is new in HTML 5. This semantic tag gives us an easy way to display the results of a calculation.

Of course, a fixed calculation can be written in plain text. But <output> is designed for complex calculations that are performed by the user or a script, such as the results of an exchange rate conversion, or a price quotation. It can be used inside a <form>.

Writing Calculations

In order to leverage <output>, you’ll need some basic knowledge of JavaScript.

Specify an <input> type of number to tell the form that the user is entering integers. If the user enters something other than an integer, <output> form will return NaN (not a number). Other <input> types are valid, including range.

Right now, <output> is not supported universally.

Claire is seasoned technical writer, editor, and HTML enthusiast. She writes for HTML.com and runs a content agency, Red Robot Media.

Browser Support for output

10410Not supported.5.111