<output> for semantic calculations

The <output> tag is the preferred method of communicating the result of a calculation or user action. It's the perfect tag to communicate a shopping cart total, display form validation results, or deliver a player's score in a web-based game. Let's take a look at a simple example:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  <h2>Widget price calculator</h2>
  <input type="number" id="qty" value="50">
  $<input type="number" id="price" value="5" disabled>
  <output name="x" for="qty price"></output>

View a demo here

What's neat is that the for attribute can reference multiple inputs, semantically noting that the inputs are linked. Additionally, the form attribute can be used to reference a form element outside of the <output> tag's parent form. This is useful for displaying the result of a calculation in a different part of the page. For example, imagine a complex calculator with a sidebar that displays the result (like a shopping cart).

Previously I would have used input[disabled] or an element undiscernable from on-page copy. Since I've started using this tag, I've noticed it's a little easier to read my code and identify where something will change in the UI.

Read more about the <output> tag on MDN.