2つ前のエントリで書いてしまったウェブページ全体の見出しをli要素にぶち込むという案に関してTwitterで言及されていた。これについてはエントリを書いた後ちょっと考えたので、返答がてら(簡単にリプライしといたけど)エントリにする。
まずTwitterでの言及について。HTML 4.01においてdt要素は、
<!ELEMENT DT - O (%inline;)* -- definition term -->
なので、インライン要素しか含めることが出来ない。つまり、そもそも見出しを入れることは許可されていない。対してli要素だと、
<!ELEMENT LI - O (%flow;)* -- list item -->
なので、だいたい何でも入れることが出来る。つまり文法的な話だとli要素ならOKで、dt要素だとよろしくないとなる。これはHTML5でも似たような話で、dt要素の内容モデルはフレーズ、li要素はフローのため結論は同じになる。でも、これはあくまでも文法上問題ないというだけのこと。
では、アウトライン的におかしいのかというとそうでもない。HTML 4.01では見出し要素だけがアウトラインを作ることができるので、h1要素がどこにあってもアウトラインは問題なく構築される。しかし、これもあくまでも仕様上そうなっているというだけで、深い所に見出しを置いてしまうとHTML文書のツリー構造と文書のアウトラインのツリー構造が大きく剥離してしまうだろう。
また、HTML5ではセクションという概念があるので話にならない。ナビゲーションに見出しを混ぜ込んだものをそのまま変換すると、
<nav>
<ul>
<li><h1><a href="http://hail2u.net/blog/">Weblog</a></h1></li>
<li><a href="http://hail2u.net/documents/">Documents</a></li>
<li><a href="http://hail2u.net/archives/">Archives</a></li>
<li><a href="http://hail2u.net/about">About</a></li>
</ul>
</nav>となり、ウェブページ全体の見出しとしてマークアップしたものはnav要素の見出しになってしまう。これはない。
ということで、ウェブページ全体の見出しをナビゲーションのli要素にぶち込むという案は、HTML5では「意図したようにアウトラインが構築されないHTML文書」になるので、今後のことを考えるとよろしくないという結論になった。
もちろん単に見出し要素をli要素に入れるということ自体は文法的に問題ないので、例えばメガメニューなんかでは使っても良いと思う。
<nav>
<ul>
<li>Windows
<nav>
<h1>Windows</h1>
<ul>
<li>Windows 製品ホーム</li>
<li>Windows 7</li>
...
</ul>
</nav>
<nav>
<h1>Windows Live</h1>
<ul>
<li>Windows Live 製品ホーム</li>
<li>Windows Live Hotmail</li>
...
</ul>
</nav>
</li>
<li>Office
<nav>
<h1>デスクトップ アプリケーション</h1>
<ul>
<li>Office.com (製品)</li>
<li>Office 2010</li>
...
</ul>
</nav>
<nav>
<h1>サービス / ソリューション</h1>
<ul>
<li>Office Web Apps</li>
<li>Office Live</li>
</ul>
</nav>
</li>
...
</ul>
</nav>これだとアウトラインがかなり派手になり好みではないので、自分で書くとしたら普通にリストのネストで書きそう。