If you've ever had to produce a sitemap for a client using tools like Visio or OmniGraffle, you know that it can be tedious to visual organize a complex hierarchy of pages. Having experienced this myself, I developed a simple and efficient way to make a sitemap through the benefits of standards-based HTML and CSS.

HTMLのリスト要素を視覚的に階層表示する「StyleMap」。
dl, dd, dt で定義したリストを次の図のように視覚的に階層表示することが可能です。



HTMLソースは次のようにシンプルかつクリーンなリスト。

 <dl id="sitemap">
  <dt class="root"><a href="#">Homepage</a></dt>
  <dd class="first">
   <dl>
    <dt><a href="aboutUs.html">aaaAbout Us</a></dt>
    <dd class="first"><a href="company.html">Company</a></dd>
    <dd><a href="staff.html">Staff</a></dd>
    <dd><a href="location.html">Location</a></dd>
    <dd class="last"><a href="careers.html">Careers</a></dd>
   </dl> 
  </dd>

検索クローラにも人間にも分かりやすいサイトマップが比較的、お手軽に作れてしまいますね。
これはかなり面白いです。