عرض مصدر HTML/q

<noinclude>{{DISPLAYTITLE:العنصر <code>&lt;q&gt;</code>}}</noinclude>
يُشير العنصر <code><nowiki><q></nowiki></code> إلى أنَّ النص المحتوى فيه يُمثِّل اقتباسًا قصيرًا، ويستعمل هذا العنصر للاقتباسات التي لا تحتاج إلى فقرة كاملة لها، أما للاقتباسات الطويلة فاستخدم العنصر <code>[[HTML/blockquote|<nowiki><blockquote></nowiki>]]</code>.

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

== بطاقة العنصر ==
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" | تصنيفات المحتوى
| عنصر تنظيمي أو عنصر عادي.
|-
! scope="row" | المحتوى المسموح
| محتوى عادي.
|-
! scope="row" | الوسم المختصر
| لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
|-
! scope="row" | العناصر الأب
| أي عنصر يقبل المحتوى العادي.
|-
! scope="row" | واجهة DOM
| <code>HTMLQuoteElement</code>
|}

== دعم المتصفحات ==
{| class="wikitable" style="width: 50%;"
 !| Chrome
 ! Firefox
 ! Edge
 ! Safari
 ! Opera
|-
|مدعوم
|مدعوم
|مدعوم
|مدعوم
|مدعوم
|}

== الخاصيات ==
يمكن استخدام [[HTML/Global Attributes|الخاصيات العامة]] في هذا العنصر.

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

== التنسيق الافتراضي ==
أغلبية المتصفحات الحديث ستُضيف علامتَي اقتباس حول النص المحتوى في عنصر <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>

==مصادر ومواصفات==
*معيار [https://html.spec.whatwg.org/multipage/semantics.html#the-q-element HTML Living Standard].
*مواصفة [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|{{SUBPAGENAME}}]]
[[تصنيف:HTML Elements|{{SUBPAGENAME}}]]
[[تصنيف:HTML Inline text semantics|{{SUBPAGENAME}}]]