<div>直下にインライン要素を置いてはいけない理由と<h1>の代替

あー、<div>要素の直下にインライン要素を配置するのがまずい理由がなんとなくわかってきました。

ようするに<div>ってのはあくまで汎用コンテナであって、内包する文書に何の意味も付与しないんですね。つまり意味合い的に<div>以外の要素に括られていないインライン要素は、<body>直下に置かれていることと同じで、<body>要素に直接インライン要素を含むことは禁止されているので、同じようなことになる<div>直下のインライン要素を置くことははダメ、というわけですね。

ただ、「<div>直下のインライン」という表現には疑問を覚えます。繰り返しになりますが、前述の考え方だと、<div>直下にインライン要素が置かれていることが問題なのではなくて、そのインライン要素が<div>以外に括られていないことが問題なのです。以下のような場合は問題ありません。

<form>
 <div>
  <label for="word">Search</label>
  <input type="text" id="word" />
  <input type="submit" value="search" />
 </div>
</form>

ということは、「<div>以外に包含されていないインライン要素は好ましくない」という言い方の方が語弊が少ない気がします。

ところで、このXHTMLですが、まさにこれが前のエントリーでW3Cも普通に入れちゃってるしと言ったW3Cのマークアップなのでした。しっかり意味を理解してから書くべきでした。ごめんねW3C。

さて、僕のマークアップの場合ですが、<div>以外の要素に内包されていない位置にインライン要素を置いてしまっているので、明らかにアウトです。となると、他の要素で括ることになるわけですが、前に書いたように<p>はParagraph（段落）ですから、この場合は違います。<ul>でリストというのも何か違う気がしますが、以下のようなマークアップだと幾分かマシ。

<ul id="header">
 <li class="heading" id="sitetitle">www.hekt.org</li>
 <li id="navigation">
  <dl>
   <dt>Menu</dt>
   <dd>
    <ul>
     <li><a href="about/">About</a></li>
     <li><a href="archive/">Archive</a></li>
    </ul>
   </dd>
  </dl>
 </li>
</ul>

煩雑！

……だけどほかに代替案が浮かばないし、レイアウトもトップページと統一できるので、これにしてみようかと思います。トップページと単独記事ページでマークアップが大きく違うのには若干の抵抗もありますが。

フッタのSearchとFeedsも<dl>でマークアップしたほうがよさそうですね。<h1>の存在するセクションの外に、いきなり<h2>というのもおかしいし。こっちはCSSに修正しなきゃならない箇所が多くて面倒くさいので、また今度。