最終更新日

dfn要素

dfn要素で囲んだ用語が、「定義の対象である」ことを示します。たとえば、dl要素で作成した説明リストにおいて、説明の対象となる用語や名前を表すdt要素と組み合わせて使います。dfn要素は、Phrasingコンテンツの記述箇所で使用できます。

dfn要素を使用する場合、直近の親要素である段落、説明リストのグループ、セクションなどには、用語の定義としての説明文のコンテンツが必要です。

HTML5では、定義対象の用語は以下のように定められています。

・dfn要素がtitle属性を持つ場合、その属性の値が定義対象の用語になる。
・dfn要素内の子要素が、title属性を持つabbr要素のみの場合、そのtitle属性の値が定義対象の用語となる。
・それ以外の場合は、dfn要素内のテキストが定義対象の用語となる。

dfn要素のtitle属性として指定できるのは、定義の対象となる用語のみです。

a要素と組み合わせて使うと、dfn要素によって定義された用語へのリンクを設定することができます。

HTML5での変更点
特にありません
カテゴリ タグの省略 親要素 子要素
Flowコンテンツ
Phrasingコンテンツ
省略不可 Phrasingコンテンツを子にできる要素 Phrasingコンテンツ
(dfn要素は除く)
属性 説明
グローバル属性 - -
イベント属性 - -
サンプルコード
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>マクドエイド</title>
  </head>
  <body>
    <h1>バンズとは</h1>
    <p>一般的に<dfn>バンズ</dfn>といった場合、塩味の小型のパンのことを指します。</p>
    <p>上部は「クラウン」、下部は「ヒール」と呼ばれます。</p>
  </body>
</html>
参考文献:W3C HTML5「4.6.8 The dfn element」外部リンク
HOME
当サイトの活動をサポートしてみませんか?気軽にクリエイターの支援ができます。