Over a million developers have joined DZone.

Tutorial: Using the HTML5 output Element

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.


The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}