indexのマークアップとpermalinkのマークアップ

何らかのツールでテンプレートを元にページを生成する昨今、あまりページごとに大きくアウトラインの構造(変な表現だ)が変わることはない。枠を作って流し込む、枠を作って流し込む、というわけだ。ウェブではコンテンツは主に文章であるので、流動性はそれなりに高く、流しこむこと自体は多くの場合は問題にならないが、もうちょっと考えても良い所ではある。

典型的なウェブログのindexのページは以下のような構造になっていることだろう。

これから自身以外のarticle要素を取り除いたものがpermalinkのページ構造になる。

この時点でmain要素でグルーピングする意味はほとんどなくなる。合わせてpermalinkでは文書のプライマリ・コンテンツはこのarticle要素の内容であり、それが唯一であることを考えるとarticle要素を使うのは冗長だ。仕様のarticle要素の項でもこのことは触れられている。

かといってコード・レベルでの階層構造をフラットに変更するのはコスト(主にスタイリングにおいて)が高い。そこで論理構造を持ついくつかの要素をdiv要素に変更してやるのはどうだろうか。

article要素というセクションを作る要素がなくなるためheader要素も変更してやる必要がある。HTMLコードそのものとしてはほとんど変わりがなく、かつHTML5らしくなく見えるため、なんとなく美しくない気もするが、アウトライン構造はすっきりとする。

こうしてやるとロゴでh1要素を使っていなくてもUntitled Sectionとみなされなくなるのもポイントが高い。むしろそのためにひねり出した感がある。悪い解ではないはずなので、しばらくはこれで行ってみよう。