定義語・省略語

HTMLにおいて定義語・省略語を表す際に使用するタグdfn要素とabbr要素について解説していきます。

title属性を使用することでカーソルを合わせたときに閲覧者に向けて意味や省略したテキストを表示できます

定義語

定義語を設定する際にdfn要素を使用します。何度もその定義語を使用する場合は最初のテキストだけをdfn要素で囲むのがいいでしょう。またtitle属性を使用してカーソルを合わせたときにその定義したテキストを表示させることができます。

要素	解説
<dfn>	定義語

属性	解説
title	定義語の表示

<p><dfn title="Time,Place,Occasion">TPO</dfn>は、時と場所と場合にあった服装や振る舞いをすることと定義されています。</p>

ブラウザ表示例

TPOは、時と場所と場合にあった服装や振る舞いをすることと定義されています。

定義語にカーソルを合わせるとテキストが表示されます。

abbr要素は省略語を意味します。title属性はカーソルを合わせたときにその省略したテキストを表示させることができます。省略語に必ずabbr要素を使用する必要はありませんが、省略語の意味をテキストではなく小さく表示させたいときや、閲覧者がわかりずらい言葉に使用すると便利です。

要素	解説
<abbr>	ひとつの

属性	解説
title	略語の表示

<p>
<abbr title="父さん 足 臭い">TAK</abbr>は家庭の大問題です。
</p>

ブラウザ表示例

TAKは家庭の大問題です。

省略語にカーソルを合わせるとテキストが表示されます。