HTML テキスト 定義された言葉「dfn要素」と略語「abbr要素」

<ここから定義された言葉>インターネット<ここまで定義された言葉>
<ここから略語>HTML<ここまで略語>

定義された言葉「dfn要素」

 普通の言葉ではなく、専門用語など定義された言葉を使うことはまれでしょうがあると思います。
HTMLでは定義された言葉を表現すには「dfn要素」を使います。
<dfn>と</dfn>で囲んだ範囲のテキストを定義された言葉と示すことができます。

 ほとんどのブラウザではこの要素は、文字を斜体にして表現します。
「i要素」と同じように見えますが、「dfn要素」は定義された言葉という明確な意味を持ちます。

 「dfn要素」の使い道ですが、定義された言葉の説明等につかいます。たとえば以下のように使います。
「dfn要素」とは、定義された言葉を意味するHTML要素の一つです。

 ちなみに、「dfn要素」の「dfn」はDefinitionの略で、定義という意味です。

定義した内容を表す「title属性」

 「dfn要素」には、定義された言葉の内容を示す「title属性」があります。
 「title属性」の指定をすることで、「dfn要素」のテキスト上にマウスカーソルをもってくることで「title属性」に指定した内容をブラウザが表示します。

 「属性」の説明については、文字化け防止や「ins要素」「del要素」で説明しましたのでここでは省略します。

 「dfn要素」の「title属性」に「Definition」を指定した場合、以下のようになります。

<dfn title="Definition">

略語を意味する「abbr要素」

 長い言葉や人名、グループ名などを省略して読むことはよくあることです。
たとえば、インターネット上では以下のような略語がよくつかわれていますね。

  • パーソナルコンピュータ→パソコン
  • スマートフォン→スマホ
  • ウェブログ→ブログ
  • World Wide Web→WWW
  • HyperText Markup Language→HTML

こういった略語を、略語であるということをHTMLで表すには、「abbr要素」を使います。

<abbr>と</abbr>で囲んだ範囲を略語として示すことができます。

 Firefoxでは「abbr要素」のテキストには点線の下線を引きます。
その他のほとんどのブラウザでは特に文字を変えたりはしません。

 ちなみに、「abbr要素」の「abbr」はAbbreviationの略で、省略という意味や、略語という意味です。

略語の正式名称を表す「title属性」

 「abbr要素」には、「dfn要素」と同じように、略語の正式名称を表す「title属性」があります。
「title属性」の指定をすることで、「dfn要素」と同じように「abbr要素」のテキスト上にマウスカーソルをもってくることで、「title属性」に指定した内容をブラウザが表示します。

 「abbr要素」の「title属性」に「Abbreviation」を指定した場合、以下のようになります。

<abbr title="Abbreviation">

「dfn要素」の中に「abbr要素」

 略語が専門用語などの定義された言葉ということは、特にコンピュータ関係の言葉でよくあります。
そういった場合、「dfn要素」の中に「abbr要素」を入れて定義+略語を示すことができます。
この状態で「abbr要素」に「title属性」を指定した場合、「abbr要素」の「title属性」が「dfn要素」の言葉の内容にもなります。

 「dfn要素」の中に「abbr要素」を入れて、「title属性」に「Abbreviation」を指定した場合、以下のようになります。

<dfn><abbr title="Abbreviation">

サンプル

 今回説明した、「dfn要素」、「abbr要素」を使用したサンプルを用意します。
このサンプルソースはbody要素内(<body>~</body>)に書いてください。

サンプルソースコード

<p>
	<dfn title = "Definition">dfn</dfn>とはDefinitionのことで、定義という意味を持ちます。
</p>
<p>
	<abbr title = "パーソナルコンピュータ">パソコン</abbr>とはパーソナルコンピュータの略です。
</p>
<p>
	<dfn><abbr title = "HyperText Markup Language">HTML</abbr></dfn>とはHyperText Markup Languageの略で、インターネットの主役といえます。
</p>

 (<p>とは「段落」を意味する要素です。)

表示結果

dfnとはDefinitionのことで、定義という意味を持ちます。

パソコンとはパーソナルコンピュータの略です。

HTMLとはHyperText Markup Languageの略で、インターネットの主役といえます。

「dfn要素」「abbr要素」のまとめと次回記事について

 今回説明した「dfn要素」は使いどころが難しいかもしれません。専門用語解説サイトなど向けでしょうか。
「abbr要素」は略語を自分で作ったりと使い方によっては面白い要素となるでしょう。うまい略語を作ればその略語が流行るかもしれません?
両方とも、必ず使う必要があるというわけではなく、要素の使い方自体は両方とも簡単でしょう。

 次回は、書籍や歌詞等から引用した場合に使用する、引用「q要素」「blockquote要素」と引用元「cite要素」の説明します。
以上、当サイト管理人のAsterismでした。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


上の画像に表示されている英数字を入力してください *

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>