Published on 03 January 2026.
A while ago I made HTML Element of the Day, a site that selects a HTML element every day to be designated the “HTML element of the day.”
When I built this project, I decided that I wanted to offer both a web page and a web feed to which people could subscribe. Rather than build an RSS feed for the project, I decided to mark up the page with microformats. microformats are classes you add to your HTML that have semantic meaning.
HTML Element of the Day is published as a h-feed. Every entry on the website is a h-entry. Here is a rough outline of the markup used:
<ul class="h-feed">
<li class="h-entry" id="2026-01-03">
<a class="u-url" href="#2026-01-03">
<date class="p-pu...Published on 03 January 2026.
A while ago I made HTML Element of the Day, a site that selects a HTML element every day to be designated the “HTML element of the day.”
When I built this project, I decided that I wanted to offer both a web page and a web feed to which people could subscribe. Rather than build an RSS feed for the project, I decided to mark up the page with microformats. microformats are classes you add to your HTML that have semantic meaning.
HTML Element of the Day is published as a h-feed. Every entry on the website is a h-entry. Here is a rough outline of the markup used:
<ul class="h-feed">
<li class="h-entry" id="2026-01-03">
<a class="u-url" href="#2026-01-03">
<date class="p-published" value="2026-01-03">2026-01-03</date>
</a>
<p class="e-content">The HTML element of the day is <input>.</p></li>
...
</ul>
This markup lets me declare a list of entries. Each entry has a URL – a HTML fragment on the page in this case – a published date, and some content. You can read the h-feed and h-entry documentation to see what properties are supported.
A web reader that understands microformats like Artemis or Monocle can work with the HTML page as it is and parse its contents to show a list of entries in a user’s web reader:
ALT
The HTML Element of the Day page displayed as a feed preview in Artemis. Entries from the web page are listed in the feed preview.
As a fallback, this page has a rel=alternate tag that uses Granary to convert the h-feed into other another format. Here is an example that takes the page and converts its feed contents to RSS:
<link rel="alternate" href="https://granary.io/url?input=html&output=rss&url=https://random.jamesg.blog/html.php" type="application/rss+xml">
This rel=alternate tag ensures any reader that understands RSS can read the page.
Tantek uses this pattern for his daylists page which lists the names of daylists that have been generated for him on Spotify.
In both the HTML Element of the Day and Tantek’s daylists example, h-feed is being used to turn a HTML list into a web feed. Indeed, there is nothing to say that a web feed must be a list of blog posts or notes.