تخطَّ إلى المحتوى

<blockquote>

وسم الاقتباس <blockquote>

وسم blockquote يميز نصًّا منقولًا من مصدر آخر ككتلة اقتباس مستقلة — مع cite لرابط المصدر.

إعلان صريح للقارئ والآلات معًا: «هذا الكلام ليس لي». المتصفح يزيحه افتراضيًّا عن النص، والعرف التصميمي الراسخ يضيف خطًّا جانبيًّا (يمين الصفحة في RTL) وخلفية هادئة.

للمصدر مساران: خاصية cite برابط المصدر (غير مرئية، للآلات)، وسطر نسبة مرئي أسفل الاقتباس. وللاقتباس القصير داخل الجملة يوجد وسم q الذي يضيف علامات التنصيص تلقائيًّا.

الصياغة

<blockquote cite="https://source.com">
  <p>النص المقتبس.</p>
</blockquote>

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS
<blockquote style="border-right:4px solid #7c5cff; background:#ede9fe; margin:0; padding:12px 16px; border-radius:8px">
  <p style="margin:0">التعلم بالتجربة أبقى أثرًا من التعلم بالمشاهدة.</p>
</blockquote>
<p style="font-size:14px; color:#666">— حكمة برمجية</p>
النتيجة المباشرة:

أهم الخصائص

الخاصيةالوظيفة
citeرابط مصدر الاقتباس — للآلات، لا يظهر للزائر

💡 نصائح عملية

  • في RTL اجعل خط التمييز يمينًا: border-right لا border-left
  • اقتباس قصير وسط جملة؟ وسم q يتكفل بعلامات التنصيص

⚠️ أخطاء شائعة

  • استخدامه للإزاحة الجمالية لنص ليس اقتباسًا — الإزاحة وظيفة margin
  • نسيان نسبة المصدر فيُحسب الكلام عليك

وسوم ذات صلة

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار HTML الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs