<dfn>

用語の定義

文章の中で、その場で意味を説明している用語を示します。専門用語が初めて登場して定義する箇所に使います。

サンプルコード

HTML

1<dfn>レスポンシブデザイン</dfn>とは、画面の幅に合わせてレイアウトを変え、どの端末でも見やすく表示する作り方のことです。

2<dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>は、Webページの見た目を指定する言語です。

CSS

1dfn {

2 font-style: normal;

3 font-weight: bold;

4 color: #7d5411;

ブラウザでの表示

dfn は "definition"（定義）の略で、その文の中で意味を説明している用語を示します。囲むのは用語の部分だけで、説明文は同じ段落の中に書きます。

1つの用語につき、定義している1か所だけに使います。2回目以降に登場するときは dfn で囲みません。

略語を定義するときは、上の2つ目の例のように abbr と組み合わせることもできます。

属性	説明
`title`	定義している用語を別の書き方で示す
`id`	ほかの場所からリンクで参照する

dfn に id を付けておくと、別の場所からその定義へリンクできます。

HTML

1<dfn id="def-flex">Flexbox</dfn>は、要素を1方向に並べるレイアウトの仕組みです。

2詳しくは<a href="#def-flex">Flexbox</a>の説明を参照してください。