HTML5 includes a host of new input elements, such as the output tag. Output tag when used in conjunction with the “oninput” event listener, creates simple or complex Web page calculators, giving the user instant results. The output tag allows you to build forms using semantic markup, since the element is specifically designed for displaying calculation results.

Sue Smith in this tutorial, creates a simple Web page calculator to demonstrate using the output element. Many of the new input elements are not well supported, but the output element is supported in all current major browsers except Internet Explorer. The author also focuses on using the “oninput” event attribute, which is supported in all recent versions of the main browsers.

Like many HTML5 developments, the output element does not introduce particularly new functionality to your pages, but alters the ways in which you can achieve certain results. By choosing a semantic element, your pages will have a level of meaning built into their structures.

To read the full tutorial visit: http://www.developerdrive.com/2012/06/creating-a-web-page-calculator-using-the-html5-output-element/