Microformat facts for kids

A Microformat is a special way to add hidden labels to information on websites. Imagine you have a phone number or an address written on a webpage. Humans can easily read it, but computers sometimes find it hard to understand what that text means.

Microformats help computers understand this information better. They use existing parts of HTML (the language websites are built with) to mark up specific details. This makes it easier for computer programs, like those in your web browser or on your phone, to find and use this information. For example, a program could automatically add a phone number to your contacts list or show an address on a map.

What Are Microformats?

Think of a website as a book. The words are there, but sometimes you want to quickly find all the names of people or all the dates mentioned. Microformats are like adding tiny, invisible sticky notes to specific words in the book. These sticky notes tell a computer, "Hey, this word here is a person's name!" or "This number is a phone number!"

This is done by using special names called "class names" within the HTML code. These class names don't change how the website looks to you, but they give extra meaning to the information for computers.

How Microformats Work

When you look at a webpage, you see text, images, and links. Behind the scenes, this page is built using code like HTML. Microformats add extra details to this code.

For example, if a website lists a person's name, company, and phone number, a microformat would add special labels to each piece of information. This way, a smart program can easily tell that "Joe Doe" is a name, "Example Company" is a company, and "555-1234" is a phone number.

An Example: Contact Information

Let's look at how contact information might appear on a website without any special labels:

 <div>
   <div>Joe Doe</div>
   <div>The Example Company</div>
   <div>604-555-1234</div>
   <a href="http://example.com/">http://example.com/</a>
 </div>

This looks normal to us. But a computer just sees a bunch of text inside `

 <div class="vcard">
   <div class="fn">Joe Doe</div>
   <div class="org">The Example Company</div>
   <div class="tel">604-555-1234</div>
   <a class="url" href="http://example.com/">http://example.com/</a>
 </div>