Web microformats

The meaning of the content of the website should be fully described by HTML tags. The web was rapidly expanding beyond academia, and new tags were needed to tag content ranging from business cards to recipes. Because browsers had problems styling new tags unknown to them, marking content in a roundabout way took place through special CSS class names. These practices are referred to as microformats, and they are the most successful method of increasing the semantics of a website.

It is not an elegant solution, but it is functional and respected. Microformats have their own specification, independent of the HTML specification. Although the role of some microformats is taken over by the new tags introduced in HTML5, the most widespread microformats will certainly remain with us for a long time.

• rel-bookmark
• rel-directory
• rel-enclosure
• rel-home
• rel-license
• rel-nofollow
• rel-tag
• hAtom
• hCalendar
• hCard
• hNews
• hProduct
• hRecepie
• hReview
• hSlice

Microformat can be created in several ways. I will mention the two most common. In either case, microformats have no impact on the browser’s rendering of the page. The first way is to assign a specific meaning to a specific CSS class name. The second method is created by redefining the possible values of the rel attribute in the <a> and <link> tags. According to the HTML specification, their possible values (alternate, appendix, chapter, contents, copyright, glossary, help, index, next, prev, section, start, stylesheet and subsection) are completely useless in practice. Microformats offer new values.

rel-bookmark

It indicates that the link leads to a page whose URL is expected to change over time.

rel-directory

It can be used, for example, in an online store on a product page, where it indicates a link to a page listing all products of the same category.

rel-enclosure

It can be used to mark an appendix to an article. For example, under an article about a new programming procedure, source codes can be marked as downloadable.

rel-home

Indicates the main page of the website. Although there is an unwritten rule that after clicking on the company logo, the user gets to the main page of the website, this is not a sufficient solution in terms of accessibility.

rel-license

A link with this value determines the license under which the content of the page can be distributed.

rel-nofollow

This is nothing new under the sun, but it is a microformat. It makes it clear that the ranking of the landing page should not be influenced by the referring page. It is mainly used in discussions and encyclopedias, so that they are not abused by a flood of unrelated links to artificially increase the ranking of linked pages.

rel-tag

Products are often sorted into categories, but it is harder to determine exactly which category they actually belong to, because in practice they are related to several topics. That’s why blogs use tags instead of categories. The label can be easily labeled not only graphically, but also in code:

The label name is the string after the last slash in the address. The prevailing opinion is that the name should be considered case-sensitive. It is to be encoded according to RFC 3986, which is specified in . NET method of Uri.EscapeDataString.

This microformat is very often implemented poorly. The first mistake is that it is also used in Tag Cloud. This is a list of the most commonly used labels on the blog and is placed next to each article. All articles on the blog are then labeled in it, which is certainly not the intention.

Another bad habit is the use of labels under an article excerpt. In fact, however, it belongs to the page with the article, not to the page with snippets. The only exception is a page with snippets formatted according to the hAtom microformat.

hAtom

For lovers of static sites that are advantageous in terms of server load, the hAtom format is perfect. Usually, a page has a content management system from which the content of the article is generated, crossroads, information channels, sitemaps, etc. However, it is difficult for the author of static pages to do what ASP.NET in these cases. This format adds semantics that make it possible to recognize individual items of the site directly with their date of publication. It is not necessary to introduce an external definition of these data in a separate file in RSS or Atom format. However, hAtom is not only designed for syndication, but to deliver semantics to make a web page as readable by machine as an Atom feed. The intended use is to tag articles on blogs.

Individual items are marked with class hentry. It has mandatory items entry-title, updated and author. Optional items are listed in the specification. All items can then be tagged with class hfeed. This makes sense especially at a crossroads, where a link to a table of contents with a rel-bookmark will definitely be used. The content itself will then have the same skeleton, but it will definitely be supplemented with content. It will be in the tag with the attribute entry-content.

hCalendar

A website that invites you to an interesting conference should have the time and place of the event coded according to some standard so that the event can be added to the attendee’s calendar with one click. This is what the microformat hCalendar is designed for.

The entire event must be wrapped in a tag with a class of vevent. Mandatory items are summary and dtstart. The date should be used as shown in the example. The start or end date of the event must be in ISO 8601 format.

hCard

There is often contact information on the website, which takes the form of a business card in addition to computers. hCard is a business card on the web – as easy to read by machine as a paper card for humans. hCard can be directly mapped to the vCard format (RFC 2426).

A contact is considered to be a tag that has a class of vcard and contains at least the name of a person or organization in a tag with a class of fn. An example is easier to understand than a detailed explanation of possible values. Therefore, I will just add that if only fn is mentioned, it is a contact of a person. If fn org is mentioned, it is a contact of the organization. It is not possible to use any value for the phone type. Individual types of phones are defined in RFC 2426 on page 14. The default type is VOICE, which corresponds to the Tel used in our country. Next, I'll refer you to the specification.

hNews

It is an extension of the hAtom format that is intended for news websites. The main expansion is the news source source-org, which is a mandatory item of every news item – a tag with class hentry.

hProduct

This microformat is used to label the product. It is intended to unify product descriptions and thus simplify the transfer of information about them between manufacturers and sellers. Its significance is perhaps sufficiently explained by the fact that one of the authors is Paul Lee of Google Product Search.

The only mandatory information is the name of the product in the tag with the attribute fn. Additional information is optional, even the price.

hRecepie

Even cooking recipes have their own microformat. Mandatory fields are fn for the name and ingredient for ingredients. The procedure is marked with class instructions. The duration can be marked by the class duraton and yield indicates the resulting quantity. Weight units are not expected, but it is enough to state how many people will be fed.

hReview

Many websites have reviews of movies, books, restaurants, or hotels. This microformat is intended to be an open standard to facilitate their dissemination. It can be used as part of hProduct, or separately. In this case, the object that is being reviewed is tagged with class fn. If it is an organization or company, class org is also applied. Interestingly, it is also possible to semantically express a rating of one to five by marking a number with class rating. The author of the review can be credited by inserting a contact in hCard format, only class reviewer is used instead of class vCard.

hSlice

Web Slice is a part of the page that contains data that changes frequently. Typically, for example, the weather or the number of medals won by Olympic teams. From the user’s point of view, it is actually a desktop gadget in Internet Explorer, but it cannot be dragged to the desktop. It is located in the favorites bar. Its text will be highlighted when an update occurs. After clicking on it, a window with a web page clipping will appear.

The cutting is marked with class hslice. Since there can be multiple clippings on one page, it is necessary to include the attribute id. Its content is in the tag with class entry-content. The name is indicated by class entry-title. The frequency of refresh is determined by the time interval in minutes under item ttl. Instead, you can also specify the expiration time of the information. Details can be found in the specification.