الاقتباسات في HTML
سبق أن علّمتَ الأهمية والتشديد بوسوم التنسيق. الاقتباس مختلف: أنت تعيد كلمات شخص آخر (أو مقطعاً من عمل)، ويجب أن يقول HTML ذلك بوضوح. عناصر الاقتباس المخصّصة تساعد المتصفحات وأدوات المساعدة والقراء على تمييز الاقتباس عن نثرك المحيط — أمراً لا تنقله علامات الاقتباس الزخرفية وحدها بالكامل. عندما تضع المعنى في الوسم الصحيح، يصبح المحتوى أوضح للبشر وللآلات معاً، ويبقى قابلاً لإعادة التصميم لاحقاً دون فقدان الدور الدلالي.
ماذا يُعدّ اقتباساً في HTML؟
الاقتباس نص تقدّمه على أنه صادر عن متحدث أو كاتب أو مصدر آخر. قد يكون عبارة قصيرة داخل جملتك، أو مقطعاً أطول يقف منفصلاً ككتلة. يوفّر HTML العنصر q للحالة القصيرة المضمَّنة، وblockquote للحالة الأطول ككتلة. وهناك أدوات إضافية للمصدر: عنصر cite لعنوان عمل ظاهر للقراء، وسمة cite على blockquote لرابط مصدر قابل للقراءة آلياً. الهدف ليس تجميل الصفحة فقط، بل الإعلان الصادق أن هذه الكلمات منسوبة إلى مصدر خارجي وليست من صياغتك الحرة في تلك اللحظة.
إجابة مباشرة
استخدم q لاقتباس قصير داخل جملة. استخدم blockquote لمقطع اقتباس أطول يقف بمفرده. عندما يساعد ذلك القراء، اذكر اسم العمل أو المقالة بعنصر cite في النص الظاهر. على blockquote يمكنك أيضاً ضبط cite="https://…" إلى رابط المصدر — ذلك الرابط موجّه للآلات ولا يُعرض عادةً بمفرده كعنوان مقروء. باختصار: اختر الوسم حسب طول الاقتباس وموضعه، ثم أكمل الاعتماد الظاهر عند الحاجة حتى لا يبقى المصدر مخفياً داخل سمة لا يراها الزائر.
أدوات الاقتباس في لمحة
📊 q و blockquote و cite
| الأداة | الدور | المكان المعتاد |
|---|---|---|
| q | اقتباس قصير مضمَّن | داخل فقرة أو جملة |
| blockquote | مقطع اقتباس أطول | كتلته الخاصة، غالباً مع p متداخلة |
| عنصر cite | عنوان عمل في نص ظاهر | النص الجاري قرب الاقتباس |
| سمة cite | رابط مصدر لـ blockquote | على وسم بداية blockquote |
اقتباسات قصيرة مضمَّنة مع q
عندما تجلس الكلمات المقتبسة داخل جملتك أنت، لفّها بـ q. تضيف معظم المتصفحات علامات الاقتباس نيابةً عنك. ما زلت تكتب الكلمات المنطوقة أو المكتوبة بين الوسمين؛ وعادةً لا تكتب علامات الاقتباس المنحنية يدوياً. هذا الوسم مناسب لجملة مقتبسة قصيرة أو عبارة شهيرة داخل سردك، لا لمقال كامل منسوخ. إذا امتد الاقتباس إلى عدة جمل مستقلة، فكّر فوراً في blockquote بدل تكديس عدة q بلا داعٍ.
اقتباس مضمَّن مع q
html<p>
She said <q>Practice every day</q> and closed the book.
</p>قراءة المثال
- عنصر
pالخارجي هو سردك أنت qيلفّ العبارة المقتبسة فقط- إغلاق
qيعيد بقية الجملة إلى نثر عادي - لو كان هذا مقتطفاً طويلاً متعدد الجمل، لكان
blockquoteأنسب - لاحظ أن معنى «هذه كلمات مقتبسة» موجود في الوسم، لا في شكل الخط وحده
مقاطع أطول مع blockquote
استخدم blockquote عندما يكون الاقتباس طويلاً بما يكفي ليقف ككتلة مستقلة — غالباً فقرة واحدة أو أكثر. ضع المحتوى المقتبس داخل blockquote. يمكن لسمة cite أن تخزّن رابط المصدر. ضع عنوان العمل المقروء للبشر بعنصر cite في النص الظاهر، عادةً قرب الاقتباس. كثير من المواقع تضيف مسافة بادئة افتراضية لـ blockquote، لكن تلك المسافة مظهر فقط؛ لا تستخدم الوسم لمجرد «إزاحة النص» إن لم تكن تقتبس فعلاً من مصدر.
اقتباس كتلي مع رابط المصدر
html<blockquote cite="https://example.com/tips">
<p>Clear HTML is easier to maintain than clever HTML.</p>
<p>Readers thank you for structure they can trust.</p>
</blockquote>لماذا سمة cite وحدها لا تكفي
تساعد سمة cite الأدوات وبعض برامج الفحص على معرفة رابط المصدر. كثير من الزوار لا يرون قيم السمات أبداً. امنح الناس أيضاً سطراً اعتماداً مقروءاً. الجمع بين السمة (للآلات) والعنوان الظاهر بعنصر cite (للبشر) يغطي الحاجتين دون خلط الأدوار. إذا ظهر العنوان في الفقرة فقط دون رابط، فهذا مقبول للقراء؛ وإذا وُجد الرابط دون عنوان ظاهر، فالقراء يخسرون الاعتماد المرئي.
عنوان مصدر ظاهر مع cite
html<p>Source: <cite>Example Tips</cite></p>اختيار q مقابل blockquote
اسأل سؤالين: ما طول الاقتباس؟ هل يقطع جملة أم يقف وحده؟
- عبارة قصيرة داخل جملتك →
q - مقطع أطول ككتلة مستقلة →
blockquote - عنوان كتاب أو مقال أو موقع في النص الجاري → عنصر
cite - رابط المصدر لاقتباس كتلي → سمة
citeعلىblockquote
لا تلفّ صفحة كاملة داخلblockquoteعملاق فقط لعمل مسافة بادئة. المسافة البادئة عرض؛ أماblockquoteفلل اقتباسات حقيقية. عندما تخلط بينهما، تربك القراء وأدوات المساعدة، وقد تبدو الصفحة «مقتبسة كلها» رغم أن معظمها كلامك أنت. التزم بالطول والموضع كمعيارين بسيطين، ثم أضف الاعتماد الظاهر عند الحاجة.
المعنى مقابل علامات الاقتباس من CSS وحدها
يمكنك تزوير العلامات بـ CSS أو بمحارف " مكتوبة يدوياً. للاقتباس الحقيقي فضّل q أو blockquote حتى يعلّم المستند المعنى. ما زال بالإمكان ظهور علامات بصرية — كثيراً ما تنسّق المتصفحات q بعلامات اقتباس — لكن العنصر يحمل الدور حتى لو غيّرت ورقة الأنماط المظهر لاحقاً. الزخرفة وحدها قد تختفي أو تختلف بين الأجهزة؛ الدور الدلالي في HTML يبقى أوضح وأكثر ثباتاً للقراءة الآلية وللوصولية.
تمرين في محرّرك
- اكتب فقرة تتضمن اقتباساً قصيراً بـ
qمن مدرب أو معلّم خيالي. - أضف
blockquoteبجملتين قصيرتين من مقال خيالي. - تحته سطراً يستخدم عنصر
citeلتسمية عنوان المقال. - اختيارياً اضبط
cite="https://example.com/article"علىblockquote. - احفظ وافتح الصفحة. تأكد أن الاقتباس المضمَّن والاقتباس الكتلي يبدوان متمايزين.
- استبدل مؤقتاً
qبنص عادي وعلامات اقتباس مكتوبة فقط، ثم أعدq— لاحظ فرق دور الوسم عن الزخرفة وحدها.
كرّر التمرين بعناوين مصادر مختلفة حتى يصبح التمييز بين العنصر والسمة تلقائياً. راقب أيضاً أن إغلاق الوسوم صحيح حتى لا يبقى النص التالي معلَّماً خطأً كاقتباس.
أخطاء تُبهم الاقتباسات
- لفّ صفحة كاملة في
blockquoteعملاق بلا اقتباس حقيقي - الاعتماد على CSS أو علامات مكتوبة فقط عندما يكون النص مقتبساً فعلاً ويجب أن يستخدم
q/blockquote - وضع عنوان المصدر الوحيد داخل سمة
citeوافتراض أن القراء سيرونه - تداخل
blockquoteداخلqبلا سبب واضح - اقتباس نفسك للزينة — احفظ هذه العناصر للكلمات المقتبسة حقاً
- نسيان إغلاق
qأوblockquoteفيبقى النص اللاحق معلَّماً كاقتباس
كل خطأ من هذه الأخطاء يضعف الثقة أو يخلط العرض بالمعنى. راجع صفحتك بعين القارئ: هل يتضح أين ينتهي كلامك وأين يبدأ كلام المصدر؟ وهل الاعتماد الظاهر موجود حيث يحتاجه الإنسان؟
ملخص
- اقتباسات قصيرة داخل جملة →
q - كتل اقتباس أطول →
blockquote - عناوين أعمال ظاهرة → عنصر
cite - رابط مصدر اختياري → سمة
citeعلىblockquote - علّم الاقتباسات الحقيقية في HTML؛ لا تعتمد على التنسيق وحده للمعنى
- ابقَ صادقاً: استخدم العناصر عندما تقتبس فعلاً من مصدر
بهذا الترتيب تبني صفحات أوضح للبشر وللأدوات، وتفصل بين الزخرفة والدلالة، وتبقي الاعتماد المقروء حيث يحتاجه الزائر.
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى