Html 5 Spring cleaning

HTML5 Logo by World Wide Web Consortium

I have done some spring cleaning on this blog, mostly simplifying stuff by using two nice html5 features: video and ruby. The first fixes a long standing mess in html, the lack of of standard way of putting video clips into web pages. There was a large debate about the codec to use, with Microsoft and Apple pushing for h264, Google pushing for WebM, and Firefox pushing for the OGG format. The dust has not settled on this issue, most video on this site are in h264 format simply because this is the format my mobile phone produced, and the format most mobile phones can render. While the current solution is not perfect, before I had to use a combination of embed and object tags, which was much worse.

I took advantage of the cleanup to fix a few links that were still pointing to the old site’s address, in one case there were still links to the address, from seven years ago. I also have been playing around with microdata those days, so I added the relevant meta-data to the video, I doubt this will have much of an impact, but I like the idea of embedding meta-data into the html, microdata is not a part of html5, by the way.


The ruby tags are more specialised, and bear no relationship with the ruby programming language. The tag is surprisingly old: it was first suggested in 1996, and implemented as an extension by Internet Explorer 5, the fact that it took 15 years to standardise that tag is quite depressing. Ruby tags allows the writer to add phonetic annotations to some html text. The classical use-case is adding furigana to japanese kanji, but it can basically be used for any kind of annotation, like for instance IPA phonetics. There are basically three tags: ruby which acts as a container, rt which contains the annotation, and rp which wraps the fallback code when ruby is not supported, that tag typically contains parenthesises. The source for the text in the box will look like this: <ruby>Zürich<rp>(</rp><rt>ˈtsyːrɪç</rt><rp>)</rp></ruby>

I have not back-converted all my existing content, the css tricks work, and it would be a lot of work, but I will use the standard tags from now-on.

2 thoughts on “Html 5 Spring cleaning”

  1. I don’t really get it… what’s the point of having a dedicated tag that says “put this text over that one” and is obviously not supported by every browser, when CSS can do that just fine and is widely supported ? Is that tag used for anything besides controlling the layout of the text ?

  2. That tag is designed to be used by tools that extract the text, like text-to-speech systems, braille readers, but also crawlers, like the ones used by search engines. If you just do some layout trick, these tools will think that there are two texts, when in fact there is only one. Also this tag leaves the option to the browser to render the data differently, for instance using hovers, or pop-ups.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: