الفرق بين المراجعتين ل"HTML/q"

المراجعة الحالية بتاريخ 11:23، 26 فبراير 2018

يُشير العنصر <q> إلى أنَّ النص المحتوى فيه يُمثِّل اقتباسًا قصيرًا، ويستعمل هذا العنصر للاقتباسات التي لا تحتاج إلى فقرة كاملة لها، أما للاقتباسات الطويلة فاستخدم العنصر <blockquote>.

مثال عن استخدام العنصر <q>:

<p>
  وفقًا لموقع شركة حسوب:
  <q cite="https://www.hsoub.com/">
  نعمل لنمكّن الشباب ونفتح مزيدًا من الفرص أمامهم. نحن حسوب.
  </q>
</p>

بطاقة العنصر

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

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

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

الخاصيات

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

`cite`

قيمة هذه الخاصية تُمثِّل رابط URL الذي يُشير إلى المستند المصدري لهذا الاقتباس أو لشرحه، فالغرض من هذه الخاصية هو توفير رابط لشرح المزيد من المعلومات حول الاقتباس أو لتبيان مصدره.

التنسيق الافتراضي

أغلبية المتصفحات الحديث ستُضيف علامتَي اقتباس حول النص المحتوى في عنصر <q> تلقائيًا، لكن قد يلزمك استخدام قاعدة CSS لإضافة علامتَي الاقتباس في المتصفحات القديمة.

تعرض تلك المتصفحات هذا العنصر عبر ضبط الخاصية display إلى inline، واستخدام العنصر الزائف ‎::before و ‎::after مع الخاصية content لإضافة علامات اقتباس قبل وبعد العنصر:

q {
  display: inline;
}

q:before {
  content: open-quote;
}

q:after {
  content: close-quote;
}

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

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

@@ سطر 5: / سطر 5: @@
 <syntaxhighlight lang="html">
 <p>
-وفقًا لموقع شركة حسوب:
+  وفقًا لموقع شركة حسوب:
    <q cite="https://www.hsoub.com/">
-نعمل لنمكّن الشباب ونفتح مزيدًا من الفرص أمامهم. نحن حسوب.
+  نعمل لنمكّن الشباب ونفتح مزيدًا من الفرص أمامهم. نحن حسوب.
    </q>
 </p>
 </syntaxhighlight>
+== بطاقة العنصر ==
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 51: / سطر 52: @@
 قيمة هذه الخاصية تُمثِّل رابط URL الذي يُشير إلى المستند المصدري لهذا الاقتباس أو لشرحه، فالغرض من هذه الخاصية هو توفير رابط لشرح المزيد من المعلومات حول الاقتباس أو لتبيان مصدره.
-== ملاحظات ==
+== التنسيق الافتراضي ==
-أغلبية المتصفحات الحديث ستُضيف علامتَي اقتباس حول النص المحتوى في عنصر <code><nowiki><q></nowiki></code> تلقائيًا، لكن قد يلزمك استخدام قاعدة CSS لإضافة علامتَي الاقتباس في المتصفحات القديمة.
+أغلبية المتصفحات الحديث ستُضيف علامتَي اقتباس حول النص المحتوى في عنصر <code><nowiki><q></nowiki></code> تلقائيًا، لكن قد يلزمك استخدام قاعدة [[CSS]] لإضافة علامتَي الاقتباس في المتصفحات القديمة.
+تعرض تلك المتصفحات هذا العنصر عبر ضبط الخاصية <code>[[CSS/display|display]]</code> إلى <code>inline</code>، واستخدام العنصر الزائف <code>[[CSS/::before|‎::before]]</code> و ‎<code>[[CSS/::after|::after]]</code> مع الخاصية <code>[[CSS/content|content]]</code> لإضافة علامات اقتباس قبل وبعد العنصر:<syntaxhighlight lang="css">
+q {
+  display: inline;
+}
+q:before {
+  content: open-quote;
+}
+q:after {
+  content: close-quote;
+}
+</syntaxhighlight>
 ==مصادر ومواصفات==
@@ سطر 58: / سطر 73: @@
 *مواصفة [http://www.w3.org/TR/html5/text-level-semantics.html#the-q-element HTML5].
 *مواصفة [http://www.w3.org/TR/html401/struct/text.html#h-9.2.2 HTML 4.01].
-[[تصنيف:HTML]]
+[[تصنيف:HTML|{{SUBPAGENAME}}]]
-[[تصنيف:HTML Elements]]
+[[تصنيف:HTML Elements|{{SUBPAGENAME}}]]
-[[تصنيف:Inline text semantics]]
+[[تصنيف:HTML Inline text semantics|{{SUBPAGENAME}}]]