:aboutページのHTML構造1 ―― 不具合報告

昨日、公開されたばかり「プロフィール機能（id:hatenadiary:20041006#1097059958）」をさっそく試してみたのだが、なんか変な風に表示されてしまう（→id:mohri:about）。

具体的に言うと、2番目の見出しの「プロフィール」だけが罫線で囲まれて、そのプロフィールの内容が分離独立させられて、また罫線で囲まれる。これはオレがスタイルシートで

div.section {
  border-color: #aaa #fff #fff #aaa;
  border-style: solid;
  border-width: 1px;
}

を指定しているからで、たぶん同じようにdiv.sectionをborderで囲っている人のプロフィールは、同じように罫囲みによって2つに分断されているはずだと思った。

そこで、即レス風味で

プロフィールページの「div.section」が

<div class=”section”><h3 class=”subtitle”>プロフィール</h3></div>
<div class=”section”>……プロフィールの内容……</div>

と<h3>タグの直後でいったん閉じて生成されているんですが、おかしくないでしょうか？

とコメントを付けてみた（id:hatenadiary:20041006#c）のだが、その原因がいま分かった気がした。

というのは、プロフィール設定ページには

詳細プロフィールでは日記の記法を使うことができます。

と書かれており、つまりこの詳細プロフィールの中で「*」を使って、<h3>要素の見出しを立てることができるので、その前後をdiv.sectionで囲ってあるのだが、その前後の「一行紹介」とか「プロフィール」といった見出しも同様に<h3>要素なので、<h3>要素の中に<h3>要素が含まれるという構造になってしまっているから、div.sectionが連発されていておかしいのだと思った。

だから、改良点としては、「一行紹介」とか「プロフィール」といった見出しは<h2>要素に格上げする。ということで対応できるのではないかと思った。