<dfn>

定義される用語を表す

HTML1.0 ~ 利用可能

最終更新日: 2020.11.08

どんなタグ?
定義語(専門用語・省略語)を表す時には、
このdfnタグを使う。

コードサンプル
<body>
<p><dfn>ビザ</dfn>とは日本語で「査証(さしょう)」と呼ばれ、自国以外の人物の旅券が有効であることと、入国しても差し支えないと示す証書です。</p>
</body>

dfn タグは definition (デフィニション)(定義)の略で、 <dfn> ~ </dfn>で挟まれた範囲が、定義語であることを表すタグです。

どのカテゴリに属しているの?
dfnタグは フロー・コンテンツ, フレージング・コンテンツ というコンテンツ・カテゴリに属しているタグです。
梱包できるタグは?
dfn タグに梱包できるタグ(コンテンツ・モデル)は、フレージング・コンテンツです。
つまり、フレージング・コンテンツというカテゴリに属しているタグなら梱包可能です。

あいっこdfnは、定義語(定義されている用語)を表すタグです。

どうやって使うの?
定義語を、
<dfn> タグで挟む。

dfn タグは定義語を<dfn></dfn> で挟みます。

使い方
<dfn title="定義語の正式名称">定義語</dfn>
コードサンプル
<body>
<p><dfn>GNP</dfn>とは、gross national product の略称です。</p>
</body>
ブラウザでの表示例
https://codehero.shibajuku.net/html/dfn/sample01/
どこでも使えるの?
dfnタグは フレージング・コンテンツ が配置できるところならどこでも使えます。
気をつけることは?
dfnは用語だけを表すので、用語の説明をあわせて書く必要があります。

あいっこdfn(定義語)は、説明(定義文)とセットでつかう!

使える属性は?
グローバル属性のみがつかえます。
title 属性の使い方を覚えましょう。

<dfn> タグには、どの要素にでも使えるグローバル属性のみが使えます。また、title属性は特殊な使い方になります。

title (タイトル) 属性

title属性の値が、定義する語句の正式な名称となります。

属性値
定義語の正式名称

あいっこdfnのtitle属性は、定義用語以外指定することはできません。

サンプルが見たい
<dfn>タグを使ったサンプルを
いくつか紹介。

<dfn> タグを使ったサンプルを紹介します。

基本的な<dfn>タグのサンプル

コードサンプル
<body>
<p><dfn>HTML</dfn>は、HyperText Markup Languageの略です。</p>
</body>
ブラウザでの表示例
https://codehero.shibajuku.net/html/dfn/sample02/

title 属性を使ったサンプル

コードサンプル
<body>
<p><dfn title="HyperText Markup Language">HTML</dfn>は、Webページを記述するためのマークアップ言語です。</p>
</body>
ブラウザでの表示例
https://codehero.shibajuku.net/html/dfn/sample03/

あいっこドキュメントの中で用語を最初に説明している箇所などに使用します

定義語リストを使ったサンプル

<dfn>タグは、<dl>タグでつくられた定義語リストの中でも使うことができます。辞典のような、用語と対になる説明文を箇条書きで並べる際は、dl、dt、ddタグの使用が適しています。

コードサンプル
<body>
<dl>
  <dt><dfn>HTML</dfn></dt>
  <dd>Hyper Text Markup Languageの略。ウェブページを作成するために開発された言語。</dd>

  <dt><dfn>CSS</dfn></dt>
  <dd>Cascading Style Sheetsの略。HTMLを装飾するための言語。</dd>
</dl>
</body>
ブラウザでの表示例
https://codehero.shibajuku.net/html/dfn/sample04/

あいっこ定義語リストの用語を、さらにdfnタグで囲むと、定義語であることをより強調することができます。

デフォルトスタイルは?
デフォルトでは、
斜体で表示される。

一般的なブラウザで 斜体で表示されます。
具体的には、下記のCSSと同等のスタイルが適用されます。

dfn要素のデフォルトスタイル
dfn {
  font-style: italic;
}

あいっこdfnのデフォルトスタイルは、斜体です。

対応ブラウザは?
すべての主要ブラウザで使用できます。

<dfn>タグは HTML1以降で利用可能で、主に以下のブラウザが対応しています。

Internet Explorar
Internet Explorar あり
Edge
Edge 12 ~
Google Chrome
Google Chrome あり
Firefox
Firefox 1 ~
Safari
Safari あり ~
Opera
Opera あり

あいっこモダンブラウザは問題ありません。

このリファレンスを書いた人

あいっこ

あいっこ

2020年8月から、Shibajukuに参加しています。 おえかきと、本と、おいしいものがすきです。

About サロンメンバーで作った
リファレンスサイト

Shibajuku

Webのスキルを
ワイワイ学んで、
ガンガン活用
するサロン。

このサイトはWebクリエーター養成所
「Shibajuku」のメンバーが作った、
初心者でもわかりやすいHTML + CSSのリファレンスサイトです。

このサイトについて