الفرق بين المراجعتين لصفحة: «HTML/dfn»

المراجعة الحالية بتاريخ 08:14، 19 فبراير 2018

يُمثِّل العنصر <dfn> تعريفًا لأحد المصطلحات في أوّل مرة يرد فيها.

هذا مثالٌ عن تعريف المصطلح «The Internet» في HTML5 ويكون المصطلح المُعرَّف هو المحتوى النصي للعنصر <dfn>:

<!-- تعريف الإنترنت -->
<p><dfn id="def-internet">الإنترنت</dfn> هي شبكة عالمية تربط بين ملايين الأجهزة عبر بروتوكول TCP/IP.</p>

ولاحقًا في نفس المستند، نُعرِّف المصطلح «World-Wide Web» والذي تؤخذ قيمته من الخاصية title للعنصر <abbr> الموجود داخل العنصر <dfn>. لاحظ كيف أشرنا إلى تعريف المصطلح «The Internet»:

<dl>
  <!-- تعريف "الشبكة العنكبوتية العالمية" والإشارة إلى "الإنترنت" في الفقرة السابقة -->
  <dt>
    <dfn>
      <abbr title="الشبكة العنكبوتية العالمية">WWW</abbr>
    </dfn>
  </dt>
  <dd>الشبكة العنكبوتية العالمية هي مجموعة من المستندات التي يمكن الوصول إليها عبر
  <a href="#def-internet">الإنترنت</a>.</dd>
</dl>

بطاقة العنصر

تصنيفات المحتوى	عنصر تنظيمي أو عنصر عادي.
المحتوى المسموح	محتوى عادي، لكن لا يجوز استخدام العنصر `<dfn>` داخله.
الوسم المختصر	لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب	أي عنصر يقبل المحتوى العادي.
واجهة DOM	`HTMLElement`

دعم المتصفحات

Chrome	Firefox	Edge	Safari	Opera
مدعوم	مدعوم	مدعوم	مدعوم	مدعوم

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

أصبح للخاصية title معنى خاص في HTML5، وهو مذكور في ملاحظات الاستخدام أدناه.

ملاحظات الاستخدام

يوضع ضمن العنصر <dfn> المصطلح الذي سيُعرَّف، أما شرح ذاك المصطلح فيكون باستخدام عنصر <p> أو <section> أو قائمة وصف (باستخدام العنصرين <dt> و <dd>) مجاور.
يُحدَّد ما هو المصطلح الذي سيُعرَّف باتباع القواعد الآتية:
1. إذا كان للعنصر <dfn> الخاصية title، فالمصطلح المُعرَّف هو قيمة تلك الخاصية.
2. وإذا احتوى على عنصر <abbr> له الخاصية title، فسيكون المصطلح المُعرَّف هو قيمة تلك الخاصية.
3. فيما عدا ذلك، فالمحتوى النصي الموجود ضمن العنصر <dfn> هو المصطلح الذي سيُعرَّف.

تنسيق العنصر

تعرض أغلبية المتصفحات العنصر <dfn> مع ضبط نمط الخط (الخاصية font-style) إلى italic:

dfn {
  font-style: italic;
}

مصادر ومواصفات

معيار HTML Living Standard.
مواصفة HTML5.
مواصفة HTML 4.01.

@@ سطر 3: / سطر 3: @@
 هذا مثالٌ عن تعريف المصطلح «The Internet» في HTML5 ويكون المصطلح المُعرَّف هو المحتوى النصي للعنصر <code><nowiki><dfn></nowiki></code>:<syntaxhighlight lang="html">
-<!-- Define "The Internet" -->
+<!-- تعريف الإنترنت -->
-<p><dfn id="def-internet">The Internet</dfn> is a global
+<p><dfn id="def-internet">الإنترنت</dfn> هي شبكة عالمية تربط بين ملايين الأجهزة عبر بروتوكول TCP/IP.</p>
-system of interconnected networks that use the Internet
-Protocol Suite (TCP/IP) to serve billions of users
-worldwide.</p>
 </syntaxhighlight>ولاحقًا في نفس المستند، نُعرِّف المصطلح «World-Wide Web» والذي تؤخذ قيمته من الخاصية <code>title</code> للعنصر <code>[[HTML/abbr|<nowiki><abbr></nowiki>]]</code> الموجود داخل العنصر <code><nowiki><dfn></nowiki></code>. لاحظ كيف أشرنا إلى تعريف المصطلح «The Internet»:<syntaxhighlight lang="html">
 <dl>
-   <!-- Define "World-Wide Web" and reference
+   <!-- تعريف "الشبكة العنكبوتية العالمية" والإشارة إلى "الإنترنت" في الفقرة السابقة -->
-       definition for "the Internet" -->
    <dt>
      <dfn>
-       <abbr title="World-Wide Web">WWW</abbr>
+       <abbr title="الشبكة العنكبوتية العالمية">WWW</abbr>
      </dfn>
    </dt>
-   <dd>The World-Wide Web (WWW) is a system of
+   <dd>الشبكة العنكبوتية العالمية هي مجموعة من المستندات التي يمكن الوصول إليها عبر
-  interlinked hypertext documents accessed on
+   <a href="#def-internet">الإنترنت</a>.</dd>
-   <a href="#def-internet">the Internet</a>.</dd>
 </dl>
 </syntaxhighlight>
+== بطاقة العنصر ==
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 67: / سطر 63: @@
 *# وإذا احتوى على عنصر <code>[[HTML/abbr|<nowiki><abbr></nowiki>]]</code> له الخاصية <code>title</code>، فسيكون المصطلح المُعرَّف هو قيمة تلك الخاصية.
 *# فيما عدا ذلك، فالمحتوى النصي الموجود ضمن العنصر <code><nowiki><dfn></nowiki></code> هو المصطلح الذي سيُعرَّف.
+== تنسيق العنصر ==
+تعرض أغلبية المتصفحات العنصر <code><nowiki><dfn></nowiki></code> مع ضبط نمط الخط (الخاصية <code>[[CSS/font-style|font-style]]</code>) إلى <code>italic</code>:<syntaxhighlight lang="css">
+dfn {
+  font-style: italic;
+}
+</syntaxhighlight>
 ==مصادر ومواصفات==