What are microformats? | HTML
HTML microformats are a way of embedding structured data into HTML documents using special class names, attributes, and values. Microformats are designed to make it easier for machines to understand the content of a web page, by providing semantic information about the data on the page.
Types of Microformats
There are a number of different types of microformats, each with their own specific syntax and purpose. Some common examples include:
- hCard: Used to represent contact information, such as a person's name, email address, phone number, and so on.
- hCalendar: Used to represent calendar events, such as a concert or conference, including the date, time, location, and other details.
- hReview: Used to represent reviews of products or services, including the reviewer's name, the item being reviewed, and a rating.
How to use Microformats
To use microformats, you need to add the appropriate class names and attributes to the HTML markup on your page. For example, to use the hCard microformat, you would add the "vcard" class to a div or span element that contains the person's contact information. Within that element, you would use class names like "fn" for the person's full name, "email" for their email address, and so on.
Following is an example of how the hCard microformat might be used:
Browser ViewExample Microformats
h-card
h-event
Webinar: How to Use Microformats
Join us for a webinar on how to use microformats to improve your website.
2023-06-01T10:00:00-07:00
2023-06-01T11:00:00-07:00
Online
More informationIn this example, two microformats: h-card and h-event. The h-card microformat is used to mark up information about a person or organization. The h-event microformat is used to mark up information about an event.
The h-card microformat is represented by the .vcard class. The fn class is used to mark up the person or organization name, the org class is used to mark up the organization name, and the email class is used to mark up the email address.
The h-event microformat is represented by the .vevent class. The summary class is used to mark up the event name, the description class is used to mark up the event description, the dtstart class is used to mark up the event start date and time, the dtend class is used to mark up the event end date and time, and the location class is used to mark up the event location.
Finally, included a script that uses JSON-LD to mark up information about the organization, including its name, URL, logo, and contact information.
Note that in order for microformats to be useful, they need to be used consistently throughout a website, and preferably across multiple websites. The microformats should also be documented in a way that makes it clear how they are used and what each class represents.
Conclusion:
By using microformats like hCard, you can provide more semantic information about the data on your page, making it easier for search engines and other tools to understand and make use of that data. This can improve the accessibility, usability, and findability of your web content. Additionally, it can enable your content to be consumed by a wide range of tools and services, such as social media platforms, directory services, and mobile devices.