outbreak

Me

My name is Marko Mrdjenovič. I’m a web developer, manager and an entrepreneur from Ljubljana, Slovenia.

Bio

I like solving problems. I do that by writing code, managing projects and people. I like creating good experiences. And going to conferences.

Availability

I work full time on Klevio so I'm currently not available for freelance work (UX, frontend, backend).

Elsewhere:
LinkedIn
Twitter
Facebook
Quora
Flickr

Archives

The semantics of <small> and a POSH pattern for footnotes

It was probably more than a month ago that markos asked me about the semantics of less important items. We had a short discussion about it and found no relevant tags to mark up a part of text that was less important than the rest of it. An easy example would be a footnote, legal text or any other stuff you would usually make smaller in the world of looks over semantics.

A few days ago I was reminded that I forgot to write about it back then when I saw this issue resurface on the WSG mailing list.

When the semantics of HTML were on question a lot of the tags were ‘deprecated’. Not all marked deprecated in the standard itself, but rather marked as bad practice in the web standards community [1]. When trying to tell the client something is important you really should not be telling it to show it in bold typeface – you have CSS to do that [2].

The problem is that when all these presentational elements were ‘killed’ somebody wasn’t thinking. Let’s see:

  1. <b> ‘deprecated’ in favor of <strong>
  2. <big> ‘deprecated’ in favor of ?
  3. <br> discouraged in favor of <p>
  4. <i> ‘deprecated’ in favor of <em>
  5. <s> and <strike> deprecated in favor of <del>
  6. <small> ‘deprecated’ in favor of ?
  7. <tt> ‘deprecated’ in favor of <code>
  8. <u> deprecated in favor of <ins> and because of confusion with <a>

You might have noticed the question marks in the list. The first one, the tag that is supposed to be a semantic for <big> isn’t really all that important. We have many ways to point out that something is important (if there was a semantic meaning – <h1>…<h6>, <strong>, <em>) or just use CSS to change it to big. The problem lies in the latter question mark. How do you mark something that used the small as some sort of semantic and not just a way of presenting the data visually?

In the standard these are actually specified in the Graphics part of it. The meaning of <small> is Renders text in a “small” font. That’s great, but what if I want to tell the world that what I put in there is a legal text? Footnote? Something deemphasized? POSH patterns to the rescue.

As you might have noticed this post uses footnotes. I’ve marked them so that the text in the article links to the footnote bellow and the footnote links back. To show that this is a footnote relation I’ve added a forward relation rel=”footnote” to the link in the text and a reverse relation rev=”footnote” in the footnote itself. I’m also using these to set the styles (which makes them break in IE6 and other stinky browsers). The footnotes are marked up as an ordered list (<ol>) with a class name “footnotes” and each footnote is a list item (<li>) which has an id “footnote-footnoteid-postid” that enables me to link to it.

When marking up legal notices you might want to use rel=”license” and link it to the part of the content you’re specifying the legal text for with a rev=”license” if you don’t have a link to it; if you’re specifying it for the document just link to the page.

  1. Some are deprecated in HTML 4.01, removed in XHTML 1.0 Strict and some just marked as bad practice. For more details check the specification or other sources. back
  2. If you want more information why this is the way to go please read the POSH page and the articles and presentations linked on that page. back

Opinions

express yours below
  1. Marko

    That’s all nice and dandy, but your POSH pattern seems to rely heavily on links. What do you do if you want a deemphasized block to which you don’t link?

    Anyhow, XHTML is semantic as much as value of class/id attributes can be considered semantic. That they should is already doubted by many.

    Also, by doing this you’re getting close to defining a microformat already. What you’re missing is adoption (agreement that this means what you say it means) and probably a spec.

  2. Marko Mrdjenovic

    That’s sort of the point of POSH patterns. They’re much like microformats except that they’re really more generic, more private and less adopted. What they do is harness the semantic meaning of separate tags to form a compound that you can use, document and share.

    I know that the need for a deemphasized element exists and I intend to use the small tag out of its standard defined presentational semantic.

    According to the standard the class attribute might be used “for general purpose processing by user agents.” I don’t think that using it to add semantics is wrong but I wouldn’t go as far as to say that it’s the only and right thing to do so. It’s just what we can use at this point.

Express your opinion