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

HTMLで略語を表現する方法とは？abbrタグの使い方をわかりやすく解説

HTMLの<abbr>タグは、文章中の略語（アクロニム）を明示するために使用される要素です。このタグでマークアップされたテキストには、多くのブラウザで点線の下線が表示され、マウスカーソルを合わせるとtitle属性に設定した正式名称がツールチップとして表示されます。

略語を適切にマークアップすることで、検索エンジンやスクリーンリーダーなどの支援技術にも語句の意味が正しく伝わり、アクセシビリティの向上にもつながります。

サンプルコード

以下のコードを実行して、HTMLで略語を含める方法を実際に確認してみましょう。

<!DOCTYPE html>
<html>
  <head>
  <title>HTML abbrタグ</title>
  </head>
  <body>
    <p>
    <abbr title="Private">pvt.</abbr>
    <br />
    <abbr title="World Health Organization">WHO</abbr>は世界保健機関の略称です。
    <br />
    </p>
  </body>
</html>

実装のポイント

  • title属性には、略語の正式名称（完全な語句）を指定します。
  • 下線やツールチップの見た目は、CSSを使って自由にカスタマイズできます。
  • 初出の略語に<abbr>を使うことで、読者にも機械にも意味が明確に伝わります。

  1. HTMLドキュメントの作成方法とは？基本構造をサンプルコード付きで解説

    HTMLドキュメントは、Webページの構造を定義するものです。大きく分けて「head（ヘッド）」と「body（ボディ）」という2つの部分で構成されており、headにはドキュメントに関する情報（メタデータなど）が、bodyには実際にブラウザ上に表示されるコンテンツが含まれます。head部分は<head>…</head>タグの中に記述し、body部分は<body>…</body>タグの中に記述します。また、HTMLドキュメントは必ず<!DOCTYPE html>という宣言から始まります。これはDTD（Document Type Defin

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

    HTMLで略語や頭字語をマークするには？ HTMLで略語（abbreviation）や頭字語（acronym）をマークアップするには、<abbr>タグを使用します。略語や頭字語とは、言葉を短く省略した形で、一連の文字列として表現されるものです。代表的な例としては、「Mr.」「MRP」「GMT」「NASA」などが挙げられます。 <abbr>タグにtitle属性を指定すると、その要素にマウスカーソルを合わせた際に正式名称がツールチップとして表示されます。これにより、訪問者にとって意味が分かりやすくなり、文書のアクセシビリティやSEOの面でもメリットがあります。 なお、かつて