Über-Semantics

Published on May 27, 2008 (↻ February 5, 2024), filed under Development (RSS feed for all categories).

This and many other posts are also available as a pretty, well-behaved ebook: On Web Development.

Premasagar recently published a great demonstration of what can be considered “über-semantic” code. I guess we can thank the microformats community here, which carefully avoids to rely on the semantics of HTML elements but instead uses non-defused classes for everything:

<div class="hentry hreview">
  <div class="vevent entry-content item">
    <address class="vcard">
      <abbr class="fn author" title="Premasagar Rose">I</abbr>
    </address>
    <a rel="bookmark" href="https://example.com/statuses/555/">am</a>
    <abbr class="updated" title="2008-02-17T15:30Z">now</abbr> at the
    <abbr class="rating" title="5">wonderful</abbr>
    <span class="description">
      <a class="summary url entry-title" rel="bookmark tag"
        href="http://barcamp.org/SemanticCampLondon">SemanticCampLondon</a>
      (<abbr class="dtstart" title="2008-02-16">February 16</abbr> -
      <abbr class="dtend" title="2008-02-17">17</abbr>)
      <span class="vcard location">
        <span class="fn org">Imperial College</span>
         <span class="adr">
          <span class="locality">London</span>
          <abbr class="country-name" title="United Kingdom">UK</abbr>
          (<span class="geo">
            <span class="latitude">51.498</span>,
            <span class="longitude">-0.179</span>
          </span>)
        </span>
      </span>
    </span>
  </div>
</div>

The code translates to “I am now at the wonderful SemanticCampLondon (February 16 - 17) Imperial College London UK ( 51.498, -0.179 )”.

This sort of code is horrible. It should be questionable to everyone whether the end truly justifies these means. The only thing I like about microformats acting up like this is that I can keep this post short: It’s crucial to get the HTML right.

About Me

I’m Jens (long: Jens Oliver Meiert), and I’m a frontend engineering leader and tech author/publisher. I’ve worked as a technical lead for companies like Google and as an engineering manager for companies like Miro, I’m a contributor to several web standards, and I write and review books for O’Reilly and Frontend Dogma.

I love trying things, not only in web development (and engineering management), but also in other areas like philosophy. Here on meiert.com I share some of my experiences and views. (Please be critical, interpret charitably, and give feedback.)

Comments (Closed)

1. On May 27, 2008, 13:02 CEST, Premasagar Rose said:

   Good point, Jens! This would indeed be painful to maintain by hand.

   The demo was, of course, trying to illustrate the overlaying of multiple compound microformats, showing them in a super-condensed form, all enmeshed within each other. In practice, microformats are spread much more thinly in HTML.

2. On May 27, 2008, 20:38 CEST, Neovov said:

   I totaly agree. Sometimes I fight against semantics extremist people.. Semantics with microformat and/or RDFa OK, but when it’s useful..

3. On May 27, 2008, 22:17 CEST, Jens Oliver Meiert said:

   Premasagar, understood, I’m glad that you don’t see that as criticism against your work (it hasn’t been)—you uncovered this issue in a nice way.

   Nicolas, absolutely. I like this, “semantics extremist people” 😊

4. On May 28, 2008, 17:17 CEST, Duluoz said:

   Hey I know, lets mix oil and water and expect a fantastic result like we did when we made that awesome website that incorporated microformats! 😉

5. On May 28, 2008, 21:44 CEST, Dave said:

   If the microformats community vows to never rely on the semantics of HTML elements, then why even use a combination of div / address / abbr / a / span ? Maybe there are technical limitations keeping them from including outright XML in pages the way they’d like, but wouldn’t it make much more sense to target those technical limitations rather than creating bad precedents that further entrench the limitations?

6. On June 2, 2008, 18:40 CEST, Maniquí said:

   thanks to the microformats community’s approach to never rely on the semantics of HTML elements

   Is it there any other option? Current semantics of HTML can’t do the job, or am I missing something? By now, the only option to add (desired) (über) semantics is probably using ID and class names.

   I agree that the code in your example looks monstrous.
   Probably, no one will be hand-coding that code each time someone wants to publish his/her status, geolocation, etc.

   But then you can have a tiny app where you could just input the values (who, where, when, rating, etc) and then it spits out the “horrible” pattern. Like a CMS for microformats.
   Why anyone would like to use that pattern? Who knows…
   Maybe it can be picked up by another web 2.0 up that shows an smiley on a Google map.
   But then, that is not our problem.

   As a side note, I can’t think of any benefit of using microformats if they aren’t used for re-using/feeding them somewhere else. One exception: it could be useful for humans looking at the code in 1000 years. HTML + classes (like microformats) are more future-proof semantics than
   just HTML.

   Finally, I couldn’t run a code to content ratio test to the Compound Microformats article. But I would bet it has a very low percentage.

7. On July 14, 2008, 14:16 CEST, Martin McNickle said:

   The code to content ratio for the example is around 7%. Horrible..

   – Martin

8. On August 21, 2008, 13:29 CEST, Drenthe said:

   This looks more like an XML document lol