当ブログ内の記事を探す

最近の投稿

カテゴリー

アーカイブ

RSS

プロフィール

プロフィール用画像

みきてぃ

みきてぃ

20代のブロガーです。IT・インターネット関連や生活関連、趣味の1つである観賞魚などの記事を書いています。

≫詳しいプロフィールを見る

≫お問い合わせはこちら

HTML・CSS

【HTML】定義語や略語、頭文字を示すタグの使い方

アイキャッチ画像
みきてぃ
口コミ用キャラクターアイコン

HTMLの文章中に略語を入れ、そのテキストに正式名称などの定義語を表示したい。だけど、どのタグを使ったらいいの?

口コミ用キャラクターアイコン

HTMLテキストをマウスポインタに触れると、そのテキストの定義語を表示するようにしたいけど、どうやればいいか分からない・・・。

今回は「定義語や略語、頭文字を示すタグの使い方」について、分かりやすく解説していきます。

プロフィール用アイコン
みきてぃ

今回使うタグは、以下の2つだよ!

  • dfnタグ
  • abbrタグ

dfnタグ

1<dfn title=”sample text”>サンプルテキスト</dfn>

dfnタグとは、専門用語などのテキストが定義語であることを示すタグを表します。

title属性を用いることで、dfnタグに囲まれたテキストをマウスポインタに載せると、その定義語が表示されます。

なお、テキストが略語や頭文字であることを示す場合は、後述するabbrタグを使います。

注意点

dfnタグを使う場合は、pタグやdlタグ、sectionタグ等に囲まれた部分に入れてください。

サンプルコード

1<p>
2<dfn title="HyperText Markup Language">HTML</dfn><dfn title="Cascading Style Sheets">CSS</dfn>でWebサイトを作る方法
3</p>

▼ブラウザ(Microsoft Edge)では以下のように表示されます。

HTML dfnタグの使い方
HTML dfnタグの使い方

abbrタグ

1<dfn>
2<abbr title=”sample text”>サンプルテキスト</abbr>
3</dfn>

abbrタグとは、そのテキストが略語、もしくは頭文字であることを示すタグです。

dfnタグと同様にtitle属性を用いることで、abbrタグに囲まれたテキストをマウスポインタに載せると、テキストの正式な名称が表示されます。

また、dfnタグと併用することで、略語や頭文字の正式名称を定義語として扱うこともできます。

サンプルコード

1<p>
2<dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn><dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>でWebサイトを作る方法
3</p>

▼ブラウザ(Microsoft Edge)では以下のように表示されます。

HTML abbrタグの使い方
HTML abbrタグの使い方

まとめ

というわけで、今回は「定義語や略語、頭文字を示すタグの使い方」について解説しました。

最後に、dfnタグ・abbrタグについて、もう一度簡単にまとめてみます。

dfnタグテキストを定義語として示すタグ
abbrタグ略称や頭文字であることを示すタグ

dfnタグとabbrタグは少し使い方が違いますが、基本的には「テキストを定義語、または略語・頭文字であることを示すタグ」となります。

今回の記事が参考になれば幸いです。

出典

小川裕子・加藤善規&できるシリーズ編集部『できるポケット HTML5&CSS3/2.1全事典』(インプレス)

この記事を書いた人

プロフィール用画像

みきてぃ

みきてぃ

20代のブロガーです。IT・インターネット関連や生活関連、趣味の1つである観賞魚などの記事を書いています。

≫詳しいプロフィールを見る

≫お問い合わせはこちら

スポンサーリンク
記事URLをコピーしました