تنسيق النص في HTML: الاقتباس والكود والنص المشطوب

تعرفت في درس سابق على <strong> و <em> و <mark>. لكن النصوص الحقيقية فيها أكثر من ذلك: اقتباس من كتاب، وسعر قديم مشطوب، ومعادلة فيها أُس، وسطر كود. لكل حالة من هذه وسم خاص بها في HTML، يعطي النص شكله المناسب ومعناه الصحيح. في هذا الدرس ستتعلم أهمها.

الاقتباسات: blockquote و q

عندما تنقل كلاماً من شخص أو كتاب، فهذا اقتباس، وله وسمان:

• <blockquote>: لاقتباس طويل في فقرة مستقلة. يعرضه المتصفح مُزاحاً عن باقي النص.
• <q>: لاقتباس قصير داخل الجملة. يضع المتصفح حوله علامات التنصيص تلقائياً.

<blockquote>
  <p>العلم في الصغر كالنقش على الحجر.</p>
</blockquote>

<p>قال المعلم: <q>من جدّ وجد</q>، ثم بدأ الدرس.</p>

ولذكر اسم المصدر، أي عنوان الكتاب أو المقال، استخدم <cite>:

<p>قرأت هذه الفكرة في كتاب <cite>كليلة ودمنة</cite>.</p>

تخيّل جريدة: الخبر مكتوب بخط عادي، وكلام المسؤول موضوع في صندوق مميز ليعرف القارئ أنه منقول عنه. هذا ما يفعله <blockquote>.

المحذوف والمضاف: del و ins

• <del>: نص حُذف أو لم يعد صحيحاً. يظهر مشطوباً.
• <ins>: نص أُضيف مكانه. يظهر وتحته خط.

وأشهر استخدام لهما في المتاجر:

<p>السعر: <del>500 جنيه</del> <ins>350 جنيه</ins></p>

المتصفح يشطب السعر القديم، وقارئ الشاشة يستطيع أن يخبر الكفيف أن هذا النص محذوف. ولو شطبت النص بالتنسيق فقط لضاع هذا المعنى.

فوق السطر وتحته: sup و sub

• <sup>: نص مرفوع فوق السطر، مثل الأُس في الرياضيات.
• <sub>: نص منخفض تحت السطر، مثل الأرقام في الصيغ الكيميائية.

<p>مساحة الغرفة 20 م<sup>2</sup></p>
<p>الصيغة الكيميائية للماء: H<sub>2</sub>O</p>
<p>(a + b)<sup>2</sup> = a<sup>2</sup> + 2ab + b<sup>2</sup></p>

عرض الكود: code و kbd و pre

إذا كتبت يوماً درساً في البرمجة أو شرحاً تقنياً، فستحتاج هذه الوسوم الثلاثة:

الوسم	الاستخدام
<code>	اسم وسم أو أمر أو سطر كود داخل الجملة
<kbd>	مفتاح يضغطه المستخدم على لوحة المفاتيح
<pre>	نص يُعرض كما كُتب تماماً، بمسافاته وأسطره

<p>استخدم الوسم <code>img</code> لإضافة صورة.</p>
<p>للحفظ اضغط <kbd>Ctrl</kbd> + <kbd>S</kbd></p>

تذكر أن المتصفح يضغط المسافات والأسطر المتتالية إلى مسافة واحدة. الوسم <pre> يلغي هذه القاعدة، ولذلك يناسب الكود متعدد الأسطر، ونضع بداخله <code>:

<pre><code>let name = "Sara";
if (name) {
  console.log(name);
}</code></pre>

ويصلح <pre> أيضاً لأي نص شكله مهم، مثل أبيات الشعر أو رسم بالحروف.

الاختصارات: abbr

الوسم <abbr> يحيط باختصار، ويشرحه في الخاصية title. عند وضع الفأرة فوقه يظهر الشرح:

<p>نكتب الصفحات بلغة <abbr title="HyperText Markup Language">HTML</abbr>.</p>

ومتى أستخدم b و i و u؟

هذه الوسوم تغيّر الشكل فقط دون أن تضيف معنى:

الوسم	الشكل	مثال مناسب
<b>	عريض	اسم منتج في مراجعة، أو كلمة مفتاحية
<i>	مائل	كلمة من لغة أخرى، أو مصطلح علمي
<u>	تحته خط	كلمة فيها خطأ إملائي

القاعدة بسيطة: اسأل نفسك لماذا تريد تمييز النص. إذا كان مهماً فاستخدم <strong>، وإذا كنت تؤكد عليه في النطق فاستخدم <em>. وإذا لم يكن له معنى خاص وتريد الشكل فقط، فالأفضل غالباً أن تنسّقه بـ CSS.

تجنّب u للنصوص العادية

الزائر تعوّد أن النص الذي تحته خط رابط. إذا وضعت خطاً تحت نص عادي فسيضغط عليه وينتظر، ثم ينزعج.

جرّب بنفسك

هذه صفحة منتج صغيرة تجمع وسوم الدرس. غيّر السعر، وأضف اقتباساً ثانياً من عميل آخر:

جرّب بنفسكHTML

محرر الكود (HTML)<h2>سماعة لاسلكية</h2> <p>السعر: <del>900 جنيه</del> <ins>650 جنيه</ins></p> <p>البطارية تعمل 30 ساعة، ومساحة العلبة 25 سم² فقط.</p> <blockquote> <p>أفضل سماعة اشتريتها، والصوت واضح جداً.</p> <p>— <cite>مراجعة عميل</cite></p> </blockquote> <p>لتشغيل وضع الاقتران اضغط <kbd>Power</kbd> خمس ثوانٍ.</p> <p>الاتصال عبر <abbr title="تقنية اتصال لاسلكي قصير المدى">Bluetooth</abbr>.</p> <pre>المقاسات: الطول 18 سم العرض 16 سم</pre>

شغّلارجع للكود الأصليأو اضغط Ctrl + Enter

الناتج

أخطاء شائعة

• استخدام blockquote للإزاحة فقط: بعض المبتدئين يضعون فيه نصاً عادياً ليتحرك إلى الداخل. الإزاحة وظيفة CSS، والوسم للاقتباسات الحقيقية فقط.
• كتابة علامات التنصيص يدوياً مع q: المتصفح يضيفها بنفسه، فتظهر مكررة.
• نسيان أن pre يحفظ كل المسافات: أي إزاحة تكتبها داخل <pre> في ملفك ستظهر في الصفحة كما هي.

اختبر نفسك

سؤال

أي وسم يناسب كتابة الرقم 2 في الصيغة H2O؟

<small><sup><sub>

سؤال

تريد عرض كود من خمسة أسطر مع الحفاظ على إزاحته. ماذا تستخدم؟

<blockquote><p> مع <br> بعد كل سطر<pre> وبداخله <code>

الخلاصة

• <blockquote> لاقتباس طويل مستقل، و <q> لاقتباس قصير داخل الجملة، و <cite> لاسم المصدر.
• <del> للنص المحذوف و <ins> للنص المضاف.
• <sup> يرفع النص و <sub> يُنزله.
• <code> و <kbd> و <pre> لعرض الكود والمفاتيح والنصوص المنسقة مسبقاً.
• اختر الوسم حسب معنى النص، واترك الشكل لـ CSS.