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.