Days on the Moon

この記事は HTML アドベントカレンダーの 12 日目の分です。

以下の HTML コードを見て、なにか居心地の悪さを感じるでしょうか？

<h1>12日の日記</h1>
天気: 晴れ
<p>今日は動いた。</p>

筆者はどうも居心地の悪さを感じます。「天気: 晴れ」の部分が暗黙的な段落になっているのがその原因です。

HTML 標準において段落 (paragraph) とは、文や記述コンテンツの塊を表す概念です。p 要素は段落を明示しますが、p 要素だけでなく li 要素や div 要素なども段落を表現します。段落の内容が文章である必要はなく、「天気: 晴れ」といった行や住所表記、フォームの入力欄を含む行なども段落となります。

何らかの要素を使って段落を明示しないといけないという決まりはどこにもないのですが、HTML 4 Strict の時代は body 要素直下にブロック要素しかこれなかったこともあり、暗黙的な段落があると p 要素をつけたくなってしまいます。

HTML 4 時代を引きずっているという点では、form 要素の内容も気になります。HTML 4 Strict では form 要素直下にもブロック要素しかこれませんでした。以下のように form 要素直下に記述コンテンツ (phrasing content) が来ていると、

<form aciton="/search">
  <p><label>検索語: <input type="search" name="q"></label></p>
  <button type="submit">検索</button>
  <input type="hidden" name="token" value="deadbeef">
</form>

すべて p 要素で囲みたくなります。

<form aciton="/search">
  <p><label>検索語: <input type="search" name="q"></label></p>
  <p>
    <button type="submit">検索</button>
    <input type="hidden" name="token" value="deadbeef">
  </p>
</form>