Thoughts on Video and Audio Microformats

by Charles Iliya Krempeaux, published on Mon Oct 17th, 2005

As I've talked about before, Microformats are a clever and simple way of marking up your HTML so that both humans and machines can understand what you are saying.

(If you are interested, the last thing I wrote on Microformats was: Microformats Proposal for Reputation and Trust Metrics. That article doesn't really have anything to do with this article other than it's also about Microformats too. But if you're into Microformats you may find it a good read. But anyways,....)

One of the areas that has been lacking a Microformat (as far as I know) is the world of multimedia. (Although people have been putting thought into it.) This article deals with just one aspect of multimedia Microformats: linking. This article doesn't really try to invent any new Microformats, but encourages people to use existing HTML elements and attributes to communicate and specify semantics and metadata useful for linking to video and audio media.

One of the things we sometimes do when dealing with media (such as audio and video files or streams) is link to them. For example, here's some sample HTML markup doing just that:

    Go and <a href="/movie/grad2005">watch this</a>.

However, this doesn't give us much semantics or metadata. What type of file (or stream) is at the end of that URL (specified in the href attribute). (Is it an MPEG movie‽ An AVI movie‽ Or an Ogg Theora movie‽)

(Note, the URL we have does NOT have a file name extension like .mpeg, .avi, or .ogg. Those from the Windows or DOS world are probably accustomed to them and may think that you need them to tell you the type of file [or stream] you are dealing with. However, that is NOT how it works on the Web. On the Web, a file's [or stream's] type is NOT specified by an extension; it is specified by with its content type. On the Web, extensions mean nothing; it's the content type that matters. But I'm digressing. Getting back to it....)

Also, what should we "call" that movie? (The words that the link is bound to is "watch this"; so should that be the title of the movie‽)

The HTML Anchor Element

The HTML anchor element -- the <a> tag -- has attributes (that people often don't use) that allows for attaching certain kinds of metadata. For example, we have the title, type, and hreflang attributes available to us. Here's the same example as before but with a title and type attribute:

    Go and <a href="/movie/grad2005" title="Joe Blow's Grad 2005" type="video/mpeg">watch this</a>.
With the addition of just these 2 attributes we know that the movie is an MPEG movie. And that the title of the movie is "Joe Blow's Grad 2005".

Using these (and other) attributes can be very useful and be very helpful in communicating semantics and metadata, as I'll illustrate later in this document. But for now, let's go over what title, type, and hreflang mean (before we get into how these attributes and other things work as a multimedia Microformat):


The hreflang attribute tells you what language the "thing" at the end of the URL in the href attribute is in. For example consider:

    <a href="" hreflang="fr-CA">Read it</a>
This tells us that the "thing" at is in Canadian French. (fr-CA stands for Canadian French.)


The title attribute lets us,... well,... provide a title. It lets us provide a human-readable name for the "thing" at the end of the URL in the href attribute. It's probably easier to see why this is useful with an example: First, consider this bit of code:

    Go and read <a href="">Wikipedia</a>.
The word we bind the link to is "Wikipedia". Which would be a good "title" for it. However, consider this example:
    You can see my pictures <a href="">here</a>.
In this case the word that the link is bound to is "here". Which would be a terrible "title" for it. The title attribute lets us fix this type of thing (when the word we bind the link with would make a poor "title"). Here's is the same code with the title attribute specified:
    You can see my pictures <a title="Joe Blow's Pics" href="">here</a>.


The value of the type attribute is a content type. (And note, I said content type and NOT MIME type! That's important. For example both "application/x-bittorrent" and "application/x-bittorrent;disposition-type:moving-image" have the same MIME type; but are different content types.)

You might be thinking, what good is this‽ What can we use this for‽

  1. With the type attribute, we'll be able to tell which anchors link to audio and video files and streams based on the content type used (in the type attribute).
  2. The title attribute lets us specifiy a good name for the "thing" that is being linked to; this is important when the word we use for the link might not be a good name; or when we aren't even using a word for the link.

Media Alternatives

Often we want to provide media in different varieties. For example, we may want to provide the same movie in different file formats. We may want to provide the same movie in different languages. Or we may want to provide the same movie in in different bit rates, frame rates, or ever screen sizes. Or any combination of these. (This isn't an exhaustive list.)

With the HTML anchor element, we can also do this type of thing. We can list a set of alternatives for the same thing. (Like you can do in SMIL and Media RSS.) (For example, we could provide the same video in MPEG, AVI and Ogg Theora formats.) The HTML anchor element has a urn attribute (which as far as I know, no one ever really used). We can use this to bind anchors -- <a> tags -- together; to show that they link to the same thing. Here's an example:

        You can get the video of my grad in a few different formats:

        <a href="grad2005.mpeg"
           title="Joe Blow's Grad 2005"
        <a href="grad2005.avi"
           title="Joe Blow's Grad 2005"

        <a href="grad2005.ogg"
           title="Joe Blow's Grad 2005"
           urn="urn:uuid:0a8d2f83-d5d2-44e7-bde9-319aaadc219c">Ogg Theora</a>.

        If you have BitTorrent, you can also get it
        <a href="grad2005.torrent"
           title="Joe Blow's Grad 2005"
           urn="urn:uuid:0a8d2f83-d5d2-44e7-bde9-319aaadc219c">here</a> too.

        Also, remember to go visit my <a href="/pics/">pics</a>.
In this example, the urn attribute binds 4 links together saying they are really the same thing. (Yeah I know that the urn attribute [for the anchor element] has been deprecated [because no one used it]. But I think we now have an excellent use for it.)

(People who read my Ideas on Merging Media RSS with the RSS Enclosure Element article may notice some similar patterns here to what I wrote there.)


So here's what you should do:

  1. If you link to a video or audio file, use the type attribute to mark it as being a video or audio (giving it the appropriate content type).
  2. If the words you bind the link to don't make a good title, or you bind the link to an image, use the title attribute.
  3. If you provide alternatives of the same media then use the urn attribute to bind the anchors together.

More Media Metadata

Some are probably thinking right now that we need to be able to specify more metadata (than what title, type and hreflang allow). An I'd say they are right. This article doesn't get into that. However I am going to make a suggestion though.

Given that we want to do things the Microformat-way of making things designed for human first, and machines second we could use the urn attribute to bind this extra metadata to the links. Maybe using some new attributes. Possibly via an XML namespace. (Being able to use XML namespaces is, after all, one of the advantages of XHTML over HTML.) Here's some pseudocode with some fictitious attributes that suggests what we could do:

    <div xmlns:urn="..." xmlns:x="...">
        Download: <a href="/show/123" urn="23d5c894-10a4-4dbc-bbe2-22a298b48c0e">[Link]</a>

        <dl class="xoxo" urn:about="23d5c894-10a4-4dbc-bbe2-22a298b48c0e">

            <dt urn:rev="framerate">frame rate</dt>
                <dd x:scheme="urn:iso:some-standard">24 fps</dd>

            <dt urn:rev="bitrate">bit rate</dt>
                <dd x:scheme="urn:xyz:abc" x:value="128 kilo-bits-per-second">128 Kb/s</dd>


Read more about: , , , .


No known comments. (There may be some out there though.)

New Comments

Want to write a comment to this post on your own blog? Then use the HTML code below to link to this article....

Or better yet, use the quote-o-matic below by "selecting" the part of the text (in the article) that you want to quote, and then use the HTML code that will get generated below to link to this article....