ローカルナビのマークアップ

2014年7月2日 著

社内マークアップ部の活動について覚え書き。過去に参加した部活動はこちら：

• 社内マークアップ部、活動開始
• パンくずナビのマークアップ
• お知らせモジュールのマークアップ

でもって今回のお題はローカルナビ（ワイヤーフレーム中、白背景の領域に含まれる情報要素）：

多くのWebサイトでよく目にする情報要素であり、個人的にあまり迷うところは無かったです。

<aside>
<nav>
<h2><a href="URL">カテゴリ名（第2階層）</a></h2>
<ul>
<li><a href="URL">第3階層カテゴリ名</a></li>
<li><em>第3階層カテゴリ名（現在地）</em>
<ul>
<li><a href="URL">第4階層カテゴリ名</a></li>
<li><a href="URL">第4階層カテゴリ名</a></li>
<li><a href="URL">第4階層カテゴリ名</a></li>
</ul>
</li>
<li><a href="URL">第3階層カテゴリ名</a></li>
</ul>
</nav>
<ul>
<li><img src="path/to/image" alt="バナー"></li>
<li><img src="path/to/image" alt="バナー"></li>
</ul>
<section>
<h2>サブコンテンツ</h2>
<ul>
<li><a href="URL">リンクテキスト</a></li>
<li><a href="URL">リンクテキスト</a></li>
<li><a href="URL">リンクテキスト</a></li>
<li><a href="URL">リンクテキスト</a></li>
<li><a href="URL">リンクテキスト</a></li>
</ul>
</section>
</aside>

考えた際のプロセスとしては、以下のような流れ：

1. 全体をaside要素としてマークアップ（Webページ上にありながら、ヘッダーでもフッターでもメインコンテンツでも無い、という消去法的な発想から）
2. 最初に登場するリンクリストは、「カテゴリ名（第2階層）」を見出しとし、後続の第3、第4階層については順序無しリストの入れ子としてマークアップ
3. 現在地に相当する第3階層カテゴリ名については、自身へのリンクは紛らわしいのでNGとしつつem要素でマークアップ（なぜにem？というところはページングがお題だったときと共通）
4. リンクリストの下のバナー2点については、単純な順序無しリストと認識のうえ、そのように。
5. サブコンテンツ（謎）については、見出しと順序無しリストとしてマークアップ
6. 「カテゴリ名（第2階層）」「サブコンテンツ」の見出しレベルについては、メインコンテンツにh1要素が存在している想定で、2と定義
7. バナー2点は、その上下に位置するどちらの情報要素の一部にも含まれないことを明示すべく、h2要素とその後続はnav/section要素でマークアップ