February 4, 2004 · Dan Cederholm

SimpleQuiz › Part XII: Breadcrumbs

Breadcrumb navigation. This is an interesting topic, sent in by Thomas Baekdal. Breadcrumb navigation is commonly used as a method for showing the user where they are within the structure of a site -- and giving them an easy way of getting back.

Marking up a breadcrumb trail of links could be handled a variety of ways -- and I'm interested in hearing people's thoughts on how they're best presented structurally, keeping in mind an unstyled version as well.

In addition to the four methods below, I'm sure there are countless other scenarios. Don't be afraid to suggest a "method E".

Q: Which is the best method for marking up a breadcrumb trail of links?

  1. <p>You are here:
      <a href="/">Home</a> &gt;
      <a href="/articles/">Articles</a>
    </p>
  2. <p>You are here:</p>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/articles/">Articles</a></li>
    </ul>
  3. <dl>
      <dt>You are here:</dt>
      <dd><a href="/">Home</a></dd>
      <dd><a href="/articles/">Articles</a></dd>
    </dl>
  4. <dl>
      <dt>You are here:</dt>
      <dd>
        <a href="/">Home</a> &gt;
        <a href="/articles/">Articles</a>
      </dd>
    </dl>