Microformats are standardized ways to add meaning to objects such as persons, places, events published on the Web. Microformats such as hCard, a format to add meaning to persons and places, are rooted in common patterns in Web content structure and class namings, as well as in semantics and structures borrowed from existing standards such as vCard. Microformats work very well when the object tree structure maps perfectly to the content tree structure, and they don’t work so well or don’t work at all when the two trees don’t map.
One technique used by microformats is the include-pattern, which allows properties to be referenced from within an object. I call this technique “property referencing”. For instance, in the following sentence: “We have two office locations in San Francisco: 665 3rd Street and 123 Folsom Street.”, “665 3rd Street” and “123 Folsom Street” are two adr objects, which do not contain a locality property because this property is inferred from the context. Well, according to the include pattern this property can be referred by including in the span of class adr an empty a element of class include that will point to the “San Francisco” fragment:
"... in <span id="sf" class="locality">San Francisco</span>. <span class="adr"><span class="street-address">665 3rd Street</span><a href="#sf" class="include"/></span> ..."
The problem with this technique typically relies on one or more empty anchor (“a”) element(s), and as such has been criticized as not accessible for non graphical user agents such as screen readers, which get confused by these empty links.
One technique I have suggested is the use of subject referencing and property inheritance:
- subject referencing means that the property is refers to the subject it qualifies rather than the subject refers to the property that qualifies it.
- property inheritance means that if a property is attached to a container object then all objects contained in that container object inherit this property, unless it is overridden
Here is my example above with these two concepts in action:
Our company has office locations in <a href="#adrlist1" rev="propertyOf"><span class="locality">San Francisco</span></a>: <ul id="adrlist1"><li id="adr1" class="adr"><span class="street-address">665 3rd Street</span>, and</li><li id="adr2" class="adr"><span class="street-address">123 Folsom</span></li>
</ul>
In this markup, we have:
- “San Francisco” is a locality property of
adrlist1, which is a container (ul) - “665 3rd Street” and “123 Folsom” are contained in adrlist1 and as such inherit the “San Francisco” locality property.