---
title: '<dfn>: Элемент определения'
slug: Web/HTML/Element/dfn
translation_of: Web/HTML/Element/dfn
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary"><strong>Элемент определения HTML</strong> (<strong><dfn>&lt;dfn&gt;</dfn></strong>) используется для указания термина, определяемого в контексте фразы или предложения.</span> Элемент{{HTMLElement("p")}}, пара{{HTMLElement("dt")}}/{{HTMLElement("dd")}} или {{HTMLElement("section")}} элемент, который является ближайшим предком <code>&lt;dfn&gt;</code> считается определением термина.</p>

<p> </p>

<div>{{EmbedInteractiveExample("pages/tabbed/dfn.html", "tabbed-shorter")}}</div>

<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам pull-запрос.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категории Контента</a></th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Потоковый контент</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>, явный контент.</td>
  </tr>
  <tr>
   <th scope="row">Разрешённый контент</th>
   <td><a href="/en-US/docs/Web/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="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</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="Атрибуты">Атрибуты</h2>

<p>Атрибуты этого элемента включают <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p>

<p>В HTML5 {{htmlattrxref("title")}} атрибут имеет особое значение, как указано ниже.</p>

<h2 id="Примечания_по_использованию">Примечания по использованию</h2>

<p>Есть несколько не совсем очевидных аспектов использования элемента<code>&lt;dfn&gt;</code>. Мы рассмотрим их здесь.</p>

<h3 id="Определяемый_термин">Определяемый термин</h3>

<p>Определяемый термин устанавливается в соответствии с этими правилами:</p>

<ol>
 <li>Если <code>&lt;dfn&gt;</code> элемент имеет {{htmlattrxref("title")}} атрибут, значение атрибута <code>title</code> считается определяемым термином. Элемент должен по-прежнему иметь текст внутри него, но этот текст может быть аббревиатурой (возможно, с использованием{{HTMLElement("abbr")}}) или другой формой термина.</li>
 <li>Если объект <code>&lt;dfn&gt;</code> содержит единственный дочерний элемент и не имеет собственного текстового содержимого, а дочерний элемент является {{HTMLElement("abbr")}} элементом с атрибутом <code>title</code>, то строго значение <code>title</code> <code>&lt;abbr&gt;</code> элемента является определяемым термином.</li>
 <li>В противном случае текстовое содержимое <code>&lt;dfn&gt;</code> элемента является определяемым термином. Это показано {{anch("Базовая идентификация термина", "в примере ниже")}}.</li>
</ol>

<div class="note">
<p>Если <code>&lt;dfn&gt;</code> элемент имеет атрибут <code>title</code>, он <em>должен</em> содержать определяемый термин и никакой другой текст.</p>
</div>

<h3 id="Ссылки_на_&lt;dfn>_элементы">Ссылки на <code>&lt;dfn&gt;</code> элементы</h3>

<p>Если вы включаете атрибут {{htmlattrxref("id")}} в <code>&lt;dfn&gt;</code> элемент, вы можете ссылаться на него, используя {{HTMLElement("a")}} элементы. Они должны ссылаться на использование термина, чтобы читатель смог быстро перейти к определению термина, если он ещё не знает его, нажав на ссылку термина.</p>

<p>Это показано ниже в примере {{anch("Ссылки на определения")}}.</p>

<h2 id="Примечания_по_использованию_2">Примечания по использованию</h2>

<ul>
 <li>Элемент <code>&lt;dfn&gt;</code> отмечает определяемый термин; определение термина должно быть дано окружающим {{HTMLElement("p")}},    {{HTMLElement("section")}} или группой списков определений (обычно пара {{HTMLElement("dt")}}{{HTMLElement("dd")}}).</li>
 <li>Точное значение определяемого термина определяется следующими правилами:
  <ol>
   <li>Если элемент <code>&lt;dfn&gt;</code> имеет {{htmlattrxref("title")}} атрибут, то термин является значением этого атрибута.</li>
   <li>Иначе, если он содержит только {{HTMLElement("abbr")}} элемент с {{htmlattrxref("title")}} атрибутом, тогда термин является значением этого атрибута. Это продемонстрировано в {{anch("Использование сокращений и определений вместе")}} ниже.</li>
   <li>В противном случае текстовое содержимое <code>&lt;dfn&gt;</code> элемента является определяемым термином.</li>
  </ol>
 </li>
</ul>

<h2 id="Примеры">Примеры</h2>

<p>Давайте рассмотрим несколько примеров различных сценариев использования.</p>

<h3 id="Базовая_идентификация_термина">Базовая идентификация термина</h3>

<p>В этом примере просто используется <code>&lt;dfn&gt;</code> элемент для нахождения местоположения термина в определении.<code>(&lt;strong&gt;&lt;dfn&gt;&amp;lt;dfn&amp;gt;&lt;/dfn&gt;&lt;/strong&gt;)</code></p>

<h4 id="HTML">HTML</h4>

<p> </p>

<pre class="brush: html">&lt;p&gt;&lt;strong&gt;Элемент определения HTML&lt;/strong&gt; (&lt;strong&gt;&lt;dfn&gt;&amp;lt;dfn&amp;gt;&lt;/dfn&gt;&lt;/strong&gt;)
используется для обозначения термина, определяемого в контексте фразы или предложения.&lt;/p&gt; </pre>

<p> </p>

<p>Поскольку <code>&lt;dfn&gt;</code> элемент не имеет <code>title</code>, текстовое содержимое самого <code>&lt;dfn&gt;</code> элемента используется в качестве определяемого термина.</p>

<h4 id="Результат">Результат</h4>

<p>Это выглядит так в вашем браузере:</p>

<p>{{ EmbedLiveSample('Базовая_идентификация_термина', '', '', '', 'Web/HTML/Element/dfn') }}</p>

<h3 id="Ссылки_на_определения">Ссылки на определения</h3>

<p>Чтобы добавить ссылки к определениям, вы создаёте ссылку так же, как и всегда, с {{HTMLElement("a")}} элементом. &lt;p&gt;&lt;strong&gt;Элемент определения HTML&lt;/strong&gt; <code>(&lt;strong&gt;&lt;dfn&gt;&amp;lt;dfn&amp;gt;&lt;/dfn&gt;&lt;/strong&gt;)</code> используется для обозначения термина, определяемого в контексте фразы или предложения. &lt;/p&gt;</p>

<h4 id="HTML_2">HTML</h4>

<p> </p>

<pre class="brush: html">&lt;p&gt;&lt;strong&gt;Элемент определения HTML&lt;/strong&gt; (&lt;strong&gt;&lt;dfn&gt;&amp;lt;dfn&amp;gt;&lt;/dfn&gt;&lt;/strong&gt;)
используется для обозначения термина, определяемого в контексте фразы или предложения.&lt;/p&gt;

&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Graece donan, Latine voluptatem
vocant. Confecta res esset. Duo Reges: constructio interrete. Scrupulum, inquam, abeunti; &lt;/p&gt;

&lt;p&gt;Negare non possum. Dat enim intervalla et relaxat. Quonam modo? Equidem e Cn. Quid de
Pythagora? In schola desinis.&lt;/p&gt;

&lt;p&gt;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?&lt;/p&gt;

&lt;p&gt;Из-за всего этого мы решили использовать
элемент&lt;code&gt;&lt;a href="#definition-dfn"&gt;&amp;lt;dfn&amp;gt;&lt;/a&gt;&lt;/code&gt; для этого проекта.&lt;/p&gt;</pre>

<p> </p>

<p>Здесь мы видим определение - теперь с атрибутом {{htmlattrxref("id")}} <code>«definition-dfn»</code>, который может использоваться в качестве цели для ссылки. Позднее создаётся ссылка с использованием<code> &lt;a&gt;</code> и с {{htmlattrxref("href", "a")}}атрибутом, установленным на <code>«#definition-dfn»</code>, чтобы установить ссылку обратно на определение.</p>

<h4 id="Результат_2">Результат</h4>

<p>Полученный контент выглядит так:</p>

<p>{{ EmbedLiveSample('HTML_2', '', '', '', 'Web/HTML/Element/dfn') }}</p>

<h3 id="Использование_сокращений_и_определений_вместе">Использование сокращений и определений вместе</h3>

<p>В некоторых случаях вы можете использовать сокращение для термина при его определении. Это можно сделать с помощью<code>&lt;dfn&gt;</code> и {{HTMLElement("abbr")}} элементов вместе, например так:</p>

<h4 id="HTML_3">HTML</h4>

<pre class="brush: html">&lt;p&gt;&lt;dfn&gt;&lt;abbr title="Hubble Space Telescope"&gt;HST&lt;/abbr&gt;&lt;/dfn&gt; является одним из самых
производительных научных инструментов, когда-либо созданных.
Он находится на орбите более 20 лет, просматривая небо и отправляя данные и фотографии
беспрецедентного качества и детализации.&lt;/p&gt;

&lt;p&gt;Действительно, HST, возможно, &lt;abbr title="Hubble Space Telescope"&gt;&lt;/abbr&gt; сделал больше
для развития науки, чем любое другое устройство, когда-либо созданное.&lt;/p&gt; </pre>

<p>Обратите внимание на <code>&lt;abbr&gt;</code> элемент, вложенный в <code>&lt;dfn&gt;</code>. Первый устанавливает, что термин является аббревиатурой («HST») и определяет полный термин («Hubble Space Telescope (Космический телескоп „Хаббл“)») в своём атрибуте <code>title</code>. Последнее указывает на то, что сокращённый термин представляет собой определяемый термин.</p>

<h4 id="Результат_3">Результат</h4>

<p>Вывод приведённого выше кода выглядит следующим образом:</p>

<p>{{ EmbedLiveSample('HTML_3', '', '', '', 'Web/HTML/Element/dfn') }}</p>

<h2 id="Спецификации">Спецификации</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', '&lt;dfn&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-dfn-element', '&lt;dfn&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;dfn&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Совместимость_в_браузерах">Совместимость в браузерах</h2>

<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, <a href="https://github.com/mdn/browser-compat-data">просмотрите</a> https://github.com/mdn/browser-compat-data и отправьте нам pull-запрос.</div>

<p>{{Compat("html.elements.dfn")}}</p>

<h2 id="См._также">См. также</h2>

<ul>
 <li>Элементы, связанные со списками определений: {{HTMLElement("dl")}}{{HTMLElement("dt")}}{{HTMLElement("dd")}}</li>
 <li>{{HTMLElement("abbr")}}</li>
</ul>