###################################

PROJECTS


// Prototypes, Experiments & Notes


###################################

Microformats Explained

What Are Microformats?

Microformats are simple HTML classes that add semantic meaning to your existing HTML. They don’t require special syntax or separate files—you just add class names to elements you already have. The key insight: your HTML can be both human-readable (what browsers render) and machine-readable (what feed readers and tools like Granary can parse).

Why Use Them?

Instead of maintaining a separate RSS/Atom feed file, you can mark up your HTML page with microformats. Tools like Granary can then read your page and convert it into various feed formats (RSS, JSON Feed, etc.) automatically. One source of truth, multiple outputs.

The Classes We’re Using

Container: h-feed

The h-feed class marks the container that holds a collection of items. Think of it as the <channel> in RSS or the root <feed> in Atom.

<main class="h-feed">
  <!-- feed items go here -->
</main>

Feed Properties: p-name, p-summary

These describe the feed itself:

Individual Items: h-entry

Each item in the feed is wrapped in an element with the h-entry class. This is like an <item> in RSS or an <entry> in Atom.

<div class="h-entry">
  <!-- entry content -->
</div>

Entry Properties

How It Works

  1. You write normal HTML with semantic classes added
  2. Browsers render it normally (the classes are just CSS hooks)
  3. Microformat parsers (like Granary) read the classes and extract structured data
  4. Granary converts your HTML page into RSS, JSON Feed, etc.

Example Structure

<main class="h-feed">
  <h2 class="p-name">Photo Feed</h2>
  <p class="p-summary">Description of the feed</p>
  
  <div class="h-entry">
    <img src="photo.jpg" class="u-photo" alt="Description" />
    <p class="p-name">Photo Title</p>
    <time class="dt-published" datetime="2024-01-15T10:00:00Z">Jan 15, 2024</time>
    <p class="p-content">Photo description or caption</p>
  </div>
  
  <!-- more h-entry items -->
</main>

Converting to RSS with Granary

Granary provides a hosted service that converts your microformats HTML pages into RSS feeds automatically. Simply add a link in your HTML <head> that points to Granary’s conversion service:

<link rel="alternate" type="application/rss+xml" title="RSS" 
  href="https://granary.io/url?input=html&output=rss&url=https://alabut.com/projects/microformats/photos/combined-feed/">

How it works:

Output formats:

Example RSS feed URL:

https://granary.io/url?input=html&output=rss&url=https://alabut.com/projects/microformats/photos/combined-feed/

Testing

You can test your microformats using:

Resources