Features Microdata and

Kit Sen Chin, 123RF.com Working with microformats and Hidden Meaning

Programs aren’t as smart as humans when it comes to interpreting the meaning of web information. If you want to maximize your search rank, you might want to dress up your

HTML documents with microformats and microdata. By Andreas Möller

TML lets you mark up sections formats and microdata into your own source code for the website shown in of text as headings, body text, programs. Figure 1 – an HTML5 document with a hyperlinks, and other web page business card. The Heading text block is H elements. However, these defi- Microformats marked up with the element h1. The text nitions have nothing to do with the HTML was originally designed for hu- for the business card is surrounded by meaning of the data: Does the text refer mans to read, but with the explosive the div container element, and
in- to a person, an organization, a product, growth of the web, programs such as troduces a line break. or an event? Microformats [1] and their search engines also process HTML data. It is easy for a human reader to see successor, microdata [2] make the mean- What do programs that read HTML data that the data shown in Figure 1 repre- ing a bit more clear by pointing to busi- typically find? Listing 1 shows the HTML sents a business card – even if the text is ness cards, product descriptions, offers, and event data in a machine-readable Listing 1: HTML5 Document with Business Card way. 01  In this article, I describe some impor- 02  tant microformats, such as hCard, hCal, 03  hProduct, hReview, and . You’ll also 04  get an introduction to microdata, and 05 

Pedro Miguel Díaz ‑ el Arte Guitarra Flamenca

you’ll learn about some open source 06 
tools for integrating awareness of micro- 07 

08  Pedro Miguel Díaz ‑ el Fumador

Author 09  Flamenco Artist

Andreas Möller, Dipl. Phys. [http://​ 10  C/ Peral 43

­pamoller.com​­ ], has focused on 11  E‑41002 Sevilla

developing -based software for 12  España
more than 10 years. His development 13  [email protected]
work includes applications, 14  +34 954 88 24 37 web applications, and software in the 15 

field of single-source publishing. He currently works as a freelance consultant 16  and author. 17 

62 April 2012 issue 137 linux-magazine.com | Linuxpromagazine.com

062-068_Semantic.indd 62 2/14/12 11:58:06 AM Features Microdata and Microformats

in a different language, but a computer program would not know the difference between this data and any other data en- closed in HTML tags. Microformats pro- vide a means of showing the purpose of the data. Listing 2 shows the microfor- mat markup for a typical business card. As you can see, microformats mainly use the class attribute from the HTML vo- cabulary. In this case, the hCard micro- format describes a business card. In Listing 2, every property is enclosed by the span element and described by the universal class attribute. For example, class="" in line 6 refers to a busi- ness card object. The class="fn " as- signment describes the contents of the Figure 1: A website with the most important data for a musician – hosting service providers hyperlink, Pedro Miguel Díaz, as a name also refer to this as a web business card. (fn, “Full name”) and the URL in the href attribute as the matching website Listing 3: Event Markup with hCalendar

(url). 01 

The address object class="adr" in line 02 

Feria de Abril

11 comprises multiple properties. It con- 03  el 23 de marzo de 2012, tains the type, street‑address, 21:00 postal‑code, locality, and country of the 04  en Sevilla address. The business card’s markup fol- 05 
lows the hCard [3] , which 06  37° 38′ N implements the Internet Mail Consor- 07  5° 98′ W tium’s vCard specification [4] in HTML. 08 
For each line of text, vCard stores the 09 
key/​value pair and additional options. The hCard microformat translates this Listing 3 shows how to use the hCal- Besides grammar rules, microformats vocabulary into HTML by translating the endar microformat, which was derived are characterized by their reusability. keys to values of the class attribute. from iCalendar [6]. The property/​value Listing 3 uses the Geo microformat to Microformats exist for several other pair class="vevent" describes the event, specify the location for the event. The uses in addition to business cards. For which must contain a summary and a start format contains properties for the lati‑ example, you can describe events using (dtstart). In contrast, the location infor- tude and . Again, the machine- hCalendar, geographical information mation is optional. readable variant is given in the title with Geo, and products and product re- The following rules apply for microfor- property of the abbr element. views with hReview and hReview-aggre- mats: if you want to provide a date in a Listing 4 provides another example of gate. For an overview of microformats machine-readable format, it has to be the re-usability of microformats. Line 1 and versions, check out the wiki at Mi- given in the title property of the abbr el- marks of the summary of a product re- croformats.org [5]. ement (line 3). view using the hReview-aggregate micro-

Listing 2: Business Card with hCard Markup

01  13  C/ Peral 43

02  14  E‑41002

03 Sevilla
href="http://microformats.org/profile/hcard"/> 16  España 04  17