リスト項目内に見出し

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>

これだとアウトラインがかなり派手になり好みではないので、自分で書くとしたら普通にリストのネストで書きそう。