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>.
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.
Luckily, there’s a solution.
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.
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!