الاقتباسات والمختصرات (q, blockquote, abbr, address)
| العنصر | طبيعة التنسيق والظهور | الوظيفة الدلالية والسمات المرافقة |
|---|---|---|
| q | سطر مدمج داخل النص الرئيسي ويقوم المتصفح بإضافة علامات اقتباس مزدوجة تلقائياً | يمثل الاقتباسات القصيرة والمباشرة ويدعم سمة cite لتحديد رابط المصدر الأصلي |
| blockquote | كتلة برمجية منفصلة تُعرض بسطر جديد وإزاحة هامشية افتراضية جهة اليمين | يمثل الاقتباسات الطويلة والممتدة المأخوذة من كتب أو مقالات ويدعم سمة cite |
| abbr | نص قياسي يظهر بنقاط منقطة أسفله في بعض المتصفحات | يمثل الاختصارات والمصطلحات الأكرونيم ويستخدم سمة title لإظهار المعنى الكامل عند تحويم الفأرة |
| address | كتلة برمجية منفصلة تُعرض بخط مائل افتراضياً | يمثل معلومات الاتصال والعناوين الخاصة بصاحب المقال أو ناشر الصفحة وليس للعناوين العامة |
تضم لغة HTML مجموعة من الأوسمة الدلالية عالية الأهمية في تصنيف المحتوى وتوثيق مصادره. تساعد هذه العناصر محركات البحث على فهم المراجع المقتبسة، والتعرف على هوية جهات الاتصال، وتفكيك المصطلحات والمختصرات المعقدة، مما يرفع من جودة أرشفة الموقع (SEO) وتوافقه مع معايير الوصولية العالمية (Accessibility).
تُوفر اللغة وسامين منفصلين للاقتباس بناءً على طول النص المقتبس وحجمه:
سمة المصدر (cite Attribute): يدعم كلا الوسمين سمة اختيارية تُكتب داخل الوسم باسم cite ويُوضع بداخلها رابط ويب (URL) يشير إلى المصدر الأصلي المأخوذ منه هذا الاقتباس؛ وهي سمة غير مرئية للمستخدم العادي ولكنها تمنح محركات البحث توثيقاً برمجياً دقيقاً.
يُمثل هذا الوسم كلمة (Abbreviation). ويُستخدم لتحديد الكلمات المختصرة أو الأوائلية (Acronyms) مثل الأسماء البرمجية أو الهيئات الدولية.
يُستخدم هذا الوسم حصرياً لتحديد معلومات الاتصال البريدية أو الرقمية الخاصة بالمالك القانوني للموقع أو الكاتب الفعلي للمقال. يقوم المتصفح بعرض النص بداخلها بخط مائل بشكل افتراضي.
| 1 | <!-- اقتباس قصير --> |
| 2 | <p>قال أينشتاين: <q cite="source.html">الخيال أهم من المعرفة</q></p> |
| 3 | |
| 4 | <!-- اقتباس طويل --> |
| 5 | <blockquote cite="https://example.com/source"> |
| 6 | <p>العقل في الإنسان كالبوصلة في السفينة، |
| 7 | يوجهه نحو الصواب متى أُحسن استخدامه.</p> |
| 8 | <footer>— ابن رشد</footer> |
| 9 | </blockquote> |
| 10 | |
| 11 | <!-- اختصار --> |
| 12 | <p>نحن نستخدم <abbr title="Artificial Intelligence">AI</abbr> في تطبيقنا.</p> |
| 13 | |
| 14 | <!-- عنوان التواصل --> |
| 15 | <address> |
| 16 | تواصل مع المؤلف: <a href="mailto:info@nouvil.com">info@nouvil.com</a> |
| 17 | </address> |
مثال 1: إليك الصياغة البرمجية الصحيحة لتضمين الاقتباسات، والمختصرات، وعناوين الاتصال في كود الـ HTML:
| 1 | <!-- تطبيق وسم q للاقتباس القصير المدمج --> |
| 2 | <p>لقد قال مؤسس المنصة: <q cite="https://nouvil.com/about">التعليم البرمجي يجب أن يكون متاحاً ومبسطاً للجميع</q> وهذا ما نعمل عليه.</p> |
| 3 | |
| 4 | <!-- تطبيق وسم blockquote للاقتباس الطويل والكتلي --> |
| 5 | <blockquote cite="https://books.nouvil.com/html-guide"> |
| 6 | إن لغة HTML ليست لغة برمجة بالمعنى التقليدي، بل هي لغة هيكلية وتوصيفية تُبنى عليها الهياكل الأساسية لكافة صفحات الويب في العالم، وبدونها لا يمكن للمتصفح فهم وتوزيع النصوص والصور. |
| 7 | </blockquote> |
| 8 | |
| 9 | <!-- تطبيق وسم abbr للمختصرات البرمجية والدولية --> |
| 10 | <p>نتعلم في هذا المسار لغة <abbr title="HyperText Markup Language">HTML</abbr> وبناء الهياكل لتهيئة المواقع لمحركات البحث.</p> |
| 11 | <p>تم إصدار المعايير الجديدة من قِبل منظمة <abbr title="World Wide Web Consortium">W3C</abbr> العالمية.</p> |
| 12 | |
| 13 | <!-- تطبيق وسم address لمعلومات الناشر وصاحب العمل --> |
| 14 | <address> |
| 15 | يمكنك التواصل مع كاتب المقال عبر البريد الإلكتروني: support@nouvil.com<br> |
| 16 | أو زيارة مقرنا الرئيسي: برج المطورين، الطابق الخامس، مدينة أكتوبر، مصر. |
| 17 | </address> |