Magnolia 4.5 reached end of life on June 30, 2016. This branch is no longer supported, see End-of-life policy.
Microformats are an open source data format standard built upon existing frameworks such as HTML, CSS and XML. Microformats allow the encoding and extraction of events, contact information, social relationships and many more. They are used in HTML pages through the use of microformat tags. Traditional HTML markup tags display information, but not what the information means. Microformats introduce meaning to information by attaching semantics to it. Microformat standards are developed and maintained by microfromats.org.
Using microformat markup has many advantages:
Example: Exporting a contact with the Firefox Operator add-on.
HTML standards allow for the embedding and encoding of semantics within the attributes of markup tags. Microformats take advantage of these standards by indicating the presence of metadata. Microformats mostly use the
class attribute, but
rev are also used.
In standard HTML typical contact details would be marked up like this:
When microformat properties based on the hCard standard are added, it becomes:
The code is wrapped in
class="vcard". This indicates that the nested classes are from hCard. The properties
fn (full name),
tel (telephone number) and
url are identified with specific class names that conform to the standard. Software can now identify, extract and transfer the information.
To test the examples, install the Firefox Operator add-on or a similar application.
hCard is a microformat for publishing contact details of people, companies, organizations, and places in HTML, Atom, RSS or arbitrary XML. The hCard microformat uses a 1:1 representation of vCard properties and values, identified using HTML classes and
This component template definition is at Templating Kit > Template Definitions >
/components/teasers/stkContact. The elements relevant to microformats are:
/parameters/divClasswhich assigns the div element a
classattribute with value
box card. This marks the component as a vcard for CSS styling.
templateScriptwhich references the
contact.ftlscript that renders the component.
contact.ftl script is available at Templating Kit > Templates >
/templating-kit/components/teasers. The hCard standard has two required properties
fn (full name) and
n (name) and a number of optional properties. The template script snippet below shows the use of the required
fn n and optional
organization-unit properties. If you view the entire script you will find many more such as
CSS styling is controlled by the
pop theme's main stylesheet,
styles.css, available in Templating Kit > Resources
templating-kit/themes/pop/css/styles.css. Search for "vcard". Here is a sample.
When a contact from the Data module is added and the component is rendered on a page, the resulting HTML markup is similar to the snippet below. View the source of the
demo-project/news-and-events page to HTML generated for the
stkContact component in the extras area.
The addition of the hCard properties allows browser add-ons, search engines and other parsing software to indentify the contact information. To test the capabilites:
The contact's address is displayed in a map.
hCalendar is a distributed calendaring and events microformat that uses a 1:1 representation of standard iCalendar VEVENT properties and values in semantic HTML.
The Page Header of the
stkEvent template is generated by a template script like all other header components in the STK. This component includes the hCalendar microformat properties that allow parsing software to extract the details of an event. In the screenshot below, note how the Firefox Operator add-on has identified the hCalendar properties and made the event information available for use in various ways.
stkEvent template definition is at Templating Kit > Templates >
infoBlockarea is specifically enabled because it is disabled in the prototype template. This is the only STK template that uses this area.
templateScriptproperty references the
infoblock.ftlscript that renders the header component.
infoblock.ftl script is in Templating Kit > Templates >
/templating-kit/pages/content/event. The hCalendar standard has two required properties:
dtstart (ISO date format) and
summary, and a number of optional properties. The script snippet below shows the use of the required properties and the optional
description property. View the entire script to see the ISO date formatting and use of the other optional properties.
The event header component has distinct styling that is controlled by the
pop theme's main style sheet,
styles.css, available in Templating Kit > Resources
When an event is added on a page the resulting HTML is similar to the snippet below. You can view the full source of the
vevent div class on the New Year's Eve page.
There are a number of other microformat standards and many are in development. Next we look at how to adapt the STK to support the
hRecipe standard. hRecipe is a standard for adding semantic markup to cooking recipes. It is supported by Google Recipe View. When the ingredients and preparation time are marked with standard elements, the Recipe View uses the information to show rich content and allows you to search for recipes by ingredients, for example.
hRecipe specfies two required properties
fn (recipe name) and
ingredient (one or more ingredients) and a number of optional properties. Our example also includes the optional properties:
yield (number of servings),
summary (introductory text). We have not used
tag but you can add them if you like.
Google also requires a
name property (
fn equivalent) and suggests additional properties. We have included
prepTime (preparation time),
cookTime (cooking time) and
duration equivalent) from their list.
In our example we modify the
stkTextImage component. We selected this components because:
TextImageModelmodel class is suitable and extends the
The first step is to create a new component definition in Templating Kit > Template Definitions.
components/content/stkTextImagenode and remane it
desciptionto a suitable description. The description is displayed below the component title in the selector dialog when an editor adds the component.
standard-templating-kit:components/content/stkRecipe. You will create this dialog below.
/templating-kit/components/content/recipe.ftl. You will create this script below.
titleto a suitable name. The component title is displayed in the selector dialog.
The next step is to create the dialog definition for the new component in Templating Kit > Dialog Definitions.
components/content/stkTextImagenode and rename it
tabText, create six
tabText, create three
ingredients(recipe ingredients) and
labelnodes of each field appropriately.
labelnode. The value is displayed in the dialog header.
The next step is to create the template script in Templating Kit > Templates.
templating-kit/components/contentnode and name it
Note the following about the code
ingredientsclass for the entire ingredients list. This is not quite right. The correct way would be to list each ingredient and its quantity separately. You could extend the example by storing common ingredients in the and allow the editor pick them with a multiselect control.
The next step is to make the component available to editors. You can configure site-wide availability in the site definition or make the component available in a specific template. Here we add the component to the
stkArticle template only.
/pages/stkArticle/areas/main/areas/content/availableComponents, add a content node and name it
stkRecipe, add a data node
idand set its value to
In Website add the Recipe component to any page based on the
Google provides a Rich Snippets Testing Tool to test complaince with their rich snippet standards. Once you have published the page to a live URL, test it in the tool.
Download and import the XML into the demo-project website and configuration.