Archive Links for Blogs

First published on 2008-01-19, updated on 2008-02-05, tweaked on 2009-08-02 and 2011-05-19.

What is the best way to provide links for a blog archive? A comparison table is at the end.

Wordpress can add <link> for each monthly archive. Many prominent bloggers do this.

Yahoo! User Interface Blog:
February 2006 to present.
December 2005 to present.
Jack Pickard:
December 2005 to present.
June 2005. (I included this one for the irony.)
Michael Gall:
September 2004.
Joe Clark, Toronto:
April 2004 to present.
Richard Ishida:
February 2004 to present.
Mozilla Links:
September 2003 to present.
Bruce Lawson:
September 2003.
Molly E. Holzschlag:
August 2003 to present.
Mark Baker:
June 2002 to present.
Hand Coding:
June 2002 to present.
Web Standards Project (WaSP):
August 1998 to present.
Green Methods:
Yearly from 1997 to 2005, then monthly from June 2005 to present.

Bruce Lawson’s blog during January 2008 is the example I’ll use.

 <link rel='archives' title='January 2008' href='' />
 <link rel='archives' title='December 2007' href='' />
 <link rel='archives' title='November 2007' href='' />
 <link rel='archives' title='October 2007' href='' />
 <link rel='archives' title='September 2007' href='' />
 <link rel='archives' title='August 2007' href='' />
 <link rel='archives' title='July 2007' href='' />
 <link rel='archives' title='June 2007' href='' />
 <link rel='archives' title='May 2007' href='' />
 <link rel='archives' title='April 2007' href='' />
 <link rel='archives' title='March 2007' href='' />
 <link rel='archives' title='February 2007' href='' />
 <link rel='archives' title='January 2007' href='' />
 <link rel='archives' title='December 2006' href='' />
 <link rel='archives' title='November 2006' href='' />
 <link rel='archives' title='October 2006' href='' />
 <link rel='archives' title='September 2006' href='' />
 <link rel='archives' title='August 2006' href='' />
 <link rel='archives' title='July 2006' href='' />
 <link rel='archives' title='June 2006' href='' />
 <link rel='archives' title='May 2006' href='' />
 <link rel='archives' title='April 2006' href='' />
 <link rel='archives' title='March 2006' href='' />
 <link rel='archives' title='February 2006' href='' />
 <link rel='archives' title='January 2006' href='' />
 <link rel='archives' title='December 2005' href='' />
 <link rel='archives' title='November 2005' href='' />
 <link rel='archives' title='October 2005' href='' />
 <link rel='archives' title='September 2005' href='' />
 <link rel='archives' title='August 2005' href='' />
 <link rel='archives' title='July 2005' href='' />
 <link rel='archives' title='June 2005' href='' />
 <link rel='archives' title='May 2005' href='' />
 <link rel='archives' title='April 2005' href='' />
 <link rel='archives' title='March 2005' href='' />
 <link rel='archives' title='February 2005' href='' />
 <link rel='archives' title='January 2005' href='' />
 <link rel='archives' title='December 2004' href='' />
 <link rel='archives' title='November 2004' href='' />
 <link rel='archives' title='October 2004' href='' />
 <link rel='archives' title='September 2004' href='' />
 <link rel='archives' title='August 2004' href='' />
 <link rel='archives' title='July 2004' href='' />
 <link rel='archives' title='June 2004' href='' />
 <link rel='archives' title='May 2004' href='' />
 <link rel='archives' title='April 2004' href='' />
 <link rel='archives' title='March 2004' href='' />
 <link rel='archives' title='February 2004' href='' />
 <link rel='archives' title='January 2004' href='' />
 <link rel='archives' title='December 2003' href='' />
 <link rel='archives' title='November 2003' href='' />
 <link rel='archives' title='October 2003' href='' />
 <link rel='archives' title='September 2003' href='' />

5,370 bytes of data in the <head> must be loaded before reaching the <body>. All for an extremely rarely used feature which users must discover, switch on and learn. Furthermore, their browser probably doesn’t have this feature in the first place.

<link rel='archives' title='January 2008' href='/2008/01/' />
<link rel='archives' title='December 2007' href='/2007/12/' />
<link rel='archives' title='November 2007' href='/2007/11/' />
<link rel='archives' title='October 2007' href='/2007/10/' />
<link rel='archives' title='September 2007' href='/2007/09/' />
<link rel='archives' title='August 2007' href='/2007/08/' />
<link rel='archives' title='July 2007' href='/2007/07/' />
<link rel='archives' title='June 2007' href='/2007/06/' />
<link rel='archives' title='May 2007' href='/2007/05/' />
<link rel='archives' title='April 2007' href='/2007/04/' />
<link rel='archives' title='March 2007' href='/2007/03/' />
<link rel='archives' title='February 2007' href='/2007/02/' />
<link rel='archives' title='January 2007' href='/2007/01/' />
<link rel='archives' title='December 2006' href='/2006/12/' />
<link rel='archives' title='November 2006' href='/2006/11/' />
<link rel='archives' title='October 2006' href='/2006/10/' />
<link rel='archives' title='September 2006' href='/2006/09/' />
<link rel='archives' title='August 2006' href='/2006/08/' />
<link rel='archives' title='July 2006' href='/2006/07/' />
<link rel='archives' title='June 2006' href='/2006/06/' />
<link rel='archives' title='May 2006' href='/2006/05/' />
<link rel='archives' title='April 2006' href='/2006/04/' />
<link rel='archives' title='March 2006' href='/2006/03/' />
<link rel='archives' title='February 2006' href='/2006/02/' />
<link rel='archives' title='January 2006' href='/2006/01/' />
<link rel='archives' title='December 2005' href='/2005/12/' />
<link rel='archives' title='November 2005' href='/2005/11/' />
<link rel='archives' title='October 2005' href='/2005/10/' />
<link rel='archives' title='September 2005' href='/2005/09/' />
<link rel='archives' title='August 2005' href='/2005/08/' />
<link rel='archives' title='July 2005' href='/2005/07/' />
<link rel='archives' title='June 2005' href='/2005/06/' />
<link rel='archives' title='May 2005' href='/2005/05/' />
<link rel='archives' title='April 2005' href='/2005/04/' />
<link rel='archives' title='March 2005' href='/2005/03/' />
<link rel='archives' title='February 2005' href='/2005/02/' />
<link rel='archives' title='January 2005' href='/2005/01/' />
<link rel='archives' title='December 2004' href='/2004/12/' />
<link rel='archives' title='November 2004' href='/2004/11/' />
<link rel='archives' title='October 2004' href='/2004/10/' />
<link rel='archives' title='September 2004' href='/2004/09/' />
<link rel='archives' title='August 2004' href='/2004/08/' />
<link rel='archives' title='July 2004' href='/2004/07/' />
<link rel='archives' title='June 2004' href='/2004/06/' />
<link rel='archives' title='May 2004' href='/2004/05/' />
<link rel='archives' title='April 2004' href='/2004/04/' />
<link rel='archives' title='March 2004' href='/2004/03/' />
<link rel='archives' title='February 2004' href='/2004/02/' />
<link rel='archives' title='January 2004' href='/2004/01/' />
<link rel='archives' title='December 2003' href='/2003/12/' />
<link rel='archives' title='November 2003' href='/2003/11/' />
<link rel='archives' title='October 2003' href='/2003/10/' />
<link rel='archives' title='September 2003' href='/2003/09/' />

This is now 3,301 bytes. It stays XML compatible

<a> Only

The left sidebar has an <a> for each <link>:

     <li><a href="" title="January 2008">January 2008</a></li>
 <li><a href="" title="December 2007">December 2007</a></li>
 <li><a href="" title="November 2007">November 2007</a></li>
 <li><a href="" title="October 2007">October 2007</a></li>
 <li><a href="" title="September 2007">September 2007</a></li>
 <li><a href="" title="August 2007">August 2007</a></li>
 <li><a href="" title="July 2007">July 2007</a></li>
 <li><a href="" title="June 2007">June 2007</a></li>
 <li><a href="" title="May 2007">May 2007</a></li>
 <li><a href="" title="April 2007">April 2007</a></li>
 <li><a href="" title="March 2007">March 2007</a></li>
 <li><a href="" title="February 2007">February 2007</a></li>
 <li><a href="" title="January 2007">January 2007</a></li>
 <li><a href="" title="December 2006">December 2006</a></li>
 <li><a href="" title="November 2006">November 2006</a></li>
 <li><a href="" title="October 2006">October 2006</a></li>
 <li><a href="" title="September 2006">September 2006</a></li>
 <li><a href="" title="August 2006">August 2006</a></li>
 <li><a href="" title="July 2006">July 2006</a></li>
 <li><a href="" title="June 2006">June 2006</a></li>
 <li><a href="" title="May 2006">May 2006</a></li>
 <li><a href="" title="April 2006">April 2006</a></li>
 <li><a href="" title="March 2006">March 2006</a></li>
 <li><a href="" title="February 2006">February 2006</a></li>
 <li><a href="" title="January 2006">January 2006</a></li>
 <li><a href="" title="December 2005">December 2005</a></li>
 <li><a href="" title="November 2005">November 2005</a></li>
 <li><a href="" title="October 2005">October 2005</a></li>
 <li><a href="" title="September 2005">September 2005</a></li>
 <li><a href="" title="August 2005">August 2005</a></li>
 <li><a href="" title="July 2005">July 2005</a></li>
 <li><a href="" title="June 2005">June 2005</a></li>
 <li><a href="" title="May 2005">May 2005</a></li>
 <li><a href="" title="April 2005">April 2005</a></li>
 <li><a href="" title="March 2005">March 2005</a></li>
 <li><a href="" title="February 2005">February 2005</a></li>
 <li><a href="" title="January 2005">January 2005</a></li>
 <li><a href="" title="December 2004">December 2004</a></li>
 <li><a href="" title="November 2004">November 2004</a></li>
 <li><a href="" title="October 2004">October 2004</a></li>
 <li><a href="" title="September 2004">September 2004</a></li>
 <li><a href="" title="August 2004">August 2004</a></li>
 <li><a href="" title="July 2004">July 2004</a></li>
 <li><a href="" title="June 2004">June 2004</a></li>
 <li><a href="" title="May 2004">May 2004</a></li>
 <li><a href="" title="April 2004">April 2004</a></li>
 <li><a href="" title="March 2004">March 2004</a></li>
 <li><a href="" title="February 2004">February 2004</a></li>
 <li><a href="" title="January 2004">January 2004</a></li>
 <li><a href="" title="December 2003">December 2003</a></li>
 <li><a href="" title="November 2003">November 2003</a></li>
 <li><a href="" title="October 2003">October 2003</a></li>
 <li><a href="" title="September 2003">September 2003</a></li>

At 5,641 bytes is slightly more than the 5,370 bytes of <link> code. But the page uses both, a total of 11,011 bytes.

Optimal <a>

 <li><a href="/2008/01/" rel="archives">January 2008</a></li>
 <li><a href="/2007/12/" rel="archives">December 2007</a></li>
 <li><a href="/2007/11/" rel="archives">November 2007</a></li>
 <li><a href="/2007/10/" rel="archives">October 2007</a></li>
 <li><a href="/2007/09/" rel="archives">September 2007</a></li>
 <li><a href="/2007/08/" rel="archives">August 2007</a></li>
 <li><a href="/2007/07/" rel="archives">July 2007</a></li>
 <li><a href="/2007/06/" rel="archives">June 2007</a></li>
 <li><a href="/2007/05/" rel="archives">May 2007</a></li>
 <li><a href="/2007/04/" rel="archives">April 2007</a></li>
 <li><a href="/2007/03/" rel="archives">March 2007</a></li>
 <li><a href="/2007/02/" rel="archives">February 2007</a></li>
 <li><a href="/2007/01/" rel="archives">January 2007</a></li>
 <li><a href="/2006/12/" rel="archives">December 2006</a></li>
 <li><a href="/2006/11/" rel="archives">November 2006</a></li>
 <li><a href="/2006/10/" rel="archives">October 2006</a></li>
 <li><a href="/2006/09/" rel="archives">September 2006</a></li>
 <li><a href="/2006/08/" rel="archives">August 2006</a></li>
 <li><a href="/2006/07/" rel="archives">July 2006</a></li>
 <li><a href="/2006/06/" rel="archives">June 2006</a></li>
 <li><a href="/2006/05/" rel="archives">May 2006</a></li>
 <li><a href="/2006/04/" rel="archives">April 2006</a></li>
 <li><a href="/2006/03/" rel="archives">March 2006</a></li>
 <li><a href="/2006/02/" rel="archives">February 2006</a></li>
 <li><a href="/2006/01/" rel="archives">January 2006</a></li>
 <li><a href="/2005/12/" rel="archives">December 2005</a></li>
 <li><a href="/2005/11/" rel="archives">November 2005</a></li>
 <li><a href="/2005/10/" rel="archives">October 2005</a></li>
 <li><a href="/2005/09/" rel="archives">September 2005</a></li>
 <li><a href="/2005/08/" rel="archives">August 2005</a></li>
 <li><a href="/2005/07/" rel="archives">July 2005</a></li>
 <li><a href="/2005/06/" rel="archives">June 2005</a></li>
 <li><a href="/2005/05/" rel="archives">May 2005</a></li>
 <li><a href="/2005/04/" rel="archives">April 2005</a></li>
 <li><a href="/2005/03/" rel="archives">March 2005</a></li>
 <li><a href="/2005/02/" rel="archives">February 2005</a></li>
 <li><a href="/2005/01/" rel="archives">January 2005</a></li>
 <li><a href="/2004/12/" rel="archives">December 2004</a></li>
 <li><a href="/2004/11/" rel="archives">November 2004</a></li>
 <li><a href="/2004/10/" rel="archives">October 2004</a></li>
 <li><a href="/2004/09/" rel="archives">September 2004</a></li>
 <li><a href="/2004/08/" rel="archives">August 2004</a></li>
 <li><a href="/2004/07/" rel="archives">July 2004</a></li>
 <li><a href="/2004/06/" rel="archives">June 2004</a></li>
 <li><a href="/2004/05/" rel="archives">May 2004</a></li>
 <li><a href="/2004/04/" rel="archives">April 2004</a></li>
 <li><a href="/2004/03/" rel="archives">March 2004</a></li>
 <li><a href="/2004/02/" rel="archives">February 2004</a></li>
 <li><a href="/2004/01/" rel="archives">January 2004</a></li>
 <li><a href="/2003/12/" rel="archives">December 2003</a></li>
 <li><a href="/2003/11/" rel="archives">November 2003</a></li>
 <li><a href="/2003/10/" rel="archives">October 2003</a></li>
 <li><a href="/2003/09/" rel="archives">September 2003</a></li>

3,333 bytes is the end result. It has reduced by 41% from the original 5,641 bytes, despite adding rel values and staying XML compatible.

Removing the <link> code and applying the new <a> code makes filesize plummet from 11,011 bytes to 3,333 bytes. 70% less filesize for exactly the same semantics.

Optimal <a> Minus rel

<a> is available to everyone. A special UI triggered by rel is unnecessary. Removing rel reduces the markup to 2,538 bytes, 77% less.

Optimal <a> in HTML4

For text/html documents conforming to HTML4, each </li> and the speechmarks for rel can be removed. This reduces the markup to 2,962 bytes, 11% less than the equivalent XHTML sample which took 3,333 bytes.

Optimal <a> in HTML4 Minus rel

Removing rel reduces the markup to 2,273 bytes, 79% less than the original.

Optimal <a> in HTML5

In addition to the HTML4 savings, speechmarks around these href values are currently optional in HTML5. Removing them reduces the markup to 2,856 bytes, 14% less than the equivalent XHTML example.

Optimal <a> in HTML5 Minus Whitespace

Removing whitespace reduces readability. It also reduces filesize:

<h2>Archives</h2><ul><li><a href=/2008/01/ rel=archives>January 2008</a><li><a href=/2007/12/ rel=archives>December 2007</a><li><a href=/2007/11/ rel=archives>November 2007</a><li><a href=/2007/10/ rel=archives>October 2007</a><li><a href=/2007/09/ rel=archives>September 2007</a><li><a href=/2007/08/ rel=archives>August 2007</a><li><a href=/2007/07/ rel=archives>July 2007</a><li><a href=/2007/06/ rel=archives>June 2007</a><li><a href=/2007/05/ rel=archives>May 2007</a><li><a href=/2007/04/ rel=archives>April 2007</a><li><a href=/2007/03/ rel=archives>March 2007</a><li><a href=/2007/02/ rel=archives>February 2007</a><li><a href=/2007/01/ rel=archives>January 2007</a><li><a href=/2006/12/ rel=archives>December 2006</a><li><a href=/2006/11/ rel=archives>November 2006</a><li><a href=/2006/10/ rel=archives>October 2006</a><li><a href=/2006/09/ rel=archives>September 2006</a><li><a href=/2006/08/ rel=archives>August 2006</a><li><a href=/2006/07/ rel=archives>July 2006</a><li><a href=/2006/06/ rel=archives>June 2006</a><li><a href=/2006/05/ rel=archives>May 2006</a><li><a href=/2006/04/ rel=archives>April 2006</a><li><a href=/2006/03/ rel=archives>March 2006</a><li><a href=/2006/02/ rel=archives>February 2006</a><li><a href=/2006/01/ rel=archives>January 2006</a><li><a href=/2005/12/ rel=archives>December 2005</a><li><a href=/2005/11/ rel=archives>November 2005</a><li><a href=/2005/10/ rel=archives>October 2005</a><li><a href=/2005/09/ rel=archives>September 2005</a><li><a href=/2005/08/ rel=archives>August 2005</a><li><a href=/2005/07/ rel=archives>July 2005</a><li><a href=/2005/06/ rel=archives>June 2005</a><li><a href=/2005/05/ rel=archives>May 2005</a><li><a href=/2005/04/ rel=archives>April 2005</a><li><a href=/2005/03/ rel=archives>March 2005</a><li><a href=/2005/02/ rel=archives>February 2005</a><li><a href=/2005/01/ rel=archives>January 2005</a><li><a href=/2004/12/ rel=archives>December 2004</a><li><a href=/2004/11/ rel=archives>November 2004</a><li><a href=/2004/10/ rel=archives>October 2004</a><li><a href=/2004/09/ rel=archives>September 2004</a><li><a href=/2004/08/ rel=archives>August 2004</a><li><a href=/2004/07/ rel=archives>July 2004</a><li><a href=/2004/06/ rel=archives>June 2004</a><li><a href=/2004/05/ rel=archives>May 2004</a><li><a href=/2004/04/ rel=archives>April 2004</a><li><a href=/2004/03/ rel=archives>March 2004</a><li><a href=/2004/02/ rel=archives>February 2004</a><li><a href=/2004/01/ rel=archives>January 2004</a><li><a href=/2003/12/ rel=archives>December 2003</a><li><a href=/2003/11/ rel=archives>November 2003</a><li><a href=/2003/10/ rel=archives>October 2003</a><li><a href=/2003/09/ rel=archives>September 2003</a></ul>

This is 2,693 bytes. Using it takes 76% less filesize than the original.

Single <a>

<p><a href="/archives" rel="archives">Blog Archives</a></p>

At just 78 bytes, this is 99% less markup than the original 11,011 bytes.

This is the most radical approach, with big gains and big losses.


List the most recent year, followed by a link to the archives page:

 <li><a href="/2008/01/" rel="archives">January 2008</a></li>
 <li><a href="/2007/12/" rel="archives">December 2007</a></li>
 <li><a href="/2007/11/" rel="archives">November 2007</a></li>
 <li><a href="/2007/10/" rel="archives">October 2007</a></li>
 <li><a href="/2007/09/" rel="archives">September 2007</a></li>
 <li><a href="/2007/08/" rel="archives">August 2007</a></li>
 <li><a href="/2007/07/" rel="archives">July 2007</a></li>
 <li><a href="/2007/06/" rel="archives">June 2007</a></li>
 <li><a href="/2007/05/" rel="archives">May 2007</a></li>
 <li><a href="/2007/04/" rel="archives">April 2007</a></li>
 <li><a href="/2007/03/" rel="archives">March 2007</a></li>
 <li><a href="/2007/02/" rel="archives">February 2007</a></li>
 <li><a href="/2007/01/" rel="archives">January 2007</a></li>
 <li><a href="/archives" rel="archives">Blog Archives</a></li>

This uses 903 bytes, 92% less than the original 11,011 bytes.

Mixture Minus rel

693 bytes is the result, 94% less than the original 11,011 bytes.

Mixture Minus rel in HTML4

The techniques in Optimal <a> in HTML4 allow 623 bytes, 94% less than the original 11,011 bytes.

Mixture Minus rel in HTML5 Minus Whitespace

HTML5 optimisations allow 594 bytes, 95% less than the original 11,011 bytes.


There are many ways to provide archive pages. This table shows them in order of decreasing filesize.

Comparison of Markup for Blog Archive Links
Bytes Saving Special UI? Extra Page? XML? Readable?
<link> and <a> (Original) 11,011 0% Optional No Yes Yes
<a> Only 5,641 49% No No Yes Yes
<link> Only 5,370 51% Yes No Yes Yes
Optimal <link> 3,301 70% Yes No Yes Yes
Optimal <a> 3,333 70% Optional No Yes Yes
Optimal <a> in HTML4 2,962 73% Optional No No Yes
Optimal <a> in HTML5 2,856 74% Optional No No Yes
Optimal <a> in HTML5 Minus Whitespace 2,693 76% Optional No No No
Optimal <a> Minus rel 2,538 77% No No Yes Yes
Optimal <a> in HTML4 Minus rel 2,273 79% No No No Yes
Mixture 903 92% Optional Yes Yes Yes
Mixture Minus rel 693 94% No Yes Yes Yes
Mixture Minus rel in HTML4 623 94% No Yes No Yes
Mixture Minus rel in HTML5 Minus Whitespace 594 95% No Yes No No
Single <a> 78 99% Optional Yes Yes Yes

This table helps choose the best technique for a given set of requirements. Say you want:

2 options meet those requirements:

Optimal <a> Minus rel takes 77% less markup than the original, so it wins.