Microformats

Anyone who uses Webmentions and wants to display them under their own posts relies on such data. Certain automations can also be refined by marking information that they otherwise wouldn’t be able to access.

Enriching Data

There are different ways to enrich our websites with data or make existing data more readable. For example, JSON-LD is hidden in the source code of a page and is often used by search engines.

Microformats are another, and particularly simple, method to make data more machine-readable.

These microformats appear as class names in HTML code and are therefore especially easy to integrate into existing pages. To mark a piece of information as a summary, we can add the following class to the HTML tag:

<p class="p-summary">This is a summary</p>

Structure and Hierarchy

In practice, things aren’t quite as simple as described above, since different class names can be used in different contexts. By themselves, they are not always unambiguous.

Let’s take the class p-name, which can be used in two different contexts:

<p class="h-card">
  <span class="p-name">Anna Blogs</span>
</p>

<article class="h-entry">
  <h1 class="p-name">The title of my blog post</h1>
</article>

In the first example, p-name indicates the name of the author. In the second, the same class indicates the name, or better, the title of the page.

So the context we define with h-card and h-entry is important, and hopefully makes clear why we need some structure to ensure that data can be read correctly.

Class Types

The previous examples already show that there are different types of class names. Class names for the name and summary start with p-, while the other two start with h-.

The term p-summary has nothing to do with the fact that it’s inside a <p> tag. Rather, these prefixes help us see (and parse) more quickly what type of information is being described.

There are five types in total:

1. h- types are at the top of the hierarchy and define what all subordinate class names belong to.
2. p- types mark plain text. Everything in the designated tag can be taken as text.
3. u- types mark a URL.
4. dt- types mark a date or time (date time).
5. e- types mark elements that themselves contain a hierarchy, where the entire hierarchy represents the content.

Some HTML tags can also contain a combination of these types. Let’s take the author’s name from the previous example and make it a link:

<a class="p-name u-url" href="https://example.org">Anna Blogs</a>

Here we’re saying that the tag contains both plain text (the name) and a URL.

Most parsers are clever enough to handle all possible combinations. For example, we could also declare the URL property like this:

<p class="u-url">https://example.org</p>

That’s syntactically questionable, but it’s possible in microformats.

Listing all possible classes here would go too far, but you can find them here:

microformats2 - Microformats Wiki

Examples

Instead, let’s look at some examples that most of us could directly integrate into our own websites.

Author Information

In the first example, we’ll mark ourselves as the author. We’ll start small and add more information step by step.

The smallest version contains only the author’s name:

<span class="h-card">Anna Blogs</span>

As you can see, this example contains only the type h-card, which can be used for people or organizations. Parsers are instructed to interpret the given information as plain text. So it corresponds to:

<div class="h-card">
    <p class="p-name">Anna Blogs</p>
</div>

In both cases, a program reading the page would interpret the following structure:

{
  "type": ["h-card"],
  "properties": {
    "name": ["Anna Blogs"]
  }
}

In the detailed version, we marked this explicitly. In the short version, the interpreter knows from h-card that the information refers to a person or organization and assumes that at least the name is included.

Interpreters should even be smart enough to handle this correctly:

<a class="h-card" href="http://example.com">Anna Blogs</a>

Here again it’s clear that this is a person or organization, and at least the name will be available. Since it’s also an anchor tag, a URL is included as well:

{
  "type": ["h-card"],
  "properties": {
    "name": ["Anna Blogs"],
    "url": ["http://example.com"]
  }
}

If we want to make this explicit, it would look like this:

<div class="h-card">
    <a class="p-name u-url" href="http://example.com">Anna Blogs</a>
</div>

The result is the same, but there’s no room for misinterpretation. If you want to be sure everything is read correctly, it’s best to be as detailed as possible.

Now let’s add the author’s photo and a way to contact her:

<div class="h-card">
    <a class="p-name u-url" href="https://example.org">Anna Blogs</a>
    <img class="u-photo" src="https://example.org/photo.png" alt="Anna’s Avatar" />
    <a class="u-email" href="mailto:anna.blogs@example.com">anna.blogs@example.com</a>,
</div>

We enriched our h-card with four different data points:

1. The author’s name with p-name
2. A link to her with u-url
3. Her avatar with u-photo
4. Her email with u-email

This again shows the different property types. The name, prefixed with p-, is plain text, while the others, prefixed with u-, are URLs.

We could add many more, such as birthday, gender, or job title. You can find all of these options here.

Blog Posts

In the next example, we want to mark up a blog post so that other sites can find all the key information. This is especially useful when we send Webmentions.

<article class="h-entry">
    <h1 class="p-name">Hello World</h1>
    <p class="p-summary">This is my first post.</p>
    <p class="e-content">This is the <strong>full</strong> text of my blog post.</p>
    <a class="u-url" href="https://example.org/hello-world">Permalink</a>
    <time class="dt-published" datetime="2025-08-22 09:00:00">08/22/2025</time>
</article>

Our main type here is h-entry, which is used for blog posts, notes, and similar content.

Within h-entry, we see already known properties:

• p-name marks the title of the post
• p-summary marks the summary
• e-content means everything inside is the full content
• u-url marks the post’s URL
• dt-published marks the publication date

Of course, we could structure it differently. The permalink could be part of the title:

<h1 class="p-name"><a class="u-url" href="https://example.org/hello-world">Hello World</a></h1>

We’re not tied to a fixed HTML structure. As long as the information is clearly marked and the hierarchy is correct, everything works.

One more word about e-content: in the example it only contains one sentence, but that’s not required. We should never use multiple p tags each with e-content. Instead, e-content assumes that everything inside the tag belongs to the content:

<div class="e-content">
    <p>This is the <strong>full</strong> text of my blog post</p>
    <p>It can have multiple paragraphs</p>
</div>

Webmentions

Before wrapping up, let’s briefly look at how to refine our Webmentions.

We can categorize Webmentions into different types, which is especially useful for short notes.

Suppose Anna has a “Notes” section where she posts different types of short entries:

• Short texts
• Replies to blog posts by other authors
• Bookmarks
• Likes

If Anna sends a Webmention without further specifying it, all of these posts are interpreted as replies to the linked post. But she can refine this with microformats.

Let’s say Anna reacts to various posts by Maria. These reactions are sent as Webmentions, since both sites support them.

To define the type of Webmention, she can add a microformat class to the link.

For a short reply to a blog post, Anna adds u-in-reply-to:

<a class="u-in-reply-to" href="https://marias.blog/post">https://marias.blog/post</a>

Now it’s clear that Anna replied to Maria’s post. Maria could then display this reply as a comment under her post.

If Anna only posted the URL as a bookmark, without a comment, she can use u-bookmark-of:

<a class="u-bookmark-of" href="https://marias.blog/post">https://marias.blog/post</a>

So the distinctions are clear. The possibilities include:

• u-like-of for a like
• u-bookmark-of for a bookmark
• u-in-reply-to for a reply
• u-repost-of to share a link

In all cases, however, it’s up to Maria whether she interprets this information correctly and displays it differently.

If you’re using a CMS and a suitable plugin, chances are good it will handle these distinctions automatically. My IndieConnector plugin does this, for example.

Combining

Finally, it’s worth mentioning that all of this information can be combined. A blog post will not only contain the information within h-entry, but likely also an h-card with author details. Blogs linked in the post could also be marked as likes or bookmarks.

There are many more types for events, products, invitations, geo data, reviews, and more. You can find all of them here:

microformats2 - Microformats Wiki

Of course, the topic isn’t entirely trivial, but it’s not as complicated as it might seem at first glance. Hopefully this has given you a good overview.

I consider marking up this kind of information important if we want to better interconnect our blogs and websites and free ourselves from large platforms.

Good luck implementing it!