どんなタグ？
略語を表す場合に
<abbr>タグを使う

<p>
 <abbr title="フォトショップ">フォトショ</abbr>の操作は慣れるまで大変だ。
</p>

abbr(アバー)要素はabbreviation(アブリビエーション)の略で、 <abbr> ~ </abbr>タグで挟んだ箇所が略語であることを表します。またtitle属性を指定することで、省略する前の正式名称も表すことができます。

どのカテゴリに属しているの？

abbr要素は フロー・コンテンツ, フレージング・コンテンツ というコンテンツ・カテゴリに属しているタグです。

梱包できるタグは？

abbrタグに梱包できる要素（コンテンツ・モデル）は、フレージング・コンテンツです。
つまり、フレージング・コンテンツというカテゴリに属しているタグなら梱包可能です。

略語を表したいときに使うタグです!

どうやって使うの？
略語を表す言葉を、
<abbr>タグで挟んで使います。

abbrタグは略語として表したい記述を <abbr> 〜 </abbr> で挟み、title属性に省略する前の正式名称を記述します。title属性に指定した正式名称はデスクトップのブラウザ上でabbr要素で挟んだ部分をホバーすることで確認が可能です。

使い方

<abbr title="省略する前の正式名称">
  略語
</abbr>

<section>
　<h2>意外と知らない略語リスト</h2>
　　<ul>
　　　<li><abbr title="Do It Yourself">DIY</abbr></li>
     <li><abbr title="Grobal Positioning System">GPS</abbr></li>
     <li><abbr title="All Nippon Airways">ANA</abbr></li>
     <li><abbr title="Very Important Person">VIP</abbr></li>
　　</ul>
</section>

どこでも使えるの？

abbr要素は フロー・コンテンツもしくはフレージング・コンテンツが配置できるところならどこでも使えます。

気をつけることは？

必ずしも全ての略語に対してabbr要素を使う必要はありませんが、読み手にとって分かりにくい専門用語などの略語を使用する場合には有益な要素です。

title属性に省略する前の正式名称を入れましょう!

使える属性は？
グローバル属性とtitle属性です。

title属性は便利ですが、一部のユーザー(スマホやタブレットの人など)は、title属性が確認できないので、依存することはやめましょう!

サンプルが見たい
<abbr>タグを使ったサンプルを
いくつか紹介。

<section>
  <h2>Shibajuku日記</h2>
  <article>
   <p><time datetime="2020-04-01″>2020年4月1日</time></p>
   <p>今日からフリーランスになるために、WEBデザインの勉強を始めました!</p>
   <p>まずは<abbr title="Landing Page">LP</abbr>案件の受注を目標に頑張ります。</p> 
   <p><abbr title="Hyper Text Markup Language">HTML</abbr>、<abbr title="Cascading Style Sheets">CSS</abbr>など勉強することはたくさんあるけど、Shibajukuで頑張る!</p>
  </article>
</section>

読み手にとって分かりにくい略語にはabbr要素を使ってあげると親切です!

デフォルトスタイルは？
点線の下線が表示される。

abbr[title] {
    text-decoration: underline dotted;
}

一部のブラウザ(Internet Explorerなど)ではデフォルトで下線が表示されない場合もあります。

対応ブラウザは？
基本的にどのブラウザでも
大丈夫。

<abbr>タグは HTML4.01以降で利用可能で、主に以下のブラウザが対応しています。

Internet Explorar

Internet Explorar 7 ~

Edge

Edge 有り

Google Chrome

Google Chrome 有り

Firefox

Firefox 有り

Safari

Safari 有り

Opera

Opera 有り

どのブラウザでも問題ありません。