BTrem

Microformats in Front Matter

Vocabulary Name

This article demonstrates using microformats terms in front matter, which I started doing in order to self-document my website’s codebase.

My build tools/languages are 11ty, yaml, and nunjucks, but the techniques described below can be adapted to other software tools.


Microformats 2 vocabularies are defined by a root class name, which is an h- prefix followed by the vocabulary name. An article, or post entry, uses h-entry; a review uses h-review; recipe uses h-recipe; etc.

I use those same terms – entry, review, and recipe – in each post’s front matter to categorize it by type:

---
type: # entry, review, recipe, etc.
---

Then I insert type into the <body> element’s class attribute. The template extract looks like this:

<body class="h-{{ type }}">

Entry

In fact, the webpage you’re reading right now, “Microformats in Front Matter,” has its type set to entry:

---
type: entry
---

And the page’s opening <body> tag is

<body class="h-entry">

which makes the page an h-entry.

Entry Properties

The front matter for this post contains more than just type. Here’s an expanded extract:

---
type: entry
title: Microformats in Front Matter
date: 2025-01-21
---

Those additional items are inserted as properties of the h-entry. title is the entry’s name, denoted by the p-name class attribute; and date is its published date, marked by dt-published:

<body class="h-entry">

    <h1 class="p-name">Microformats in Front Matter</h1>

    <time class="dt-published" datetime="2025-01-21">
        January 21, 2025
    </time>

    <p>
        This article demonstrates using
        <a href="https://microformats.org/">microformats</a>
        properties and values  <!-- etc. -->

And while the point of this article is to demonstrate using microformats terms in front matter, I break the rule for name and published. More on that at the end of the article.

Recipe

If I change the post’s front matter type, the microformats root class name changes accordingly. For example, this front matter block

---
type: recipe
title: Giardiniera
date: 2021-10-14
---

creates a microformats h-recipe, with the same p-name and dt-published properties referred to above:

<body class="h-recipe">

    <h1 class="p-name">Giardiniera</h1>

    <time class="dt-published" datetime="2021-10-14">
        October 14, 2021
    </time>

    <p>
        You can chop vegetables into bite-size pieces
        to make finger food  <!-- etc. -->

Review

For a music recommendation, I set the type to review

---
type: review
title: “People Funny Boy”
date: 2021-11-20
---

which produces a microformats h-review:

<body class="h-review">

    <h1 class="p-item">“People Funny Boy”</h1>

    <time class="dt-published" datetime="2021-11-20">
        November 20, 2021
    </time>

    <p>
        In 1968, reggae pioneer Lee “Scratch” Perry
        launched his first record label  <!-- etc. -->

The date is again being used as the dt-published property, but the title has a different function. It appears as p-item, i.e., the item being reviewed.

Feed

type is not just for individual posts. It’s also useful for a collection of posts, aka a feed:

---
type: feed
title: BTrem Posts
---

Here’s the markup for that page:

<body class="h-feed">

    <h1 class="p-name">BTrem Posts</h1> <!-- the name of the feed-->

    <article class="h-entry">
        <h2 class="p-name">
            Microformats in Front Matter  <!-- the name of the h-entry -->
        </h2>
        <time class="dt-published" datetime="2025-01-21">
            January 21, 2025
        </time>
        <p>
            This article demonstrates using
            <a href="https://microformats.org/">microformats</a>
            properties and values
        </p>
    </article>

    <article class="h-recipe">
        <h2 class="p-name">
           Giardiniera  <!-- the name of the h-recipe -->
        </h2>
        <time class="dt-published" datetime="2021-10-14">
            October 14, 2021
        </time>
        <p>
            You can chop vegetables into bite-size pieces
            to make finger food
    </article>

    <article class="h-review">
        <h2 class="p-item">
            “People Funny Boy”  <!-- the name of the item in the h-review -->
        </h2>
        <time class="dt-published" datetime="2021-11-20">
            November 20, 2021
        </time>
        <p>
            In 1968, reggae pioneer Lee “Scratch” Perry
            launched his first record label
    </article>

    <!-- more articles -->

This page is a microformats h-feed, that is, a stream of h-entry, h-review, and h-recipe posts. Note that there are multiple p-name items. The first instance – appearing on the <h1> element – comes from the feed’s front matter and serves as the name of the feed itself. The others belong to the nested articles.

Microformats Properties in Front Matter

As I mentioned earlier, name doesn’t appear in my front matter. Neither does published for pages that have a published date. Why not? For starters, it’s conventional in website building tools to use title, not name, as the title of a post. So I go with the convention. And for the specific website tool that I use, date is hardcoded, making published impractical.

That said, I use other microformats properies in my front matter. In a followup article, I’ll demonstrate how I use h-card properties to mark up a post’s location.

This post is syndicated at IndieNews.

appendix

I do not explain the technical details of microformats in this article. Instead, I refer you to the following pages on the microformats wiki:

acknowledgements

Thanks to

for looking over drafts of this article.

webmentions

add your webmention

Mention, like, or reply to this article from your site using webmentions. And if you do, let me know. Enter the url of your page in the form below and send it to me.