HTML5′s missing tag: sarcasm

I attended Barcamp Shanghai (Twitter: #barcampsh) at the weekend. It was an entertaining day with talks and demos on a variety of geeky topics. Here's a reproduction of my talk about HTML5's missing tag: <sarcasm>.



Let's review the 3 tiers used in modern frontend web development. First, HTML is used to mark up semantic content. It provides meaning and structure to your content. Then CSS is used for presentation. It determines how your content appears: the colors, fonts and positioning. Finally, Javascript is layered on top for behaviour: allowing the user to interact and modify the content in interesting ways.

You've probably heard a lot about HTML5 recently. A lot of the talk has been around the new <video> tag. People are excited because for the first time, it will be possible to play video natively in the browser without plugins like Flash Player. Of course there's still a lot of discussion about which codecs will be supported. WebM? h264? Ogg Theora?

But there's so much more to HTML5 than the <video> tag.

Many other  new tags have been introduced which can add extra semantic structure to your HTML pages.  For example, <section> can be used to mark up distinct sections of your document, <nav> contains primary navigation, <aside> can be used for content like sidebars and pullquotes, <time> can be used to mark up dates and times so they can be easily parsed by computers.

Of course you were always able to use <div>s and <span>s to mark up your content, but the new elements promote more semantic, cleaner code with less need for cryptic id and class names.

Here's a sample HTML5 page.

It should look pretty familiar if you've worked with HTML5 before. Notice the new short DOCTYPE. We still have the familar <head> and <body> tags. We're using some of the new elements in the body. Let's dive deeper and take a look at another example.

This is a completely valid HTML5 snippet.

Yet, I can't help feeling that something is missing. There's something I can't quite capture using this markup. Something that's very difficult to express using existing HTML.

Of course, the problem is that Zapata's isn't a very classy bar. But how can I express that semantic meaning using HTML? I could try using <em> tags.

In most browsers, that will make the text italic. But that doesn't seem right, it's not clear why I'm emphasising the text. Perhaps it's because I really do like Zapata's. Now, thanks to HTML5, we have a solution. I simply mark up the text using <sarcasm> tags.

This is really great! Now it's explicit that the marked up text is sarcastic. And, because we're using semantic HTML, we can use CSS to easily style the presentation of our sarcasm. For example, here's a quick stylesheet which will make any sarcastic text italic, red, and a large font size.

And this really works! Here an example of the HTML5 snippet rendered in Google Chrome using this stylesheet. Now it's really easy to see that I'm being sarcastic.

This is just the beginning. We can take advantage of new features in CSS, like CSS3 Speech stylesheets to provide greater accessibility for users with visual impairments. A blind user using a compatible screen reader can be served a stylesheet like this:

Now you can ensure that any text marked up as <sarcasm> will be spoken with a particular voice, stressed, and with a subtle sound effect played afterwards just in case.

But there's a problem. And the problem is Internet Explorer.

As you can see, when I render the previous example using IE, no styling is applied. In fact, IE doesn't recognise the <sarcasm> tag, or any of the new HTML5 tags. They are not created as DOM elements, and can't be targeted by CSS or Javascript.

Luckily, there's a solution.

If we use Javascript to create one dummy <sarcasm> node in the document, that's enough to trick IE into recognising <sarcasm>. This works in IE8, IE7 and even IE6. Let's see how it works:

We're using conditional comments to hide this from browsers other than IE, then creating one dummy sarcasm node. Now, if we load a page containing <sarcasm> in IE, our styling is applied!

Now we've nailed cross-browser support, the opportunities are almost endless. For example, it takes only one line of code using jQuery and Greasemonkey to automatically replace any sarcastic comments with a video of Rick Astley.

And just think how useful it will be once other sites start using <sarcasm>. It will make online communication far simpler. We'll be able to tell easily when politicians aren't telling the truth.

So, I encourage you to go out and spread the word. Start implementing <sarcasm> on your site. Lobby the W3C, the web's governing body, to make <sarcasm> part of the official HTML5 spec.

Know that we are not alone. Gianni Chiappetta is someone else who appreciates the importance of <sarcasm>. He sent a tweet to the W3C proposing <sarcasm>:

If you'd like to talk more seriously about what HTML5 web applications can do for you and your business, do get in touch with ReignDesign!

8 Comments

  1. Henri Bergius | June 17th, 2013

    Thankfully the HTML5 Custom Elements spec lets you define whatever tags you need ;-)

    http://www.polymer-project.org/platform/custom-elements.html

  2. Davezilla | June 20th, 2013

    Yes, yes, 1000 times, yes.

  3. J Hogue | June 20th, 2013

    Personally, I appreciate Sartalics (https://twitter.com/Sartalics). Your tags plus some CSS3 transform: skew(-12°) could make this group of visual sarcastic expressions an easy reality.

  4. Louis St-Amour | June 20th, 2013

    An FYI for those making up tags, make sure you use a hyphen in the tag name (because HTML will never use hyphens in official tags, presumably).

    So instead of , you could have or or simply plain ;-)

  5. Mathew Porter | June 22nd, 2013

    ha ha, joking aside, it is abit of a pain adding in little javascripts for older versions of IE, but if you analyse the user base for a project enough you can see the limitations of what can be implemented / should be implemented. Got to love some nice semantic markup.

  6. Pingback: We Need A Sarcasm Tag! | Stolen Cookie

  7. Pingback: Barcamp Shanghai 2011! | Mark Englehart Evans

Post a Comment