Over a million developers have joined DZone.

Tutorial: Using the HTML5 output Element

DZone's Guide to

Tutorial: Using the HTML5 output Element

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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.

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.


Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}