タイトルのマークアップに関して質問です

質問

タイトルをマークアップするとき、階層が上のものからh1、h2、h3…とマークアップするそうですが、
たとえば、用語を解説する際などに、

ゆうきイーエルディスプレイ
有機ELディスプレイ

のように、先にふりがなを持ってきたい場合があります。
このふりがなは、メインである「有機ELディスプレイ」よりも小さいサイズで表示したいのですが、

＜ｈ３＞ゆうきイーエルディスプレイ＜／ｈ３＞
＜ｈ２＞有機ELディスプレイ＜／ｈ２＞

などとするのは、構造上問題があるとおもいます。

このような場合、どのようにマークアップするのが普通なのでしょうか？

回答No.1

auty · ベストアンサー

---------------------------------------------------------------------------
<dl>
　<dt>ゆうきイーエルディスプレイ</dt><dd><h2>有機ELディスプレイ</h2></dd>
　<dt> Second definition</dt><dd><h2>Second explanation</h2></dd>
</dl>
---------------------------------------------------------------------------
などはどうでしょうか。

ちなみに、<dl></dl>はDefinition List（定義リスト）です。

・　あえて<h2>を使ってみました。

・　<font size="5">文字</font>　や
　　<font size="-2">文字</font>　もあります。

・　また、本格的にCSSを利用する方法もあります。

回答No.3

auty

［追記］

　_{ゆうきイーエルディスプレイ}<dd><h2>有機ELディスプレイ</h2></dd>
---------------------------------------------------------------------------
<dl>
　_{ゆうきイーエルディスプレイ}<dd><h2>有機ELディスプレイ</h2></dd>
　_{Second definition}<dd><h2>Second explanation</h2></dd>
</dl>
---------------------------------------------------------------------------
も、よいかもしれません。

回答No.2

steel_gray

ruby要素の存在(正式にはXHTML1.1??)とか、それにスタイルを付ける事とか色々難ありそうだけどこんな感じで。

スタイル
h2{
margin-top:1em;
position:relative;
}
rt {
position:absolute;
top:-1em;
left:0;
font-size:50%;
}
rp{display:none;}

<h2><ruby><rb>有機ELディスプレイ</rb><rp>(</rp><rt>ゆうきイーエルディスプレイ</rt><rp>)</rp></ruby></h2>
<h2><ruby><rb>教えてgoo</rb><rp>(</rp><rt>おしえてグー</rt><rp>)</rp></ruby></h2>

ruby関連の要素を使わずにemやらspan等々に置き換えてもいいのかも。