Tutorial: Using the HTML5 output Element

From Richard Clark on the superb html5doctor.com comes this new treatment of the HTML5 <output> element, one of the new semantic elements designed to make webpage data more readable to machines.

Why must machines know that one number is the output of a calculation, and another isn't? Because, in many cases, while humans have easy ways of designating calculation output ('what comes after the equals sign'), those same designators ('=', for instance) already mean something else to the computer (in most programming languages). <output> lets your code recognize what a human would consider 'calculation output' -- another step toward a more meaningful, human-centered web experience.

Calculations involve inputs too, though; and form events for input have changed over time (from onforminput to oninput) -- so using <output> effectively, within a form that requests user input, is a little more complicated than just writing '<output>99.54</output>'. (If you're not super-comfortable with HTML event handlers, this reference might help.)

To smooth out the coding potholes, Richard's tutorial steps through the whole calculator-creation process, including more advanced variations (one involving HTML5's range input type), with links to polyfills as necessary.

As Richard summarizes:

You probably won’t find yourself using the <output> element all the time, but it’s useful in a whole host of situations. Calculating values on financial sites spring to mind, or outputting the current mouse position, or perhaps the goal difference in a table of sports teams. 

Check out the full article here.