DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > Tutorial: Using the HTML5 output Element

Tutorial: Using the HTML5 output Element

John Esposito user avatar by
John Esposito
·
Dec. 21, 11 · Web Dev Zone · Interview
Like (0)
Save
Tweet
4.63K Views

Join the DZone community and get the full member experience.

Join For Free

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.

HTML Element

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Which Backend Frameworks Are Impacting Web App Development Immensely?
  • How to Submit a Post to DZone
  • Hard Things in Computer Science
  • DZone's Article Submission Guidelines

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo