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.
I’m Jens, and I’m an engineering lead and author. I’ve worked as a technical lead for Google, I’m close to W3C and WHATWG, and I write and review books for O’Reilly. I love trying things, sometimes including philosophy, art, and adventure. Here on meiert.com I share some of my views and experiences.
If you have a question or suggestion about what I write, please leave a comment (if available) or a message. Thank you!
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.
I totaly agree. Sometimes I fight against semantics extremist people.. Semantics with microformat and/or RDFa OK, but when it’s useful..
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! 😉
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?
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
On July 14, 2008, 14:16 CEST, Martin McNickle said:
The code to content ratio for the example is around 7%. Horrible..
On August 21, 2008, 13:29 CEST, Drenthe said:
This looks more like an XML document lol
Maybe this is interesting to you, too:
- Next: Optional Tags in HTML 4
- Previous: Tip: vi Configuration
- More under Web Development, or from 2008
- Most popular posts
Looking for a way to comment? Comments have been disabled, unfortunately.
Get a good look at web development? Try The Web Development Glossary (2020). With explanations and definitions for literally thousands of terms from Web Development and related fields, building on Wikipedia as well as the MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, and Leanpub.