リスト項目内に見出し

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>

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