الإقتباسات في HTML

الإقتباسات في HTML

يا هلا والله! اليوم بنتكلم عن كيف نضيف الإقتباسات والنصوص الخاصة في صفحتك الـ HTML بشكل صح ومرتب. هذي التاجات مهمة عشان المتصفحات ومحركات البحث تفهم محتوى صفحتك أفضل.

الإقتباسات الطويلة: <blockquote>

إذا عندك إقتباس طويل، يعني أكثر من سطر، الأفضل تستخدم تاج

. هذا التاج يخلي النص يظهر بشكل منفصل عن باقي الفقرة، وغالباً المتصفح يضيف له مسافة بادئة (indentation) من اليمين واليسار.

تقدر تضيف مصدر الإقتباس باستخدام خاصية cite، بس هذي الخاصية ما تظهر للمستخدم مباشرة، هي للمتصفح ومحركات البحث.

<blockquote cite="https://www.example.com/author-quote">
  <p>البرمجة ليست مجرد كتابة أكواد، بل هي فن حل المشكلات والتفكير المنطقي الذي يبني المستقبل.</p>
  <footer>— مبرمج سعودي</footer>
</blockquote>

ملاحظة: لا تستخدم

فقط عشان تضيف مسافة بادئة للنص. هذا استخدام خاطئ. استخدمه فقط للإقتباسات.

الإقتباسات القصيرة (Inline): <q>

لو عندك إقتباس قصير، يعني كلمة أو جملة وحدة داخل فقرة، استخدم تاج . المتصفح غالباً يضيف علامات إقتباس (quotation marks) حول النص اللي داخل هذا التاج تلقائياً.

<p>قال أحد الحكماء: <q>التعلم المستمر هو مفتاح النجاح في عالم التقنية.</q> وهذا صحيح جداً.</p>

مصدر الإقتباس أو العمل: <cite>

تاج يستخدم عشان تحدد عنوان عمل معين (كتاب، أغنية، فيلم، مقال، إلخ) أو اسم مؤلف. هو يعطي معنى دلالي للمتصفح، وغالباً المتصفح يعرض النص داخله بخط مائل (italic).

<p>مقولة شهيرة من كتاب <cite>فن البرمجة</cite> تقول: "لا تكتب كوداً يمكن لأي شخص أن يفهمه، بل اكتب كوداً لا يحتاج أحد لشرحه".</p>

الإختصارات: <abbr>

إذا عندك إختصار وتبغى توضح معناه الكامل لما المستخدم يحط الماوس عليه، استخدم تاج . حط المعنى الكامل في خاصية title.

<p>نحن نعمل على تطوير موقع باستخدام <abbr title="HyperText Markup Language">HTML</abbr> و <abbr title="Cascading Style Sheets">CSS</abbr>.</p>

معلومات الإتصال: <address>

تاج

يستخدم لعرض معلومات الإتصال الخاصة بمؤلف المستند أو مالكه. غالباً يعرض النص بخط مائل.

<address>
  موقعنا: الرياض، المملكة العربية السعودية<br>
  البريد الإلكتروني: <a href="mailto:info@example.com">info@example.com</a><br>
  الهاتف: <a href="tel:+966501234567">+966 50 123 4567</a>
</address>

تغيير إتجاه النص: <bdo>

تاج (Bi-Directional Override) يستخدم عشان تغير إتجاه النص بشكل يدوي، حتى لو كان إتجاه الصفحة الأساسي مختلف. هذا مفيد لو عندك نص بلغة تكتب من اليمين لليسار (مثل العربية) وتبغى جزء منه ينكتب من اليسار لليمين أو العكس.

<p>هذا النص الطبيعي.</p>
<p><bdo dir="rtl">هذا النص سيكتب من اليمين لليسار.</bdo></p>
<p><bdo dir="ltr">هذا النص سيكتب من اليسار لليمين.</bdo></p>

وبكذا نكون غطينا أهم التاجات اللي تخص الإقتباسات والنصوص الخاصة. استخدمها صح عشان صفحتك تكون دلالية ومفهومة للمتصفحات ومحركات البحث. بالتوفيق!