HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのabbrタグとは？頭字語・略語のマークアップ方法を実例付きで解説

HTMLの<abbr>要素は、頭字語（アクロニム）や略語をマークアップするために使用される要素です。HTML5では<acronym>タグが廃止されたため、現在は<abbr>タグを使うのが標準的な方法となっています。

<abbr>タグにはtitle属性を指定でき、要素にカーソルを合わせると正式名称がツールチップとして表示されます。これにより、読者にとってわかりやすいコンテンツになるだけでなく、検索エンジンやスクリーンリーダーにもその意味を正しく伝えることができます。

頭字語（Acronym）の例

  • B2B：Business to Business（企業間取引）
  • B2C：Business to Consumer（企業と消費者間の取引）
  • CMS：Content Management System（コンテンツ管理システム）
  • PPC：Pay Per Click（クリック課金型広告）
  • ROI：Return On Investment（投資収益率）
  • CTA：Call To Action（行動喚起）

略語（Abbreviation）の例

  • Mr.：Mister（〜様）
  • Dr.：Doctor（博士・医師）
  • St.：Street（通り）
  • Km：Kilometer（キロメートル）

それでは、<abbr>タグの具体的な実装例を見てみましょう。

コード例

<!DOCTYPE html>
<html>
<body>
<h2>Coding Ground</h2>
<h3>Compilers for Programming Languages and Web Technologies</h3>
<nav>
   <a href="/compile_java_online.php">Java</a> |
   <a href="/php_terminal_online.php">PHP</a> |
   <a href="/online_jquery_editor.php">jQuery</a> |
   <a href="/compile_c_online.php">C</a> |
   <a href="/compile_cpp_online.php">C++</a> |
   <a href="/online_angularjs_editor.php">AngularJS</a>
</nav>
<p>We also have a compiler for <abbr title="JavaScript">JS</abbr> libraries.</p>
</body>
</html>

表示結果

HTMLのabbrタグとは？頭字語・略語のマークアップ方法を実例付きで解説

上記のコードでは、「JS」という文字列を<abbr title="JavaScript">で囲んでいます。この「JS」の部分にカーソルを合わせると、title属性に設定した「JavaScript」というテキストがツールチップとして表示されます。

HTMLのabbrタグとは？頭字語・略語のマークアップ方法を実例付きで解説

このように<abbr>タグを活用することで、略語の意味を読者が簡単に確認できる、アクセシビリティの高いWebページを作成できます。

  1. HTMLの<dfn>タグとは？定義用語のマークアップ方法を実例付きで解説

    HTMLの<dfn>タグは、専門用語や略語など「定義の対象となる語」が文書内で最初に登場する箇所を示すための要素です。多くのブラウザでは、<dfn>タグで囲まれた部分は斜体（イタリック体）で表示されます。 それでは、<dfn>タグの具体的な実装例を見ていきましょう。 コード例 <!DOCTYPE html> <html> <body> <h2>MCAの科目一覧</h2> <p><dfn title="Master of Computer Applications"

  2. HTMLのブロック要素とインライン要素の違いをわかりやすく解説

    はじめにHTMLの要素は、その表示方法によって「ブロック要素」と「インライン要素」の2種類に大きく分けられます。この2つの違いを理解することは、Webページのレイアウトを思い通りに組むための第一歩です。本記事では、それぞれの特徴と具体的なコード例を使って、わかりやすく解説します。ブロック要素（Block Elements）とはブロック要素は、前後に改行が入ったかのように表示される要素です。また、親要素の利用可能な幅いっぱいまで占めるという特徴があります。代表的なブロック要素には以下のようなものがあります。<h1>〜<h6>（見出し）<p>（段落）<ar