Compact HTML: A mark-up language for micro-blogging

07 Nov 2008

When sending small comments via services such as Twitter, it's pretty straightforward to add links to other documents. The general pattern is to abbreviate the link using an online service, and then paste the shortened link into your post. Software that displays your posts can then replace any string that begins with http: with a real link.

However, there are many occasions where a link is just not good enough. Sometimes you'd like to embed an image, or even a video. But if we start trying to add HTML mark-up, we'll pretty soon hit the character limit imposed by micro-blogging platforms.

Enter compact HTML, or CHTML...for short.

Compact HTML

The simple idea of CHTML is that we use keywords to indicate the mark-up. For example, to add an image you would ordinarily write:

<img src="" />  

Which would give you this:

Of course, we can shorten the fragment by using a URL service:

<img src="" />  

But we can go further if we make the mark-up compact:


That's a pretty efficient way to transmit an image in a post.


You could ask how this relates to HTML?

The idea is that all elements and attributes from HTML can be used in a generic way. So the full version of the image we just saw, would actually be:


We could also write:

img(src=,alt=A picture of Stooky Bill)  

Each element would have a 'default attribute' that anonymous values would set. In the case of img it would obviously be @src, so


is equivalent to:


Other tokens

Since all we're really doing is looking for patterns of the form:


then we needn't limit ourselves to HTML in our compact mark-up.

For example, we could express a YouTube video like this:


An example

To see this in action, take a look at the [Compact HTML Twitter sample](http :// from the Ubiquity RDFa library. Note how two tweets from Stooky Bill are shown, one containing an image, and one containing a video. As you can see from Stooky's Twitter page, the actual tweets contain simple Compact HTML.