I recently added microformat support to the free public CVs at careers.stackoverflow.com by popular demand.
Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.
The official microformat "elevator pitch" tells us nothing useful. That's not a good sign. It doesn't get much better on the learn more link, either.
I'm left scratching my head, wondering why I should care. What problem, exactly, do microformats solve for me as a user? As a software developer? There's lots of hand-wavy talk about data, but precious little in the way of concrete stories or real world examples.
But I have a real world example: a CV. To some human resource departments the standard web interchange format for a CV or Resume is already established -- it's called "Microsoft Word". I have no beef with Word, but certainly we'd like to pick a more simple, open data format for our personal data than Microsoft Word -- and the hResume microformat seems to fit the bill. And if your CV is published on the web in a standard(ish) format, it's easier to take it with you wherever you need to go.
I had already implemented the tag and identity microformats on Stack Overflow many months ago. I wasn't convinced of the benefits, but the implementation was so easy that it seemed like more work to argue the point than to actually get it done. Judge for yourself:
<a href="http://www.codinghorror.com/" rel="me">codinghorror.com</a> <a href="/questions/tagged/captcha" rel="tag">captcha</a>
Fairly clean and simple, right? That was the extent of my experience with microformats. Limited, but positive. Then I read through the hResume microformat spec. You should read it too. Go ahead. I'll wait here.
My first impression was not positive, to put it mildly. So you want me to take the ambiguous, crappy "HTML" markup we already have and layer some ambiguous, crappy "microformat" markup on top of it? And that's … a solution? If that's what microformats are going to be about, I think I might want off the microbus.
Let's take a look at a representative slice of hResume markup:
<div class="vcard">
<a class="fn org url" href="http://example.com/">Example</a>
<div class="adr">
<span class="type">Work</span>:
<div class="street-address">169 Maple Ave</div>
<span class="locality">Anytown</span>,
<abbr class="region" title="Iowa">IA</abbr>
<span class="postal-code">50981</span>
<div class="country-name">USA</div>
</div>
</div>
As you can see, the crux of microformats is overloading CSS classes. When you give something the "adr" class within the "vcard" class, that means it's the address data field within the hCard, within the hResume.
While I can see the attraction, this approach makes me uneasy:
Maybe I have a particular aversion to getting my chocolate data structure mixed up with my peanut butter layout structure, but it totally skeeves me out that the microformat folks actually want us to design our CSS and HTML around these specific, ambiguous and non-namespaced microformat CSS class names. It feels like a hacky overload. While you could argue this is no different than the web and HTML in general -- a giant wobbly teetering tower of nasty, patched-together hacks -- something about it fundamentally bothers me.
Now, all that said, I still think microformats are useful and worth implementing, if for no other reason than it's too easy not to. If you have semi-structured data, and it maps well to an existing microformat, why not? Yes, it is kind of a hack, but it might even be a useful hack if Google starts indexing your microformats and presenting them in search results. While I'm unclear on the general benefits of microformats for end users or developers, seeing stuff like this in search results …
… is enough to convince me that microformats are a step in the right direction. Warts and all. While we're waiting for HTML5 and its mythical data attributes to ship sometime this century, it's better than nothing.
| [advertisement] JIRA 4 - Simplify issue tracking for everyone involved. Get started from $10 for 10 users. |
I'm gonna go with an 11 out of 10 on the stupid meter for all 3 described microformats.
First, they violate HTML standards. Sure, you can decorate your HTML however you want, but do not count on it not breaking some future change in the standard. Dumb.
Second, things like the "tag" microformat require that the URL being pointed to is formatted in a very particular way. Automation can't do this - trying would destroy the point, and who wants to do this manually everywhere? A waste of time as best.
As for the resume format. Why? WTF? Seriously? Are people really THAT stupid? Humans will never read this crap, and a machine can't do anything meaningfull with it. It does not standardize how resumes appear, and even if a machine was used to harvest this pile of crap, a human STILL has to read it to decide if it is at all useful. Pointless - you still have to do all the work you did before only now you have a pile of people wasting time creating additional markup that may actually break other things later on.
Talk about a blatent waste of time and data.
Xepol on December 10, 2009 1:34 AMI would like to echo Douglas Greenshields on the whole "css classes" thing. This is the same logic that ASP.NET developers are poisoned with throughout their web development carerr.
"HURR DURR; HTML is graphical, the only REAL data is on the server; DURR"
Miff on December 10, 2009 2:08 AMThe reason CSS elements are commonly used for microformats is:
a) they already exist (e.g. no HTML extension)
b) people already tend to name them something that describes what they are anyway (really calling the section on your HTML "address" instead of your rad cool name that nobody else cares about for your resume causes you to flip out?)
c) by using the names they do not harm existing layout
The real beauty of this is that it leverages everyone's self interest for the benefit of everyone. Designers want to make nice looking pages using CSS. People want to make their stuff available for search. Search engines want to improve their indexes.
I fully agree that the microformat solution is poor and has a shady foundation, but I too want to reject against the following:
"We're overloading the class attribute with two meanings"
No you're not. When you add a class to a HTML element, you are supposed to give semantic meaning to the DOM. I repeat: the DOM. Next, this meaning can be used for parsing (if you use XHTML), interaction (javascript) or styling (CSS). You call a postal code box "postal", not "greybox" or "borderedfield".
Unfortunately, this failure to understand the DOM is more the rule than the exception. It's quite sad actually. First we styled directly in the HTML. Then the world saw the light, and we started using CSS to seperate style from markup. Now, we are in a cross-over phase where style and markup are seperated in files, but still hard-linked, and our markup is still as poor as ever.
Ferdy on December 10, 2009 2:59 AMI'm a little confused about what those google search results have to do with... anything. What are they supposed to be illustrating?
Mat Scales on December 10, 2009 3:41 AMNVM, the yellow highlighting just made the important bit hard to notice :p
Mat Scales on December 10, 2009 3:42 AMgot this discussion a while ago on SO.
http://stackoverflow.com/questions/1650401/semantic-html5-back-to-the-90s/1650465#1650465
Stefano Borini on December 10, 2009 3:55 AMOf course, I tend to agree with Jeff. It's technically wrong to overload the css class with semantic meaning. The css class is there to bind against a representation (style) meaning, nothing more.
Very good post.
Stefano Borini on December 10, 2009 3:58 AMSeems like a yet another standard ;) If it isn't widely adopted, impleting microformat sounds like waste of time...
empi on December 10, 2009 4:00 AMRight, but if Google adopts it in search results, game over: it is the standard. That's clearly happening.
Jeff Atwood on December 10, 2009 4:02 AMWell, it depends on the impact on SEO. If you won't get real benefits from it, I don't think the customers will pay for adding that feature. If web pages that use microformats get higher page ranks or get higher in search results (at least for keywords linked with microformats) lots of people will start using it. However, is it really happening?
empi on December 10, 2009 4:09 AMAnother use of microformats is to allow for a better integration with other applications.
I.e. right click in the browser and add the information in your address book/calendar app.
See "Tails Export" add on for FF
julg on December 10, 2009 4:20 AMThere are real semantic vocabularies like FOAF and DOAP that can be used/created for these kinds of things as specific instances of RDF/OWL that a that are not ambiguous in their structure or semantics. Sure they are more complicated, but that is where we really need to get to, not, as you eloquently put it: "a giant wobbly teetering tower of nasty, patched-together hacks".
Alex Pline on December 10, 2009 4:33 AMthen who is gonna coordinate this standard amendments , that is the real crux from my view of point
sensei on December 10, 2009 4:39 AMI've been using Microformats for a few years; as soon as I discovered them I thought "hey these look cool, and I like making things Accessible, I'll use them".
Like Jeff I struggled to get the syntax right, reading this post reminds me just how fiddly and 'just-so' the format really is. I think the idea behind the format is a good one and trying to fit in something new on top of the current languages is a tricky problem - but I understand why they went with overloading the class. I don't think it's a pure solution, I would prefer to keep the class for css (though to some extent I'm already blurring that line with jQuery as it uses classes too).
Wouldn't it be great if HTML5 had built in support for something like this, clearly defined tags with semantic meaning. Yes "header", "footer" etc go someway to dealing with it but perhaps not far enough. HTML5 should not care about backwards compatibility and simply redefine html as it *should* be, leave it upto the browser to handle interpretting HTML4 / HTML5.
Simon on December 10, 2009 4:47 AMAre you not doing CSS "wrong". There shouldn't be any styling in the HTML. Having a class named "red" is presentation and belong in CSS, not in HTML.
A developer working on CSS selects the data classes that she wants to style and styles those in the CSS code. Otherwise CSS is just a mapping between the class "red" and the CSS code "color: #FF0000".
The proper way to do it is to structure your data according to whatever format you want (in this case, microformats) and then style as you want to in CSS. E.g. "fn org url" should be blue and underlined.
Adam on December 10, 2009 4:56 AMI take issue that "overloading the class attribute with two meanings" is a bad thing.
If you look at the spec (http://www.w3.org/TR/html401/struct/global.html#h-7.5.2) it states:
The class attribute has several roles in HTML:
* As a style sheet selector (when an author wishes to assign style information to a set of elements).
* For general purpose processing by user agents.
According to the spec the class attribute was designed with extensibility in mind.
The "data" attributes are for something else:
"Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
These attributes are not intended for use by software that is independent of the site that uses the attributes."
What would be relevant instead are RDFa or "microdata" (currently in HTML5).
Julian Reschke on December 10, 2009 4:56 AMI also have to take issue with this:
"It's technically wrong to overload the css class with semantic meaning. The css class is there to bind against a representation (style) meaning, nothing more."
That is so wrong I almost wonder if it's sarcasm. The markup in a HTML document is supposed to convey *semantic* meaning, not stylistic meaning. A class named "red" is a bad use of the class attribute, we all know this. The class attribute is supposed to tell you what the data *is* not how it should look.
*Semantic* markup! *Semantic* markup! How many times have we heard that phrase? What is semantic about a class that conveys style meaning? Nothing!
You've got it completely backwards Atwood. Edit this post now before you delude more poor souls into your foolish "Everything in HTML is semantic, except the class attribute" line of thought.
noah on December 10, 2009 5:14 AMI'd echo Ben's comments, class is intended for "For general purpose processing by user agents", as well as being a hook for styles (or JavaScript). With microformats, someone with a browser pluggin can add events straight to their calendar, or Yahoo might index all the CVs better.
HTML5 will go some way to removing the need for using classes, there are some general purpose data attributes for embedding machine readable data:
http://dev.w3.org/html5/spec/Overview.html#microdata
However, I don't think there would be much support for loading the HTML5 (or 6) spec with lots of specific scenarios for this type of markup, that's what the generic elements (like class and itemprop) are for.
However, microformats could greatly simplify the specs for HTML5.
Does anyone know if that's the intent for future?
AlastairC on December 10, 2009 5:17 AMWord, although:
> We're overloading the class attribute with two meanings
It’s pretty common to use the class attribute to allow, say, JavaScript to identify a set of elements. It’s the only place in HTML where authors can add their own semantics.
Although we mostly do this for styling purposes, I don’t think there’s anything inherently wrong with using it for other purposes.
Paul D. Waite on December 10, 2009 5:19 AMWould also have to agree that the MF solution is a little wobbly, but at the moment is the best option available.
Also have a need to chime in on semantic vs presentational class names.
It makes me cringe when I read bedroom posts by self proclaimed css experts [not referring to Eric M and others that really are experts] "don't ever ever use tables, google used a table and they are wrong/lazy/stupid(orly?),...", who then champion the use of presentational class names like "col1 bold red double-space" and call it a css framework.
How is that any different to the bad old days of wrapping it all in font tags? Different mechanism, same crap.
Personally, class="postal-code", despite the foibles of MF, seems much more semantically correct to me. Hell, ignore MF if you want to, but call it what it is, not what it looks like, wasn't that the point in the first place?
PS - orange
seanb on December 10, 2009 5:22 AMlove the chocolate and peanut butter reference....
indeed messy!
Heh, if you have an issue with microformats, wait till you read about The Semantic Web, RDF, ontologies etc.
But it is misleading to call it a "CSS class". The class attribute in div and span is supposed to indicate what the content means, so that some application can reference it and do something appropriate with it. CSS is just one of those applications that happens to take care of the presentation.
99% of the time though, its best to just have the human readable HTML document web, and the machine readable XML/Web Service web, but for those times where you really need machine readable documents (I mean, documents are a human readable abstraction of information after all, if you need them to be machine readable, you are using the wrong abstraction), microformats are an ok solution. The problem domain isn't as large as the Semantic Web and microformat people think though.
Kurt on December 10, 2009 5:28 AMIgnore me, Pete B said it better.
Paul D. Waite on December 10, 2009 5:31 AMWhilst I would echo peoples comments that class attributes are to have semantic meaning rather than stylistic, I think some of Jeffs points still stand.
The invisibility of the format, for instance. You have to tell people exactly which parts are the microformat, or they have to know, so they know which bits not to touch. Whether your classes are semantic or not there is still the risk of people deciding to re-factor for naming consistency, or removing "unused" or newly "redundant" classes etc. Especially with the more complex microformats.
Whilst classes may have been designed for extensibility it still seems brittle, and there are still problems with using classes which aren't used directly by the project like css or jQuery does, but has some invisible use by the browser.
[ICR] on December 10, 2009 5:31 AMHey Jeff,
I'm hearing your followers argue for the class attribute "overload" and I'm also hearing your concern about the overload. My sentiments tend to match yours when it comes to microformats: For situations where they are easily implemented, great! Use them. But (in general) using them for anything more than a simple telephone number, it becomes more difficult just to get the right syntax than it does to just ignore them. For something that is supposed to be simple, theya re incredible difficult to use properly.
My two cents.
DaveE on December 10, 2009 5:38 AMUse RDFa instead, it lacks many of the problemsn you mention...
Nicolas on December 10, 2009 6:18 AMHi Jeff,
Definitely agree with you on this one. The scariest thing is there is no indication that you are using a micro-format when you use one. I really don't see anyway around it or to enforce it with the technology stack we have. You are also right about Google. If they adopt it, you can't really fight that.
John Sonmez on December 10, 2009 6:31 AMI really think maybe they should have prefixed the class names with something like mf-. Maybe class="mf-street-address". This would have greatly reduced the chance of problems with existing code and made it much less ambiguous when reading your code.
Cody C on December 10, 2009 6:48 AMDefinitely agree with the sentiment, Jeff. Overloading aspects of the view (HTML, CSS) to denote content seems shoddy and hackish. This sort of metadata should be separate, and in my mind ought to be ideally handled via some form of content negotiation. Unfortunately, the path most likely to succeed is the path of least resistance, and that path is going to be extra markup tacked on to existing HTML. This makes me almost yearn for meta tags. Almost.
Toby Jungen on December 10, 2009 6:52 AMHi Jeff,
I'm the guy that originally made the request for you to implement hResume so thank you for doing it - and so quickly as well.
On the subject of whether they should be used or not ... my request came from a desire to see more structured data on the web. I don't particularly care much for which implementation is used - I suggested hResume simply because I knew it existed. I hear lots about RDF/RDFa and perhaps that is the future but in the meantime using microformats is no bad thing.
I interpreted your post here as "microformats are a pain but the pay-off is worth it" and if so I would wholeheartedly agree with that! Hopefully we'll get some big oak trees from little acorns like your implementation here.
@Jamiet
Jamie Thomson on December 10, 2009 6:56 AMLet me try and help with your un-ease:
1. We're overloading the class attribute with two meanings
Actually, as other people have mentioned we are following the Html spec.
2. The microformat css class names may overlap with existing css classes
Awesome. I guess you and the microformat designers think alike. No work to do. Oh, you have a problem because you assigned the class "postal-code" to something that was not a postal code. Oops.
3.There's no visual indication whatsoever that any given css class is a microformat
It's class name. You seriously want to force namespacing on every microformat because you don't think it is reasonable to get everyone to agree to call a spade a spade. How about you prefix all of your class names with "my-" and everything will be honky dory?
Anyway, I'm sure some enterprising sole will write a plugin to syntax highlight standardized class names.
4. The spec is incredibly ambiguous
Probably. Most young specs are. As it becomes more popular I would expect the wrinkles to get ironed out. Having said that, your opinion on the spec is a bit dubious considering you haven't read the html spec well enough to understand what the class tag can be used for. And you have been doing html for how long?
5. It doesn't handle unstructured data well
You can't blame this in the hCard format. If you ask the user to enter an address freeform, don't expect to be able to expose the data in a structured way.
Regarding your points 1 and 2, can't you just give the resume elements multiple class assignments? Yes, browsers =IE6 have issues with it (http://www.quirksmode.org/css/multipleclasses.html), but since your microformat isn't actually going to be assigning style, it should work.
Do the tools consuming microformats not support multiple classes on a single element?
Josh on December 10, 2009 7:19 AMHahaha he said V Card...
Matt on December 10, 2009 7:22 AMI agree on the Microsoft Word bit. That makes no sense to me..
Tires on December 10, 2009 7:23 AMI don't think the term "CSS classes" is correct. The class attribute in HTML is part of the HTML specification, which CSS uses. I believe the correct usage is "HTML classes."
http://www.w3.org/TR/html401/struct/global.html#h-7.5.2
Microformats are useful. Consider this: if, on my app's sign up page, the end user could type in their twitter username, and the app would retrieve the microformat present on their twitter homepage to autocomplete data in the form fields. That could be a nice feature.
Zach Leatherman on December 10, 2009 7:23 AMAhhh! Just seeing the example made me scream inside.
Captcha: lng pancake. (lngPancake... Hey, it's giving me variables!)
Practicality on December 10, 2009 7:23 AMI don't think the term "CSS classes" is correct. The class attribute in HTML is part of the HTML specification, which CSS uses. I believe the correct usage is "HTML classes."
http://www.w3.org/TR/html401/struct/global.html#h-7.5.2
Microformats are useful. Consider this: if, on my app's sign up page, the end user could type in their twitter username, and the app would retrieve the microformat present on their twitter homepage to autocomplete data in the form fields. That could be a nice feature.
Zach Leatherman on December 10, 2009 7:23 AMWhoops, sorry for the double comment.
Zach Leatherman on December 10, 2009 7:25 AMTo me microformats are a very bad engineering decision, compared a custom XML micro-language. Such a language would have a set of clearly named elements, augmented, as necessary, with clearly named attributes. There's no limitation on the number of either, so you don't have to stuff too much information into a single text string and then parse it later; one of ideas of XML is that everything has been parsed already. Along with primary matter attributes you can have such niceties as language version, so it can develop further. And all this rich structure can easily merge with any other XML document, because XML was designed to be extensible in this way.
The only ‘advantage’ of microformats is that they will pass the W3C validator, while a custom mix won't. And this is, I believe, the real cause why they emerged in the first place: to stay within ‘safe’ and ‘valid’ XHTML, for some reason I cannot grok in its fullness.
Mikhail Edoshin on December 10, 2009 7:37 AMSorry but if you are that concerned that someonne will come a long later and rename/reformat/remove the microformatting then should you not do what you should and comment it?
Jeff has gone about comments before and this is the perfect time to use them.
N Live on December 10, 2009 7:40 AMI'm sure this is entirely against the point of microformats, but could you have implemented it as an entirely new block of html. Then put this hResume block below the html that actual displays the CV, and make this block hidden using css. I'm sure this is against the point, but would this work? would it be a valid hResume? I know duplicating the data would be "bad" form but it would probably make the code cleaner for the developers. Just a thought.. I've never implemented any microformats yet.
TC on December 10, 2009 8:11 AMNothing based on XML can possibly claim to be "Designed for humans first and machines second."
Norman Ramsey on December 10, 2009 8:24 AMIt's a shame that "because google does it" is considered a good development decision.
Steve-O on December 10, 2009 8:37 AMSteevo-O,
Anymore "because google does it" is *the* development reason!
Zack on December 10, 2009 9:24 AMI agree with others above. This thinking is backward. Our goal should be that HTML documents--including their class tags--denote only text (and input controls, images, etc.) with semantic meaning. We do often have to compromise. It's sadly rarely truly practical to have any kind of *pure* HTML document with no regard to layout, style, or behavior; but that's still the goal.
Then CSS and jQuery/JavaScript are each layers on top of that.
HTML: This is an address
CSS: This is how an address looks
JS: This is how an address bahaves
It sounds like these microformats *are* semantic. The HTML class attribute seems to me to be a perfectly appropriate place for such meta data. Sure, it'd be nice to have these formalized in the HTML spec itself, as a custom XML micro-language, or at the very least implemented in a way to reduce collisions.
It seems that the names that are the problem, not the placement.
Zack on December 10, 2009 9:26 AMAs others have said, the argument that putting some sort of semantic information in the class attribute is a bad thing, doesn't really hold water. The class attribute is an excellent application specific field to store just this kind of information. As others have said CSS is one application, but there are plenty of others. Also, in the case of conflicting styles, it is easy to set a context on the class:
.vcard .address
For example. Also, as HTML and CSS supports multiple classes, it is a tactic that one would utilize it for more complex styling. As someone who has worked with word processor inner workings, this concept is actually very powerful. You can create a set of style intersections while still keeping a semantic description (ie class="bold-italic title-margin subject").
As for the actual usage of microformats, it seems rather silly. It is not silly in terms of the techniques, rather the actual formats themselves. The whole vCard idea makes some sense in some applications like Google Calendar for example, but honestly, where else does this rapidly improve things? I think microformats as a technology would have been better off providing an obvious and more widely usable example what's currently available. My guess is that microformats were a spec designed for the future rather than one that came about from real world examples.
Eric Larson on December 10, 2009 9:29 AMRegarding your point of overlapping names:
I recently asked a related question, "How can I best avoid using reserved or key words in my language or framework?"
I learned Stack Overflowers are not at all sympathetic to this issue.
Zack on December 10, 2009 9:33 AMErm. CSS is the presentation layer. HTML the semantic structure of a document. Class names should never reflect what the element looks like but should describe the purpose of the element. Using microformats in the class attribute describes the data - its semantics and css can be used to style these class attributed elements. Microformats make perfect sense to me and I always felt that they added meaning to elements, not "overloading CSS classes".
If I hired a UI developer who chose to go with a new naming convention for css selectors or php class or function names, for that matter, without discussing it with his team, that would be a failing on my part. Also, if i was hiring for a UI dev position, id expect the hired developer to know what Microformats are.
Dave Sayer on December 10, 2009 9:36 AMMicroformats may be tricky, but what are the alternatives?
1. Implement a separate web service to provide site data in well-structured XML. (But now you have TWO sites to maintain: one for machines and one for people. Guess which one the search engines will care about. And how do you map the machine web to the human web?)
2. Implement RDF. (Try reading those specs some time! And what browsers actually implement RDF + OWL + SPARQL + acronym-of the-month that you'd need to do anything remotely useful?)
3. Do absolutely nothing, and hope the whole Semantic Web thing blows over, just like Dublin Core did.
I'm not quite enough of a cynic to support #3, so that leaves microformats. And as hacks, go, it's not too shabby.
+1 to everyone pointing out that there is no such thing as "CSS classes". There is an HTML class attribute, intended to carry additional semantic metadata about the contents of a tag, and also incidentally available as one of several places for stylesheets to hook in. Microformats use the class attribute exactly the way it should be used.
you forget one thing in your self-advertising. Microformats are not for users. Firms want Word. Users use it and can format as they wish (and not those bllshit like spaces at end f aline for formating).
sunfire on December 10, 2009 10:00 AMEric larsen says:
"My guess is that microformats were a spec designed for the future rather than one that came about from real world examples"
Yeah, I'm sure that's right. Nevertheless I'm sure microformats have a use. There was at attempt to make them useful a few years ago with the development of Live Clipboard: http://www.liveclipboard.org/ . Unfortunately that seems to have died a quiet death!
-Jamie
Jamie Thomson on December 10, 2009 10:00 AMJeff, microformats evolved out of a desire to semantically express what people were already doing and publishing. The first microformat, XFN, uses the 'rel' attribute because it makes the most semantic sense. (The identity microformat is an offshoot of XFN.) For similar reasons, the tag microformat uses 'rel'. Both are fortunate that an HTML attribute exists that models what they are expressing. As is the license microformat, which uses 'rel="license"'.
But for most things that people want to semantically express—geographic coordinates, contact information, resumes, calendars, recipes, and so on—there are no HTML4 or XHTML structures to accommodate them. The only path open is the 'class' attribute, which is technically quite appropriate (as others have pointed out) but a pretty small container for all the things that might be stuffed into it.
Had there been a way to create and use arbitrary attributes, that's what would have been done. As you noticed, HTML 5 adds the ability to create arbitrary data-* attributes. There's a reason for that. As HTML 5 usage spreads, I would expect most microformats to be revised to use data-* instead of 'class'. Before anyone asks why that wasn't done in the first place, microformats are by now a few years old, and predate HTML 5 by at least three. As microformats were being created, there was nowhere else to go.
I have to admit that the end of the post made me smile, because you put your finger squarely on one of the most powerful things about microformats: they're so easy to implement. That is completely by design, and it helps explain why they're catching on, warts and all—just like the web itself did back in the day.
Eric Meyer on December 10, 2009 10:29 AMditto everyone claiming you have a wrong perception of class.
Class should describe the content. It's just convenient that in CSS we can easily use class selectors to apply styles.
But the point of the class attribute, is to to describe the content semantically. If you took away the stylesheets, the class names should still mean something.
Sean on December 10, 2009 10:34 AMMicroformats are the internets eternal buzzword. Semantic html was supposed to be the bees knees and why 4-5 years ago everybody stopped abusing html.
Then nothing happened. Nobody parsed html in a cool way, big companies created web apis instead, and everybody forgot about the promises they microformats and the semantic web was supposed to deliver.
John Farrell on December 10, 2009 11:59 AMCard image...
Just punch some holes...
No seriously, what ever happended to 'getting away from the card image'?
Back in prehistoric times (when I first got into this) I had decks of punch cards with my programs and data in them. They worked ok but the machines were very finicky about trivial things like, sequence, little pieces of dust or paper,extra holes, bendind...
I thought the entire purpose of modern data methodologies was to get as close to free form binary data as possible. I know, I know, this is an impossibility but at least we should be striving forwards and not backwards.
There has to be some reasoning behind this, like being able to walk the page looking for relevance...
It just seems like a step backwards to me...
Mac on December 10, 2009 12:39 PMI understand why there is this confusion about "CSS classes" - ASP.NET used to (it may still!) make you define class attributes in "controls" in templates as "CssClass" attributes. So not only were a generation of .NET developers incorrectly led up the garden path to believe that elements classes were just to be used as styling hooks, but because you were writing an abstract control that didn't give you control over the exact mark-up that was output (and would thoughtfully re-write it for browsers it classed as "downlevel"!) CSS was often written as a series of classitis-suffering rules that looked like .pageContentBlogPostList etc etc.
Microformats, though, can form a useful hook for styling information. adr is a case in point - you may wish to style, say, city or state name in bold (if you're wanting to visually emphasise one particular address part), or capitalise postal town, or whathaveyou) - so you adopt a language you can use throughout a site. They tend to be written by Americans, and so can suffer from a cultural bias (witness XFN, as I have previously lamented http://www.bedroomation.com/2008/04/03/web-things-that-must-die-2-xfn/). But, you know, for a lot of purposes they can be handy. They can be quick. Google can index 'em.
The main problem with microformats is, as you point out, they're really difficult to write! Unless they're simple (they seem to be most useful when they're simple), or unless they map an already existing standard 1:1, they can be horribly over-simplistic. It may be that they can be seen as presenting a lowest common denominator, so at least Google can index up something meaningful that it can present to people alongside something essentially quite different. But they're no grand unifying data format. The approach of doing it quickly and then moving on to something better to spend your time on is a good one.
Besides, shouldn't we make computers do the work of computers? Apple Mail, for example, can recognise addresses when you type them in freeform. Is it really beyond web frameworks to implement libraries that can take freeform addresses and, as best they can, render them into microformats like adr? That's the job of code! If microformats are designed for humans first and computers second, you have to ask: exactly which humans were they designed for?
Douglas Greenshields on December 10, 2009 12:59 PM> The microformat css class names may overlap with existing css classes. Woe betide the poor developer who has to retrofit a microformat on an established site where "locality" or "region" have already been defined in the CSS and are associated with elements all over the site. And let me tell you, many of the microformat css field names are, uh, conveniently named what you've probably already used in your HTML somewhere. In the wrong way, inevitably.
This isn't that big a deal, you can specify and override those styles using "adr locality". Granted, not ideal, but I don't see it having that big an impact.
> There's no visual indication whatsoever that any given css class is a microformat. If you hire a new developer, how can they possibly be expected to know that "postal-code" isn't just an arbitrarily chosen CSS class name, it's a gosh darned officially blessed microformat? What if they decide they don't like dashes in CSS class names and rename the style "postalcode"? Wave bye bye to your valid microformat. If it seems fragile and obtuse, that's because it is.
Maybe, I'm naive, but I'm of the opinion that any professional looking to interact with front-end code should at least be AWARE of Microformats.
You do have valid points, MFs are fragile and ambiguous, but you're also back-to-front on what the class attribute should be used for.
Simon Scarfe on February 6, 2010 11:22 PMThe class attribute has never been the exclusive domain of CSS, at least in my mind. I have used it for years to call out a similar groups of DOM elements. What is that word for a similar group of objects? Oh right, "class" is the word for which I am searching. I find the overloaded use of the class attribute here to be similar to how it is used elsewhere for the same purpose.
BTW, I miss orange.
Jason Jackson on February 6, 2010 11:22 PMThe class attribute has never been the exclusive domain of CSS, at least in my mind. I have used it for years to call out a similar groups of DOM elements. What is that word for a similar group of objects? Oh right, "class" is the word for which I am searching. I find the overloaded use of the class attribute here to be similar to how it is used elsewhere for the same purpose.
BTW Jeff, when my comment fails to submit then I attempt to resubmit, the web site tells me that I have submitted to many comments in a short period of time.
Jason Jackson on February 6, 2010 11:22 PM"HTML5 and its mythical data attributes"? http://dev.w3.org/html5/spec/Overview.html#embedding-custom-non-visible-data (dated today, 12/10/2009) implies they'll be quite happy in reality-land.
Gordon on February 6, 2010 11:22 PMAfter reading this post I can safely say that you sir are no data modeler.
Carlton Northern on February 6, 2010 11:22 PMBrowsers work great for navigation and presentation, but we can only usefully compute with structured data. Microformats combine the virtues of both.
Microformats are great for linking multiple web resources with each other and with desktop apps. Say, you browse the website of your favorite Jazz club. You notice a show you'd like to see. You click a button to add the event to your calendar (either web based or a desktop app). The Operator extension for Firefox does things like this.
Enabling the user to mix and match data sources and easily combine multiple web apps into workflows is the future of the web as an application platform and microformats are a step in that direction.
Read more about microformats here: http://digitheadslabnotebook.blogspot.com/2009/12/microformats.html
-Chris
I have landed on this post twice in about two weeks (StumbleUpon and a twitter follow)... and still can't get the point of it all. Maybe I'll have to wait for the third landing for it to dawn on me.
Ruben (http://www.mostlymaths.net)
Berenguel on March 21, 2010 9:03 AMA bit more about my point of view:
http://forthescience.org/blog/2010/05/12/about-class-attributes-semantics-and-microformats/
Stefano Borini on May 11, 2010 6:36 PMCould you fix these links?
Thanks
Brian R. Bondy on July 19, 2010 6:14 AMThis is only a preview. Your comment has not yet been posted.
As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.
Having trouble reading this image? View an alternate.
| Content (c) 2009 Jeff Atwood. Logo image used with permission of the author. (c) 1993 Steven C. McConnell. All Rights Reserved. |
Posted by: |