HTMLで略語と定義をマークアップする方法

略語のマークアップにはabbr

HTMLで略語をマークアップする時には<abbr>を使います。

<abbr>は「abbreviation」から取っていて、省略、短縮、略語、略字などの意味があります。

HTML4.01までは、頭字語(たとえば、WWW[Wordld Wide Web]みたいに頭文字を取った略語）には、acronymというタグを使うことになっていましたが、HTML5からは廃止され、<abbr>に統一されました。

古いWebページや参考書には、acronymを紹介しているかもしれないので、注意しましょう。

abbrの使い方

使い方は基本的には、略語の部分を<abbr>と</abbr>で囲むだけもOKですが、title属性で略語の元の語句を明示することを推奨されています。

なので、ページの最初に出てくる語句には<abbr title="WordPress">WP</abbr>のように、マークアップする方が良いでしょう。

CSSでツールチップの設定をしておけば、下記のようにマウスオーバーで正式名称を表示させることもできます。

語句の定義の記述にはdfn

上記のabbrと共に使われるケースもあるので、ついでにこのページで説明しておきますが、dfnを使うときは、<dfn>JavaScript</dfn>のように用語をdfnタグで挟みますが、その際にdfnタグの親要素の段落<p></p>やセクション<section></section>にはその用語の定義を定義する内容を記述する必要があります。

たとえば、JavaScriptをdfnで記述するとこんな感じになります。

HTMLでは以下のようにマークアップされています。

上記の例ではJavaScriptという用語は略語ではありませんでしたが、これが略語だった場合は、abbrで略語の正式名称をマークアップしつつ、用語を定義することもできます。

<p><dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>とは、HTMLやXMLの要素をブラウザなどでみたときに、どのように表示するかを指示する国際的な基準のことを指す。</p>