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

HTMLで略語や頭字語をマークアップする方法【abbrタグの使い方】

HTMLで略語や頭字語をマークするには？

HTMLで略語（abbreviation）や頭字語（acronym）をマークアップするには、<abbr>タグを使用します。略語や頭字語とは、言葉を短く省略した形で、一連の文字列として表現されるものです。代表的な例としては、「Mr.」「MRP」「GMT」「NASA」などが挙げられます。

<abbr>タグにtitle属性を指定すると、その要素にマウスカーソルを合わせた際に正式名称がツールチップとして表示されます。これにより、訪問者にとって意味が分かりやすくなり、文書のアクセシビリティやSEOの面でもメリットがあります。

なお、かつて頭字語専用として使われていた<acronym>タグはHTML5で廃止されたため、現在は略語・頭字語のどちらも<abbr>タグで統一的にマークアップするのが推奨されています。

サンプルコード

以下のコードを実行すると、HTMLで略語や頭字語をマークする方法を実際に確認できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML abbr tag</title>
   </head>

   <body>
      <h1>Timings</h1>
      <p>
         We follow <abbr title="Indian Standard Time">IST</abbr> for our webinars.
      </p>
   </body>
</html>

表示結果とポイント

この例では、「IST」という略語が<abbr title="Indian Standard Time">でマークアップされています。ブラウザ上では「IST」の部分に点線の下線が表示され、マウスカーソルを重ねると「Indian Standard Time（インド標準時）」という正式名称がツールチップで表示されます。

このように、略語を使う場面では<abbr>タグとtitle属性を組み合わせることで、読者に追加の説明を提供しながら、セマンティックで正確なHTML文書を作成できます。

  1. HTMLのciteタグで作品タイトルをマークアップする方法を解説

    作品のタイトルとは、書籍、楽曲、絵画、映画など、さまざまな創作物の名称を指します。HTMLで作品タイトルをマークアップするには、<cite>…</cite>タグを使用します。<cite>タグは「引用（citation）」を意味するタグで、このタグで囲まれたテキストは作品のタイトルとして意味づけされます。 コード例 以下のコードを実行すると、HTMLの<cite>タグを使用して作品タイトルをマークする方法を実際に確認できます。 <!DOCTYPE html> <html>    <head>

  2. HTML DOM Markオブジェクトとは？使い方をサンプルコード付きで解説

    HTML DOMのMarkオブジェクトは、HTMLの<mark>要素をJavaScriptから操作するためのオブジェクトです。<mark>要素は、テキストの一部をマーカーで塗ったようにハイライト表示するために使用され、ユーザーの注意を引きたい部分を強調するのに便利です。JavaScriptを使えば、この要素を動的に生成してページに挿入することもできます。構文Markオブジェクトを作成するための構文は以下の通りです。<mark>要素の作成var markObject = document.createElement(MARK)サンプルコードHTML DOM M