The New Sensory Elements Coming to HTML5

The web is primarily a visual medium with a little audio here and there. HTML5 supports the video and audio tags but our other senses have been shamefully neglected. Until now.

The W3C will shortly announce three new HTML5 elements which support alternative sensory interfaces:

  • <texture> for touch
  • <aroma> for smell, and
  • <flavor> for taste

HTML Usage

The new elements will normally be used as wrappers for other items. For example, you might want to apply a fresh grass odor to an image of a field, e.g.


<aroma fresh="50%" sweet="20%" warm="35%">
	<img src="myfield.jpg" alt="field" />
</aroma>

The categorization attributes will vary depending on the tag, e.g.

  • texture: smoothness, firmness, flaccidity, temperature
  • aroma: sweet, pungent, acrid, fragrant, warm, dry, sour
  • flavor: sweetness, sourness, saltiness

The volume and muted attributes are also supported to indicate the strength of odors and flavors.

However, unless you’re a chemical expert, defining these attributes isn’t easy. For that reason, all tags can use the src and type attributes to point to sensory definition files which contain one or more textures, aromas or flavors, e.g.


<aroma src="cheese.odor" type="stilton">
	<img src="stilton.jpg" alt="stilton cheese" />
</aroma>

Vendors will provide several pre-defined sensory packs within their browsers. However, Chrome’s representation of Roquefort is likely to differ from IE’s; it may be several years before we reach agreed sensory standards. Fortunately, it will be possible to develop your own definition files if compatibility issues arise.

CSS Properties

Textures, odors and flavors can also be applied from CSS. For example, our online cheese shop could link to a Stinking Bishop page:


<a id="stinking" href="stinking-bishop.html">
	<img src="stinking-bishop.jpg" alt="stinking bishop cheese" />
</a>

CSS could apply an appropriate aroma, flavor and texture as the user hovers over or focuses on the link. Sensory definition files or classifications can be used:


a#stinking:hover, a#stinking:focus {
	aroma: url("cheese.odor") stinkingbishop 50%; /* pack, type, volume */
	flavor: url("cheese.taste") stinkingbishop 98%; /* pack, type, volume */
	texture: 25% 30% 20; /* smoothness, hardness, temperature (degrees C) */
}

JavaScript APIs

JavaScript APIs will be available for the new sensory elements. For example, you could mute or change the volume (strength) of a sensory tag, e.g.


var cheese = document.getElementById("stinking");
var c = 0;
Pungent();

function Pungent() {
	cheese.aroma.volume = c + "%";
	c += 5;
	if (c < 100) setTimeout(arguments.callee, 500);
}

This example increases the cheese odor over time. Note that aroma-generating devices are likely to have slower response times than screen output: thorough testing will be required to ensure aromas and flavors don’t clash.

Hardware Support

lick-able mouse wheel

Hardware devices which support these sense elements will be introduced during the next year. One of the first is a multi-sensory mouse by Ollofipra, the Scandinavian PC manufacturer. It uses a patented rubber mesh to change shape, texture and temperature. It also emits a range of smells and the central wheel generates different flavors. The company hopes to add the technology to touch-sensitive monitors so they become lick-able.

Please note that the W3C specifications for the sensory elements are at an early daft stage and implementation changes are inevitable. However, the future looks promising and the tags have potential to revolutionize web interfaces. You should certainly discuss it with your colleagues today.

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • MM

    Have a nice April-fools day yourself too. ;)

  • http://www.rad.as Heh not really

    Nearly fell for it, not really

  • http://www.free-apps-android.com daniel

    Same to you MM :))

  • LarryO’Brien

    Might I suggest a new element:
    for days like this
    U got me going for a while there with the cheese

  • Helen Natasha Moore

    I don’t think Mike Rapp could have put it better.

  • Cristian

    One of the best April’s Foll jokes in YEARS!!! :D

  • http://pixopoint.com/ Ryan Hellyer

    Rumour has it that the iSmell device will be announced at the next Apple keynote.

    • Helen Natasha Moore

      Now that’s funny :-)

  • magic_al

    Nice one. I was telling my girlfriend about this new element when I realized the date :)

  • ralph.m

    Typo:
    Should be for taste rather than for taste.

    Just as with HTML5 offline storage, there are big issues with these new elements—not so much security, by hygiene. Image public computers where people are licking the same hardware device. The implications are terrifying, especially in this age of global pandemics.

  • http://www.bootleweb.com CB

    Does for taste imply reciprocation, i.e. your round next?

  • http://www.bootleweb.com CB

    Does “favor” for taste imply reciprocation, i.e. your round next?

    • http://www.optimalworks.net/ Craig Buckler

      Whoops! All fixed.

  • http://www.nandida.com nandida

    Ohi craig area you kidding me? :)

  • ralph.m

    Browsers that emit smell, hey? Are you saying this is a new thing? As usual, Microsoft is well ahead of the game. Their browsers, email clients and even OSes have been emitting foul odors for many years.

    • USPaperchaser

      Tell that to their 95% User rate? What is Apples and Linuxes again? BTW, your ‘joke’ was lame.

    • TehYoyo

      Excellent point you have there! :D

  • Matthew P

    Congratulations, you completely got me; I totally forgot the date and was about to thoroughly lament these tag additions in the comments when I saw others mention april fools… Might have embarrassed myself thoroughly if I had happened to read this article before any comments were left.

    I was only really skeptical of the flavor tag when reading. The thought of people licking their mobile devices seemed quite absurd, though there has been talk about smell and especially texture being used in UI technology for years so it seemed possible that the W3C was simply rounding out specifications for all 5 senses just to be thorough and without paying any thought to their practical use cases.

    • Helen Natasha Moore

      Yeah, it’s a shame people spoil it immediately. Maybe don’t publish spoiler comments next year, Craig?

      • http://www.optimalworks.net/ Craig Buckler

        Perhaps, although there are plenty of tweeters and screen-scraping sites which took it seriously.

        Didn’t they spot the “Ollofipra” anagram?!

      • Stevie D

        Oh come on, no-one who’s smart enough to be reading Sitepoint would fall for such an obvious joke … would they?!

        (Apart from the spammers who seem to have believed every word of it)

  • Kise S.

    i was about to fall for it until i read the date:@

  • SMW

    Couldn’t decide whether this was a typo or a subtle April Fools hint…
    “Please note that the W3C specifications for the sensory elements are at an early *daft* stage”

  • Jim

    “Please note that the W3C specifications for the sensory elements are at an early daft stage…”
    I’m not sure if the “daft” was a typo or if it was intended, but it made me laugh anyway.

    • http://www.optimalworks.net/ Craig Buckler

      It was intended. Well done for spotting it!

  • http://www.getsocialapps.com Zick

    HTML5 includes;

    New Elements
    New Attributes
    Full CSS3 Support
    Video and Audio
    2D/3D Graphics
    Local Storage
    Local SQL Database
    Web Applications

  • http://www.getsocialapps.com Zick

    We do develop full scale websites in HTML5 but this is something very new to me..
    I don’t believe this, as how a device would taste and smell something but really looking forwrd to it..

  • http://www.aud99.com My Magnificent Web Page

    thanks for shearing

    • http://www.optimalworks.net/ Craig Buckler

      yor welcume

  • http://www.aud99.com web $99

    Thanks for sharing this wonderful article. It helped me gain a lot of info.