abbrタグとrubyタグ

自分の無知を晒す話ですが、今の今まで< abbr >タグの意味を二重に取り違えていたので、反省の意味を込めて正しい意味と使い方をまとめておきます。利用頻度としては少ないとは言え、これは本当に恥ずかしい。

略語の正式名称を表すabbrタグ

abbrタグは、たとえば「CPU」のように略語であることを表します。title属性を使用することで、CPU = Central Processing Unit と示す為に用いられることが多いです。

使い方は簡単で、abbrのtitle属性に正式名称を指定するだけです。

<p> <abbr title="Central Processing Unit"> CPU </abbr> </p>

間違っても、

<p> CPU <abbr>Central Processing Unit</abbr> </p>

ではありません。(1つ目の勘違い)よく考えなくても分かりそうな勘違いです(猛省)。

defタグの入れ子として使える

文章で定義している語句を表す< def >タグと入れ子にして、用語の略語と定義を表すこともできます。

<p>
 <def><abbr title="Central Processing Unit"> CPU </abbr></def>は、コンピュータにおける中心的な処理装置。コンピュータの頭脳に例えられることが多い。
</p>

“この文章は「Central Processing Unit」(略語は「CPU」)について定義している” という意図になります。

難読漢字の読みはルビ(rubyタグ)

我ながらどうしてこんな勘違いをしていたのか。。おそらく学習初期に勘違いしたまま現在に至ったんだろうと思いますが、abbrに難読漢字の読み方を指定させてはいけません。(2つ目の勘違い)

読みをタグで指定したいならrubyタグ。どうしてもルビを打ちたくないならCSSでrtの位置とサイズを調整するか、タグを使わずにおとなしく( )でも付けておきましょう。

<!-- 例 -->

春の<ruby>霙<rp>(</rp><rt>みぞれ</rt><rp>)</rp></ruby>
 ↓

春の(みぞれ)

* ruby非対応ブラウザでは、 春の霙(みぞれ) と表示される

今回、abbrについては誤解したまま覚えていたわけですが、rubyについても、いつの間にか< rb > タグ無くなってたんだなぁなどと気付く契機にもなりました。(勉強不足がばれる)

HTMLタグの中には滅多に使わないタグもちらほらあるので、定期的に見直しておかないといけないなと深く反省した次第です。

Author

ミフネWEBのロゴ

ネットショップ専門のWEBサイト制作事務所です(個人事務所)。

部分的なテンプレートカスタマイズから、高速化や機能追加、新規ショップ制作などECに関するいろいろを承ります。(5,500円〜)

仕事のご相談は「お問い合わせ・ご相談」より随時承っております。