dfn とは
- ここで説明する dfn とは次の語句からなる HTML の要素です。
- definition
- 読み: ディフィニション
意味: 定義、
dfn 要素の概要
この要素は、マークアップしたテキストが定義語であることを表します。
定義とは、物事の意味・内容を他と区別できるように言葉で明確に限定することです。 物事の意味を解説する際に、用語の部分を dfn 要素でマークアップすることで、そのテキストが定義の対象となる用語であることを表します。
例えば、「 ○○ とは、・・である。 」 のように、その 用語 を含むセクションや段落では、 用語 の意味を説明することが必要となります。
多くのブラウザでは、dfn 要素に内包したテキストは斜体で表示されますが、 em 要素 や cite 要素 などとは、それぞれの要素が持つマークアップの意味合いが全く異なりますので、 SEO を考慮した場合、マークアップの意味をよく考えた上で要素の選定をしてください。
この要素には、開始タグと終了タグが必要です。
<dfn> </dfn>
サンプルコードと実行結果
dfn 要素の仕様は、完全に明らかになっていない側面がありますので 抽象的なサンプルになることをご了承ください。
ここでは 2つのサンプルを書き出しています。
まず、初めのサンプルですが、これは 「 定義 」 というテキストを dfn でマークアップしているので 「 定義 」 というテキストを定義語としている例です。
また、もう一つのサンプルでは、dfn 要素に title 属性 を付けて値を "definition element" としています。この場合、"definition element" がマークアップで定義された用語となり、「 DFN 要素 」 というテキストは略称としての意味になると考えられます。
上記のことから、dfn 要素の唯一の子要素が title 属性を持った abbr 要素の場合には、その title 属性の値が定義語になると考えられます。 abbr 要素と dfn 要素と組み合わせて略語や頭字語の用語の定義を行なった上で、dl-dt-dd 要素で記述リストとしてもよいでしょう。
サンプルコード: CSS
<style>
dfn{
text-decoration: underline dotted ##red;
}
div{
margin: 0.5em 0;
}
</style>
サンプルコード: HTML
<body>
<div>
<dfn> 定義 </dfn> とは、物事の意味や内容を他と区別できるように、共通認識を抱くための作業を言葉で明確にすることです。
</div>
<div>
<dfn title="definition element"> DFN 要素 </dfn> とは、定義語を表す要素です。定義句や文の文脈の中で定義している用語を示すために用いられます。
</div>
</body>