1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
|
---
title: '<dfn>: 定義要素'
slug: Web/HTML/Element/dfn
tags:
- Definition
- Definitions
- Element
- HTML
- HTML text-level semantics
- Reference
- Semantic Markup
- Web
- dfn
translation_of: Web/HTML/Element/dfn
---
<div>{{HTMLRef}}</div>
<p><span class="seoSummary"><strong>HTML の定義要素</strong> (<strong><dfn><dfn></dfn></strong>) は、定義句や文の文脈の中で定義している用語を示すために用いられます。</span> <code><dfn></code> の直近の祖先である {{HTMLElement("p")}} 要素、 {{HTMLElement("dt")}}/{{HTMLElement("dd")}} の組み合わせ、 {{HTMLElement("section")}} 要素が用語の定義とみなされます。</p>
<div>{{EmbedInteractiveExample("pages/tabbed/dfn.html", "tabbed-shorter")}}</div>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリー</a></th>
<td><a href="/ja/docs/Web/Guide/HTML/Content_categories#flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/Guide/HTML/Content_categories#phrasing_content">記述コンテンツ</a>, 知覚可能コンテンツ</td>
</tr>
<tr>
<th scope="row">許可されている内容</th>
<td><a href="/ja/docs/Web/Guide/HTML/Content_categories#phrasing_content">記述コンテンツ</a>、ただし {{HTMLElement("dfn")}} 要素を子孫にしてはいけません。</td>
</tr>
<tr>
<th scope="row">タグの省略</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">許可されている親要素</th>
<td><a href="/ja/docs/Web/Guide/HTML/Content_categories#phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td>
</tr>
<tr>
<th scope="row">暗黙の ARIA ロール</th>
<td>{{ARIARole("term")}}</td>
</tr>
<tr>
<th scope="row">許可されている ARIA ロール</th>
<td>すべて</td>
</tr>
<tr>
<th scope="row">DOM インターフェイス</th>
<td>{{domxref("HTMLElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Attributes">属性</h2>
<p>この要素の属性は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>を含みます。</p>
<p>HTML5 においては、この要素の {{htmlattrxref("title")}} 属性は後述のとおり、通常と異なる特別な意味合いを持ちます。</p>
<h2 id="Usage_notes">使用上のメモ</h2>
<p><code><dfn></code> 要素の使用については、完全に明らかになっていない側面がいくつかあります。ここでそれらを説明します。</p>
<h3 id="Specifying_the_term_being_defined">定義される用語の指定</h3>
<p>定義される用語は、以下の規則に従います。</p>
<ol>
<li><code><dfn></code> 要素に {{htmlattrxref("title")}} 属性がある場合、 <code>title</code> 属性の値が定義される用語とみなされます。その要素の中の文字列もその用語でなければなりませんが、略語 (おそらく {{HTMLElement("abbr")}} を使用) や、用語のその他の形でも構いません。</li>
<li><code><dfn></code> が単一の子要素を持ち、自分自身には何も文字列がなく、かつその子要素が <code>title</code> 属性を持つ {{HTMLElement("abbr")}} 要素である場合は、 <code><abbr></code> 要素の <code>title</code> の値が定義する用語です。</li>
<li>それ以外では、 <code><dfn></code> 要素の文字列コンテンツが定義される用語です。これは{{anch("Basic identification of a term", "以下の最初の例")}}で示します。</li>
</ol>
<div class="note">
<p>もし <code><dfn></code> 要素に <code>title</code> 属性があれば、それが定義する用語であり、それ以外の文字列ではありません。</p>
</div>
<h3 id="Links_to_<dfn>_elements"><code><dfn></code> 要素へのリンク</h3>
<p><code><dfn></code> 要素に {{htmlattrxref("id")}} 属性をつけた場合は、 {{HTMLElement("a")}} 要素を使用してそこにリンクすることができます。用語の使用時にはそのようなリンクを使用して、用語のリンクをクリックすることで読者が用語の定義にすばやく移動できるようにしてください。</p>
<p>これは以下の{{anch("Links to definitions", "定義へのリンク")}}の例で示します。</p>
<h2 id="Examples">例</h2>
<p>様々な利用シナリオの例をいくつか見てみましょう。</p>
<h3 id="Basic_identification_of_a_term">基本的な用語の識別</h3>
<p>この例は、定義の中の用語の位置を識別するために素の <code><dfn></code> 要素を使用しています。</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><p>The <strong>HTML Definition element</strong>
(<strong><dfn>&lt;dfn&gt;</dfn></strong>) is used to indicate the
term being defined within the context of a definition phrase or
sentence.</p></pre>
<p><code><dfn></code> 要素に <code>title</code> がないので、 <code><dfn></code> 要素自身の文字列コンテンツが定義される用語として使用されます。</p>
<h4 id="Result">結果</h4>
<p>このブラウザーでは、このように描画されます。</p>
<p>{{EmbedLiveSample("Basic_identification_of_a_term", 650, 120)}}</p>
<h3 id="Links_to_definitions">定義へのリンク</h3>
<p>定義へのリンクを追加するには、いつも通りの方法で {{HTMLElement("a")}} 要素を使ってリンクを作成します。</p>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html"><p>The <strong>HTML Definition element</strong>
(<strong><dfn id="definition-dfn">&lt;dfn&gt;</dfn></strong>) is
used to indicate the term being defined within the context of a
definition phrase or sentence.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Graece
donan, Latine voluptatem vocant. Confecta res esset. Duo Reges:
constructio interrete. Scrupulum, inquam, abeunti; </p>
<p>Negare non possum. Dat enim intervalla et relaxat. Quonam modo?
Equidem e Cn. Quid de Pythagora? In schola desinis. </p>
<p>Ubi ut eam caperet aut quando? Cur iustitia laudatur? Aperiendum
est igitur, quid sit voluptas; Quid enim? Non est igitur voluptas
bonum. Urgent tamen et nihil remittunt. Quid enim possumus hoc
agere divinius? </p>
<p>Because of all of that, we decided to use the
<code><a href="#definition-dfn">&lt;dfn&gt;</a></code> element for
this project.</p></pre>
<p>ここで {{htmlattrxref("id")}} 属性の <code>"definition-dfn"</code> の値をリンク先として使用して、定義を見ることができます。その後で、 <code><a></code> の {{htmlattrxref("href", "a")}} 属性を <code>"#definition-dfn"</code> に設定して、定義に戻るリンクを設定します。</p>
<h4 id="Result_2">結果</h4>
<p>結果のコンテンツはこのようになります。</p>
<p>{{EmbedLiveSample("Links_to_definitions", 650, 300)}}</p>
<h3 id="Using_abbreviations_and_definitions_together">略語と定義の両方の使用</h3>
<p>場合によっては、用語を定義する際に略語を使用したくなる場合もあるでしょう。これは <code><dfn></code> と {{HTMLElement("abbr")}} 要素を組み合わせて、このように実現できます。</p>
<h4 id="HTML_3">HTML</h4>
<pre class="brush: html"><p>The <dfn><abbr title="Hubble Space Telescope">HST</abbr></dfn>
is among the most productive scientific instruments ever constructed.
It has been in orbit for over 20 years, scanning the sky and
returning data and photographs of unprecedented quality and
detail.</p>
<p>Indeed, the <abbr title="Hubble Space Telescope">HST</abbr> has
arguably done more to advance science than any device ever built.</p></pre>
<p><code><abbr></code> 要素が <code><dfn></code> の中で入れ子になっています。前者は用語が略語 ("HST") であることを示し、完全な用語 ("Hubble Space Telescope") を <code>title</code> 属性で定義します。後者は略語が定義される用語であることを表します。</p>
<h4 id="Result_3">結果</h4>
<p>上記のコードの出力はこのようになります。</p>
<p>{{EmbedLiveSample("Using_abbreviations_and_definitions_together", 650, 200)}}</p>
<h2 id="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'semantics.html#the-dfn-element', '<dfn>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-dfn-element', '<dfn>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<dfn>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("html.elements.dfn")}}</p>
<h2 id="See_also">関連情報</h2>
<ul>
<li>定義リスト関連要素: {{HTMLElement("dl")}}, {{HTMLElement("dt")}}, {{HTMLElement("dd")}}</li>
<li>{{HTMLElement("abbr")}}</li>
</ul>
|
