HTML5

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

WPは世界中のウェブサイトのなかで約3割のシェアを誇っている。

語句の定義の記述にはdfn

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

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

JavaScriptはプログラミング言語の一つで、Javaとは全く別の言語である。ウェブブラウザ上で動作するので、ユーザーフレンドリーなウェブサイトの構築に欠かせない存在となっている。

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

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

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

 

Related posts

HTML5のリスト表示をおさらい

ItSpaceBiz

Webページで、ルビ(ふりがな)をふる時の正しいHTMLの記述

ItSpaceBiz

table要素のカラム(列)グループの使い方

ItSpaceBiz