Daniel Pietzsch

Adding h-entry Microformat markup to this blog

I’ve just added h-entry markup to all the posts on this blog. I’ll just quote the IndieWebCamp website as to “why”:

Why? This will allow other people’s software to easily read and understand your content. This is useful for a variety of things like recognizing comments, likes, reposts, and displaying reply-contexts for your posts.

For example, if I sent a webmention to someone else’s site/URL¹, this other site can easily parse my post and could – for example – display it as a comment.
Another use case that I like, is that the Moncole reader can now parse and display my content.

A small markup roadblock

The philosophy of Microformats2 is actually to be able to add compatibility by only adding class names to existing elements:

The best way to use microformats-2 is with as little additional markup as possible. This keeps your code cleaner, improves its maintainability, and thus the quality and longevity of your microformats.

One big advantage of microformats-2 over previous microformats (and others) is the ability to add one class name to an existing element to create a structured item.

So you shouldn’t (necessarily) need to add, remove or alter your existing HTML tags. However, I found this to not be doable in my case.
For texts posts for example, I had a structure like this:

<article>
  <h2>My title</h2>
  Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
</article>

Marking up the article and h2 elements wasn’t a problem: I just had to add class="h-entry" and class="p-name" respectively. However, I didn’t have a HTML-tag wrapping the content, so there was no tag to put on the extra class="e-content". Hence – with feedback and approval from Jeremy – I had to add an extra div to make this work for me. Here’s the new (simplified) markup for a text post:

<article class="h-entry">
  <h2 class="p-name">My title</h2>
  <div class="e-content">
  Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
  </div>
</article>

Although I didn’t like having to add an extra div, it’s not a big deal really. I guess I simply found an unfortunate usecase² that doesn’t quite align with the Microformats2 philosophy of “we do it with class”.