【HTML】abbr要素の使い方【略語や頭文字を示します】

Program

abbr要素を使えば、略語や頭文字を示すことができます。

abbr要素の基本的な使い方

以下のプログラムと、ブラウザの表示結果を見てください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>abbr要素</title>
</head>
<body>
    <p><abbr title="世界保健機関">WHO</abbr>は国際連合の専門機関の1つである。</p>
</body>
</html>

body要素の中に、「文のかたまり(段落)」を示すp要素があります。

p要素の中には、「WHOは国際連合の専門機関の1つである。」と書かれた文章があります。

そして、用語「WHO」は、abbr要素でマークアップされ、title属性として「世界保健機関」が指定されています。

このため、用語「WHO」は、ブラウザでの表示結果の通り、下線(点線)を付与された状態で表示され、ユーザーは「WHO」が略語(又は頭文字)であることを知ることができます。

更に、マウスポインターを用語「WHO」の上に置くことで、ブラウザの表示結果の通り、「世界保健機関」の文字がポップアップ表示され、用語「WHO」の日本語の正式名称を知ることができるようになります。

半角英文字ではどうなる?

では、半角英文字について、abbr要素でマークアップしてみましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>abbr要素</title>
</head>
<body>
    <p><abbr title="世界保健機関">WHO</abbr>は国際連合の専門機関の1つである。</p>
    <p><abbr title="World Health Organization">WHO</abbr>は国際連合の専門機関の1つである。</p>
</body>
</html>

先ほどのプログラムに、文章を追加しました。

追加した文章では、半角英文字「WHO」をabbr要素でマークアップし、title属性として半角英文字である「World Health Organization」を指定しました。

そして、ブラウザでの表示結果の通り、半角英文字「WHO」は、下線(点線)を付与された状態で表示することができました。

更に、マウスポインターを用語「WHO」の上に置くことで、ブラウザの表示結果の通り、「World Health Organization」の半角英文字がポップアップ表示されるようになりました。

abbr要素は、全角数字にマークアップできるか?

更に、全角数字についても、abbr要素でマークアップを行いました。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>abbr要素</title>
</head>
<body>
    <p><abbr title="世界保健機関">WHO</abbr>は国際連合の専門機関の1つである。</p>
    <p><abbr title="World Health Organization">WHO</abbr>は国際連合の専門機関の1つである。</p>
    <p><abbr title="第5世代移動通信システム">5G</abbr>は、携帯電話などの通信規格の一種です。</p>
</body>
</html>

先ほどのプログラムに、全角数字を含む文章を追加しました。

追加した文章では、全角数字「5G」をabbr要素でマークアップし、title属性として全角数字を含む「第5世代移動通信システム」を指定しました。

そして、ブラウザでの表示結果の通り、全角数字「5G」は、下線(点線)を付与された状態で表示することができました。

更に、マウスポインターを用語「5G」の上に置くことで、ブラウザの表示結果の通り、「第5世代移動通信システム」の全角文字がポップアップ表示されるようになりました。

abbr要素は、半角数字にマークアップできるか?

半角数字についても、abbr要素でマークアップを行いました。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>abbr要素</title>
</head>
<body>
    <p><abbr title="世界保健機関">WHO</abbr>は国際連合の専門機関の1つである。</p>
    <p><abbr title="World Health Organization">WHO</abbr>は国際連合の専門機関の1つである。</p>
    <p><abbr title="第5世代移動通信システム">5G</abbr>は、携帯電話などの通信規格の一種です。</p>
    <p><abbr title="5th Generation">5G</abbr>は、携帯電話などの通信規格の一種です。</p>
</body>
</html>

先ほどのプログラムに、半角数字を含む文章を追加しました。

追加した文章では、半角数字「5G」をabbr要素でマークアップし、title属性として半角数字を含む「5th Generation」を指定しました。

そして、ブラウザでの表示結果の通り、半角数字「5G」は、下線(点線)を付与された状態で表示されるようになりました。

更に、マウスポインターを用語「5G」の上に置くことで、ブラウザの表示結果の通り、「5th Generation」のフレーズがポップアップ表示されるようになりました。

abbr要素は、半角カタカナにマークアップできるか?

また、半角カタカナについても、abbr要素でマークアップを行いました。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>abbr要素</title>
</head>
<body>
    <p><abbr title="世界保健機関">WHO</abbr>は国際連合の専門機関の1つである。</p>
    <p><abbr title="World Health Organization">WHO</abbr>は国際連合の専門機関の1つである。</p>
    <p><abbr title="第5世代移動通信システム">5G</abbr>は、携帯電話などの通信規格の一種です。</p>
    <p><abbr title="5th Generation">5G</abbr>は、携帯電話などの通信規格の一種です。</p>
    <p>仕事帰りの一杯は、<abbr title="焼酎ハイボール">チューハイ</abbr>に限る。</p>
</body>
</html>

先ほどのプログラムに、半角カタカナを含む文章を追加しました。

追加した文章では、半角カタカナ「チューハイ」をabbr要素でマークアップし、title属性として半角数字を含む「焼酎ハイボール」を指定しました。

そして、ブラウザでの表示結果の通り、半角カタカナ「チューハイ」は、下線(点線)を付与された状態で表示されるようになりました。

更に、マウスポインターを用語「チューハイ」の上に置くことで、ブラウザの表示結果の通り、「焼酎ハイボール」のフレーズがポップアップ表示されるようになりました。

各種ブラウザでの表示結果

abbr要素の各種ブラウザにおける最新のサポート状況は、以下のようになってます。

【HTML】Internet ExplorerGoogle ChromeMicrosoft EdgeSafariFirefoxOpera
abbr要素
Memo※下線(点線)表示無し
〇:サポートあり、△:制限あり、×:サポートなし。?:不明

以上、abbr要素の使い方について、ご参考になさってください!

タイトルとURLをコピーしました