Tutorial: Using the HTML5 output Element
Join the DZone community and get the full member experience.
Join For FreeFrom 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.
Opinions expressed by DZone contributors are their own.
Comments