Blog

Dissemination of views, information and knowledge without any cost or ado was made possible after blogging dawned upon us. Lets take a look at some of the burning topics, general discussion, innovations and techniques from our Editor’s desk

  • Jan 10 2012

    Why to prefer Microdata over RDF/RDFa and Microformats?

    Standard Rule states that CSS is supposed to have designing or presentation guideline to present the information to readers, whereas HTML should only include semantic or meaning of the information being presented. Since inception, HTML is trying to be semantic means trying to include meaningful terms instead of designing guidelines. Each step in the development of HTML & CSS is aimed to have a better semantic markup language to present the information in a better way without losing its meaning.It remains true for the inception of CSS, RDFa, Microformat, and HTML5. HTML5 includes a meta-data specification named Microdata, which is aimed to include semantics on existing Web pages. Browsers, Web Crawlers, Screen Readers, and Search engines can extract Microdata from its container page to provide better browsing experience to the end-users. In this write up, we will discuss how Microdata is a better semantic format than previous frameworks of RDF, RDFa, and Microformats.

    Default Markup Code

    We have following markup code created in HTML. We will implement RDF, Microformat and Microdata in this code one by one to illustrate their differences.

    <html> <head> <title>Dan Brown’s Latest Book</title> </head> <body> <div> <h1>The Lost Symbol</h1> <span>Author: Dan Brown (born June 22, 1964) </span> <span>Fiction & Thriller Novel</span> <a href=”http://www.thelostsymbol.com”>The Lost Symbol Website</a> <span>Reviewed by: Mark. Ratings: 4.5/5 (Excellent) </span> <span>It is a thriller set in Washington, D.C., after the events of The Da Vinci Code, and relies on Freemasonry for both its recurring theme and its major characters</span> </div> </body> </html>

    RDF/RDFa

    RDF stands for Resource Description Framework. It is based on W3C Recommendation and adds extensions to XHTML in order to embed rich metadata in Web pages. RDF was firstly introduced in 2004 and is succeeded by RDFa in 2008. RDFa is strictly connected with XHTML and supported with the XHTML1.1 doctype.

    Since the inception of RDF, the Webmasters are working to implement it and the big players are creating technologies based RDF like Open Graph Protocol from Facebook, OWL and SKOS. According to W3C, several tools and implementations are built based upon RDF till yet. Let us have a look how to implement the RDF in the above default HTML code. There are different vocabularies to implement the RDFa like FOAF from XMLNS.com, DC from Purl.org, and rdf.data-vocabulary.org from Google Data-Vocabulary.org. We will use Google’s Data-Vocabulary.org in this article. If you use any other

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xmlns:v=http://rdf.data-vocabulary.org/#> <head> <title>Dan Brown’s Latest Book</title> <meta name=”author” content=”Dan Brown” /> <link rel=”prev” href=”nextpage.html” /> <link rel=”next” href=”previouspage.html” /> </head> <body> <div> <h1><span typeof=”v:book”>The Lost Symbol</span></h1> <span><span property=”v:title”>Author</span>: <span typeof=”v:name”>Dan Brown</span> (born June 22, 1964) </span> <span>Fiction & Thriller Novel</span> <a href=”http://www.thelostsymbol.com” rel=”v:url”><span typeof=”v:book”>The Lost Symbol Website</span></a> <span>Reviewed by: <span property=”v:reviewer”>Mark</span>. Ratings: <span rel=”v:rating”> <span property=”v:value”>4.5</span>/ <span property=”v:best”>5</span> (Excellent) </span> </span> <span>It is a thriller set in Washington, D.C., after the events of The Da Vinci Code, and relies on Freemasonry for both its recurring theme and its major characters</span> </div> </body> </html>

    Problems with RDFa

    RDF was started with the XHTML 1.1 and 2.2. Both of these standards are discontinued now. The world is stepping up to HTML5, CSS3, and other latest standards. All the new versions of Browsers, CMSs, and even Mobile software are adopting HTML5. You cannot use xmlns and meta property attributes with HTML5 as the document will not be validated as HTML5 with these things. Today or tomorrow you have to switch over with the latest Web technologies to stay up-to-date in the market.

    Second problem is that there are multiple vocabularies available for RDFa. There is neither unique is no standard format nor common adaption of existing RDF technologies. In addition, there is no W3C-recommended way to embed RDFa in plain HTML. Webmasters often get confused which one to use or which one to left.

    Third problem: both HTML and RDF are different technologies, so you must know both of them to use RDF.

    Microformat

    Microformat is a semantic markup, which re-uses the existing HTML/XHTML code to show metadata. The implementation of Microformat is easier than that of RDF or RDFa. If you know HTML then you can simply add Microformats to your Website. Microformats.org provides the complete description and other tools to implement the Microformats.

    Let us have a look on the following implementation of Microformat.

    <html> <head> <title>Dan Brown’s Latest Book</title> </head> <body> <div class=”hreview”> <span class=”item vcard”> <h1 class=”item”>The Lost Symbol</h1> <span>Author: <span class=”fn”>Dan Brown</span> (born June 22, 1964) </span> <span class=”description”>Fiction & Thriller Novel</span> <a class=”url fn” href=”http://www.thelostsymbol.com” rel=”tag”>The Lost Symbol Website</a> </span> <span><span class=”reviewer vcard”>Reviewed by: <span class=”fn”>Mark<span>.</span> Ratings: <span class=”value”>4.5</span>/<span class=”best”>5 </span>(Excellent) </span> <span class=”summary”>It is a thriller set in Washington, D.C., after the events of The Da Vinci Code, and relies on Freemasonry for both its recurring theme and its major characters</span> </div> </body> </html>   Following is sample vCard created with Microformats <div> <img class=”photo” src=”http://upload.wikimedia.org/wikipedia/commons/8/8b/Dan_Brown_bookjacket_cropped.jpg” /> <strong class=”fn”>Dan Brown</strong> <span class=”title”>Author</span> at <span class=”org”>Simons & Chuster</span> <span> <span class=”street-address”>200 Main St</span> <span class=”locality”>Desertville</span>, <span class=”region”>AZ</span> <span class=”postal-code”>12345</span> <a class=”url fn” rel=”tag” href=”http://www.danbrown.com”>Official Website</a> </span> </div> Currently, Microformats.org provides definition for following Microformats:
    1. adr
    2. geo
    3. hAtom – syndicating RSS content
    4. hAudio
    5. hListing
    6. hMedia
    7. hNews
    8. hProduct
    9. hRecipe
    10. hReview
    11. rel-directory
    12. rel-enclosure
    13. rel-home
    14. rel-payment
    15. robots exclusion
    16. xFolk

    Problems with Microformats

    Several issues were detected and reported with Microformats. BBC Radio was using the hCalendar Microformat to add the start & end times, broadcasting channels etc. However, BBC found issues with hCalendar and dropped its usage. Accessibility issues are listed with hCalendar, and audio information issues with hAudio at Microformats.org. In addition, issues with hAtom and hProduct are also mentioned there. In addition, Microformats does not have any specification to replace the existing Semantic or meta-data format RDF & RDFa. It is just reusing the existing XHTML document. After seeing the issues, everyone was just moving backward to RDF or not considering the Microformats appropriate for their work.

    Microdata

    Microdata is the latest meta-data or semantic specification for HTML5 from WHATWG and W3C. It is considered as an integral part of HTML5 and use vocabularies from Schema.org. Recently, all three major search engines Google, Bing and Yahoo agreed to have a common specification Microdata for semantic markup show the rich snippets of Websites in their search engine result pages (SERPs). They’ve recommended using Microdata and shifting from previous meta-data format to this one.  Let us see how to implement the Microdata in the above mentioned default HTML code.

    <div itemscope itemtype=”http://schema.org/Book”> <h1><span itemprop=”name”>The Lost Symbol</span></h1> <span>Author: <span itemprop=”author”>Dan Brown</span> (born <span itemprop=”birthDate”>June 22, 1964</span>) </span> <span> Fiction & Thriller Novel</span> <a itemprop=”book” href=”http://www.thelostsymbol.com”>The Lost Symbol Website</a> <div itemprop=”reviews” itemscope itemtype=”http://schema.org/Review”> <span>Reviewed by: <span itemprop=”author”>Mark</span>. <div itemprop=”reviewRating” itemscope itemtype=”http://schema.org/Rating”> Ratings: <span itemprop=”ratingValue”>4.5</span> / <span itemprop=”bestRating”>5</span> (Excellent) </div><!—Closing reviewsRating–> </span> <span itemprop=”reviewBody”>It is a thriller set in Washington, D.C., after the events of The Da Vinci Code, and relies on Freemasonry for both its recurring theme and its major characters</span> </div><!—Closing reviews–> </div>

    Why not to use others?

    Most of the Content Management Systems are stepping towards HTML5 and CSS3. You cannot use the RDF or RDFa with HTML5 as you’ve to include xmlns protocol or vocabulary. In addition, Microformats are not sufficient to override all the classes of RDF/RDFa.

    Benefits of Microdata

    1. Microdata is a set of tags introduced with HTML5.
    2. It overrides (defines) all the classes of RDF, RDFa and Microformats.
    3. You know HTML then you can use both HTML5 & Microdata.
    4. Bing, Google and Yahoo have recognized Metadata as the standard format of semantic markup. They recommend using it and migrating from previous semantic format to Microdata.
    5. You just have to add a few more classes in the existing HTML code to implement Microdata.
    6. With Microdata, your Website will gain preference in the SERPs.
    7. Schema.org has all the definitions for Microdata classes and will work with major search engines to add more in its database.
    8. You can further extend the Microdata as per requirement.

    Conclusion

    The semantic markup is considered as a need for human being since the inception of HTML & CSS. Yes, we agree that previously RDF, RDFa and Microformats tried to help us in integrating the semantic markup. Now, there is another new format in the market. The same observation goes for HTML2, HTML3, HTML4, XHTML1, XHTML, CSS1 and CSS2. Why do you want to leave these formats and step ahead to adopt HTML5 and CSS3?

    Posted by Charu Garg Posted in: web standards Comments: 1