عناصر HTML الأقل شيوعًا وكيفية استخدامها في كودك

يحتوي HTML على الكثير من العلامات التي يستخدمها العديد من الأشخاص يوميًا، مثل <div> و<p> و<a>. لكن هناك أيضًا بعض الجواهر الخفية التي غالبًا ما تمر دون أن تلاحظ. يمكن أن تساعد هذه العلامات في جعل المواقع الإلكترونية أكثر جاذبية، وسهولة في الوصول، وذات معنى دون الكثير من الجهد الإضافي.

في هذه المقالة، سنناقش مجموعة من عناصر HTML الفريدة التي يمكن أن تعزز صفحات الويب الخاصة بك. إنها تقدم وظائف محددة لتنسيق النص، وتحسين قابلية القراءة، وإضافة ميزات تفاعلية.

جدول المحتويات

1. علامة <q>: اقتباسات قصيرة داخل السطر

2. علامة <s>: نص مخطوط

3. علامة <mark>: نص مميز

4. علامة <ruby>: توضيح نص لغة شرق آسيا

5. علامة <time>: الوقت والتاريخ الدلالي

6. علامة <bdi>: عزل النص ثنائي الاتجاه

7. علامة <dfn>: تعريف المصطلحات

8. علامة <wbr>: فرص انقطاع السطر

9. علامة <ins>: نص مدرج

10. العلامة <del>: نص محذوف

11. الاستنتاج

العلامة <q>: اقتباس قصير داخلي

العلامة <q> تُستخدم لإضافة اقتباسات قصيرة داخل فقرة. تساعد في جعل الاقتباسات تبدو مختلفة وأسهل في التمييز، دون تقطيع تدفق النص. تقوم هذه العلامة تلقائيًا بإضافة علامات اقتباس حول المحتوى.

الوصف والصياغة

الهيكل الأساسي للعلامة <q> بسيط:

<p>She said, <q>This is amazing!</q></p>

هذا سيظهر كما يلي:
قالت: “هذا رائع!”

الاختلاف عن عنصر <blockquote>

العلامة <q> تُستخدم للاقتباسات القصيرة داخل جملة. من ناحية أخرى، يُستخدم عنصر <blockquote> للاقتباسات الطويلة التي عادة ما تحتاج إلى مساحة خاصة بها أو فقرة.

على سبيل المثال:

<blockquote>
  "This is a long quote that needs its own space. It is different from a short quote."
</blockquote>

سيظهر هذا الكتلة بتقدم ومن المفترض أن تبرز شريحة أكبر من النص المقتبس.

حالات الاستخدام: إضافة اقتباسات داخل الفقرات

الوسم <q> مثالي للحالات التي تحتاج فيها إلى ذكر اقتباس في جملة دون فصله كثيرًا. على سبيل المثال، عندما تقتبس شخصًا ما في مقال أو مشاركة في مدونة:

<p>The professor said, <q>Practice makes perfect</q>, during the class.</p>

في هذه الحالة، يحتفظ الوسم <q> بالاقتباس بحجم صغير وداخل نفس الفقرة.

توافق المتصفح ونصائح التنسيق

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

q {
  quotes: "«" "»";
  font-style: italic;
}

سيقوم هذا الكود بتغيير الاقتباسات إلى علامات بنمط فرنسي (« و ») وجعل الاقتباس مائل.

معظم المتصفحات تدعم وسم <q>، لذا لا داعي للقلق بشأن مشاكل التوافق للمستخدمين الحديثين. ولكن قد تحتاج المتصفحات القديمة إلى اهتمام إضافي، لذا دائمًا قم بالاختبار إذا كان جمهورك يستخدم الإصدارات القديمة.

الوسم <s>: نص مشطوب

يُستخدم وسم <s> لعرض النص الذي لم يعد صحيحًا أو ذو صلة، أو تمت إزالته. يضع خطًا عبر منتصف النص، والذي نطلق عليه “مشطوبًا.” يُستخدم هذا الوسم في كثير من الأحيان للإشارة إلى شيء تم تحريره أو تحديثه.

الشرح والاستخدام

وسم <s> سهل الاستخدام. ضعه حول النص الذي تريد أن تمرر خطًا خلاله:

<p>This product was <s>$50</s> now only $30!</p>

سيظهر هذا كما يلي:
كان سعر هذا المنتج $50 الآن فقط $30!

حالات الاستخدام الشائعة: الإشارة إلى المحتوى المحذوف أو غير المهم

علامة <s> رائعة لعرض تغييرات الأسعار، التعديلات، أو المحتوى الذي لم يعد صالحًا. على سبيل المثال:

تحديثات الأسعار:

<p><s>$75</s> $50 (Limited Offer!)</p>

تصحيحات أو تغييرات:

<p><s>Old website address</s> New website address</p>

محتوى لم يعد ذا صلة:

<p>This feature is <s>no longer available</s>.</p>

احتمالات التصميم باستخدام CSS

يمكنك تخصيص شكل الخط المقطوع باستخدام CSS. على سبيل المثال، يمكنك تغيير لون الخط أو النص:

s {
  text-decoration: line-through;
  color: red;
}

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

المعنى الدلالي مقابل الزخرفة البصرية

تحمل علامة <s> بعض المعاني الدلالية. تمثل عادةً محتوى كان صالحًا في السابق ولكنه الآن غير صحيح أو قديم. إنها أكثر من مجرد تغيير في النمط. على سبيل المثال، إنها مثالية لعرض التغييرات في الوثائق القانونية، التصحيحات في المدونات، أو تحديثات الأسعار.

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

span.strike {
  text-decoration: line-through;
}

ثم تطبيقه في HTML الخاص بك:

<p>This text is <span class="strike">crossed out</span> just for fun!</p>

هذه الطريقة مخصصة تمامًا للتصميم ولا تحمل نفس المعنى كعلامة <s>.

علامة <mark>: النص المميز

يُستخدم علامة <mark> لتسليط الضوء على النص، حيث يساعد في جذب الانتباه إلى أجزاء معينة من محتواك، مما يجعلها تبرز. بشكل افتراضي، تقوم المتصفحات بتسليط الضوء على النص بخلفية صفراء عند استخدام علامة <mark>.

غرض استخدام علامة <mark>

تُستخدم علامة <mark> عندما ترغب في التأكيد على شيء مهم. غالبًا ما يُستخدم لعرض نتائج البحث، التغييرات الأخيرة، أو أي نص يحتاج إلى اهتمام خاص.

إليك مثالًا على كيفية عمله:

<p>This is a <mark>highlighted</mark> word.</p>

سيظهر على النحو التالي:
هذا كلمة مميزة مظللة.

أفضل الممارسات لاستخدام علامة <mark> للتأكيد أو نتائج البحث

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

<p>The most important concept here is <mark>efficiency</mark>.</p>

نتائج البحث: عند عرض نتائج البحث على صفحة الويب، فإن استخدام علامة <mark> لتسليط الضوء على المصطلحات المتطابقة يجعل من السهل على المستخدمين العثور على ما يبحثون عنه:

<p>Your search for <mark>HTML</mark> found these results:</p>

تحديثات جديدة: يمكنك أيضًا استخدام علامة <mark> لعرض التحديثات الجديدة أو التغييرات في محتواك:

<p>We have recently added the <mark>new feature</mark> to the app.</p>

كيفية تنسيق تأثير النص المظلل بشكل فعال

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

mark {
  background-color: lightblue;
  color: black;
  padding: 2px;
}

سيعطي هذا النص خلفية زرقاء فاتحة مع نص أسود.

إذا كنت ترغب في جعل النص يبرز أكثر، يمكنك إضافة حدود أو تغيير نمط الخط:

mark {
  background-color: yellow;
  color: black;
  font-weight: bold;
  border-radius: 4px;
}

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

دعم المتصفح واعتبارات الوصولية

يتم دعم عنصر <mark> عبر جميع المتصفحات الحديثة، لذا لن تواجه أية مشاكل توافقية. فقط تأكد من أن اللون الخلفية الذي تختاره يوفر تباينًا كافيًا للقراءة، خاصة بالنسبة للمستخدمين ذوي الإعاقات البصرية.

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

عنصر <ruby>: توثيق نصوص اللغات الشرق آسيوية

يُستخدم عنصر <ruby> لإضافة تعليقات صغيرة على النص، كما هو شائع في اللغات الشرق آسيوية مثل اليابانية أو الصينية. تساعد هذه التعليقات القراء على نطق أو معنى الكلمات، خاصة عندما تكون الأحرف معقدة أو غير مألوفة.

تعريف وحالات الاستخدام لعنصر <ruby>

في اللغات مثل اليابانية، من الشائع استخدام دليل صغير أعلى أو بجانب الأحرف لإظهار كيفية نطقها. يقوم عنصر <ruby> بربط النص الرئيسي بتعليق صغير، عادة في خط أبسط.

إليك مثال أساسي:

<ruby>漢 <rt>かん</rt> 字 <rt>じ</rt></ruby>

هذا يُظهر حروف الكانجي اليابانية 漢字 مع نطقها (فوريغانا) المعروض فوقها أو بجانبها كـ かんじ (كانجي).

أهمية العناصر الفرعية <rp> و <rt>

عنصر <rt> يُستخدم داخل علامة <ruby> لتعريف التفسير (مثل النطق) للنص الرئيسي. وهو يُمثل “نص روبي”.

<ruby>漢 <rt>かん</rt></ruby>

سيعرض هذا 漢 مع かん (كان) فوقه كتفسير.

عنصر <rp>، المختصر لـ “أقواس روبي”، يُستخدم كحل بديل للمتصفحات التي لا تدعم علامة <ruby>. فهو يحيط أحرف إضافية، مثل الأقواس، حول نص الروبي ليوضح أنه تفسير:

<ruby>漢 <rp>(</rp><rt>かん</rt><rp>)</rp></ruby>

إذا لم يدعم المتصفح تفسيرات الروبي، سيعرض النطق داخل الأقواس، مثل هذا:
漢 (かん).

أمثلة عملية: تفسيرات روبي لتعلم اللغة

علامة <ruby> هي أداة مفيدة لمتعلمي اللغة. يمكنها عرض النطق للكلمات أو الأحرف غير المألوفة مباشرة فوقها أو بجانبها. وهذا يجعل من السهل على المبتدئين قراءة وتعلم مفردات جديدة.

على سبيل المثال، لنفترض أنك تريد مساعدة شخص ما في تعلم الكلمة الصينية لـ “شخص”:

<ruby>人 <rt>rén</rt></ruby>

سيظهر هذا 人 مع النطق rén فوقه.

بالنسبة للجمل الأطول:

<p><ruby>我 <rt>wǒ</rt></ruby> <ruby>是 <rt>shì</rt></ruby> <ruby>学生 <rt>xuéshēng</rt></ruby>.</p>

يساعد هذا الطلاب على رؤية كل من الأحرف والنطق الصحيح.

التوافق عبر المتصفحات واعتبارات العرض

تدعم علامة <ruby> معظم المتصفحات الحديثة، ولكن المتصفحات الأقدم قد لا تعرضها بشكل صحيح. هنا تأتي فائدة عنصر <rp>، مما يضمن أن التعليقات التوضيحية لا تزال قابلة للقراءة إذا لم يدعم المتصفح نص ruby.

لضمان إمكانية الوصول، تأكد من أن التعليقات التوضيحية تحتوي على مساحة كافية حولها لتسهيل قراءتها. يمكنك أيضًا استخدام CSS لتعديل مظهر التعليقات التوضيحية:

ruby rt {
  font-size: 0.75em;
  color: gray;
}

سوف يجعل هذا نص ruby أصغر ولونه مختلف للحفاظ على انفصاله بصريًا عن المحتوى الرئيسي.

استخدام <ruby> هو وسيلة رائعة لتحسين قابلية القراءة لمتعلمي اللغات أو القراء غير المألوفين ببعض الكتابات. فقط تذكر أن تتحقق من دعم المتصفح وإضافة بدائل لتحسين تجربة المستخدم عبر الأجهزة المختلفة.

علامة <time>: الوقت والتاريخ الدلالي

تستخدم علامة <time> لتحديد التواريخ أو الأوقات بصيغة قابلة للقراءة الآلية. تساعد محركات البحث والمتصفحات والأدوات الأخرى على التعرف على المعلومات المتعلقة بالوقت بشكل أوضح، مما يكون مفيدًا لتحسين الظهور في نتائج البحث أو لتحليل البيانات بشكل أفضل.

استخدام علامة <time> للتواريخ والأوقات القابلة للقراءة الآلية

عندما تستخدم علامة <time>، فإنها تتيح لك تقديم تواريخ أو أوقات سهلة القراءة لكل من الناس والحواسيب. هذا مفيد بشكل خاص في المدونات، المقالات الإخبارية، أو صفحات الفعاليات.

<p>Published on <time datetime="2024-10-01">October 1, 2024</time></p>

النص “1 أكتوبر 2024” هو ما سيراه المستخدمون، ولكن خاصية datetime توفر نسخة قابلة للقراءة من قبل الآلة للتاريخ. يمكن لمحركات البحث الآن تفسير هذا التاريخ بسهولة.

يمكنك أيضًا استخدام علامة <time> لعرض الأوقات:

<p>The event starts at <time datetime="13:00">1:00 PM</time>.</p>

هذا يجعل من الواضح لكل من المستخدمين والآلات متى يحدث الحدث.

كيف تحسن <time> تحسين محركات البحث وتحليل البيانات لتفاصيل الحدث

تعتمد محركات البحث على البيانات المهيكلة لفهم المحتوى بشكل أفضل. توفر علامة <time> فكرة أوضح عن متى تحدث الأحداث أو المنشورات أو المواعيد النهائية، مما يحسن من صلة نتائج البحث. على سبيل المثال، يمكن لمحركات البحث عرض تاريخ نشر المشاركات في المدونات أو وقت الأحداث بشكل أفضل.

بالنسبة لصفحة الحدث، يوفر المثال التالي معلومات زمنية تناسب البشر والآلات:

<p>Join us for the workshop on <time datetime="2024-12-15">December 15, 2024</time> at <time datetime="15:30">3:30 PM</time>.</p>

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

أمثلة على الاستخدام في المقالات والمدونات وصفحات الأحداث

إليك بعض الأمثلة العملية حول كيفية استخدام علامة <time>:

1. مقالات المدونة: يمكنك عرض تاريخ نشر المقالة أو آخر تحديث لها:

    <p>آخر تحديث في <time datetime="2024-09-28">28 سبتمبر 2024</time>.</p>
   

2. قوائم الفعاليات: يمكن لمواقع الفعاليات استخدام علامة <time> لعرض موعد الحدث:

    <p>سيكون لقاءنا القادم في<time datetime="2024-11-10">10 نوفمبر 2024</time> في الساعة<time datetime="18:00">6:00 مساءً</time>.</p>
   

3. المواعيد النهائية: عند تقديم المواعيد النهائية المهمة، استخدم علامة <time> للوضوح:

    <p>قدم طلبك قبل <time datetime="2024-10-30T23:59">30 أكتوبر 2024، 11:59 مساءً</time>.</p>
   

في جميع هذه الأمثلة، يضمن سمة datetime أن تتمكن أجهزة الكمبيوتر من قراءة معلومات الوقت بشكل صحيح، بينما يرى المستخدمون نسخة أكثر قابلية للقراءة.

دعم المتصفح وإمكانية الوصول

تُدعم علامة <time> على نطاق واسع عبر المتصفحات الحديثة. كما أنها تحسن إمكانية الوصول لأن برامج قراءة الشاشة يمكنها تفسير التاريخ والوقت بشكل أكثر دقة، مما يوفر تجربة أفضل للمستخدمين ذوي الإعاقة.

علامة <bdi>: عزل النص ثنائي الاتجاه

تدل علامة <bdi> على “العزل ثنائي الاتجاه” وتستخدم لمنع مشاكل اتجاه النص على المواقع متعددة اللغات. هذه العلامة مفيدة بشكل خاص عند العمل مع محتوى يتضمن لغات من اليسار إلى اليمين (LTR) ومن اليمين إلى اليسار (RTL).

دور علامة <bdi> في المواقع متعددة اللغات

عند خلط لغات ذات اتجاهات نصية مختلفة، مثل الإنجليزية (LTR) والعربية (RTL)، قد يصبح تدفق النص فوضويًا في بعض الأحيان. تساعد علامة <bdi> في الحفاظ على نظافة تخطيط النص، مما يضمن عرض كل جزء من النص بشكل صحيح، بغض النظر عن اتجاه اللغة.

على سبيل المثال، إذا كنت تريد عرض إدخال المستخدم (مثل اسم المستخدم) بجانب نص آخر، ولا تعرف أي لغة سيكون فيها اسم المستخدم، يمكنك استخدام <bdi> للتأكد من أنه لا يؤثر على التدفق.

كيفية استخدام <bdi> لمنع مشاكل اتجاه النص

تلتف علامة <bdi> حول الجزء من النص الذي ترغب في عزله، وتمنع تأثير اتجاه النص بواسطة المحتوى المحيط.

إليك مثال بسيط:

<p>User <bdi>اسم</bdi> has logged in.</p>

إذا كان اسم المستخدم باللغة العربية (التي تقرأ من اليمين لليسار)، فإن علامة <bdi> تضمن أن بقية الجملة (التي بالإنجليزية وتقرأ من اليسار لليمين) لا تتعطل. بدون علامة <bdi>، قد يتم عرض الجملة بشكل غير صحيح بسبب خلط اتجاهات النص.

مثال آخر مع الأرقام:

<p>Invoice number: <bdi>#1234</bdi></p>

إذا كان رقم الفاتورة يتضمن نصوص أو أرقام باتجاهات مختلفة، فإن الوسم <bdi> يضمن بقاء التنسيق صحيحًا.

أمثلة على <bdi>

يتم استخدام الوسم <bdi> عادة في التطبيقات متعددة اللغات، ومنصات محتوى تولده المستخدمين، ومواقع الويب التي تتعامل مع لغات متعددة في نفس الوقت. على سبيل المثال، يمكن لمواقع الويب التي تسمح للمستخدمين بإدخال البيانات، مثل الأسماء أو العناوين، استخدام <bdi> لضمان محاذاة النص بشكل صحيح.

إليك مثالًا على منتدى:

<p><bdi>مستخدم</bdi> liked your post!</p>

بدون <bdi>، قد يعرض النص بشكل غير لائق، ولكن معه، يتم عرض كلاً من اسم المستخدم باللغة العربية والنص باللغة الإنجليزية بشكل صحيح.

توافق المتصفح

يتم دعم وسم <bdi> في جميع المتصفحات الحديثة، بما في ذلك Chrome، Firefox، Safari، و Edge. إنها حلاً خفيف الوزن، لا يتطلب تنسيقًا خاصًا، ويساعد في الحفاظ على تخطيط المحتوى الخاص بك بشكل منظم عند التعامل مع نصوص متعددة اللغات.

وسم <dfn>: تحديد المصطلحات

يُستخدم وسم <dfn> لتحديد أول ظهور لمصطلح يتم تعريفه داخل صفحة الويب. إنه يساعد القراء على التعرف بسرعة على أن الكلمة أو العبارة مصطلح، مما يحسن من وضوح محتواك، خاصة في الكتابة التقنية.

كيفية استخدام <dfn> لتحديد التعريفات

وسم <dfn> سهل الاستخدام. يتم لفه حول الكلمة أو العبارة التي ترغب في تعريفها. عادةً ما يظهر المصطلح بالقرب من شرح معناه.

مثال:

<p>The <dfn>DOM</dfn> (Document Object Model) is a programming interface for web documents.</p>

هنا، تبرز علامة <dfn> أن “DOM” هو المصطلح الذي يتم تعريفه.

أفضل الممارسات لتقديم الشروحات داخل المقال

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

من الجيد أيضًا استخدام <dfn> فقط في المرة الأولى التي يتم فيها تقديم مصطلح، حيث إن تكراره عدة مرات يمكن أن يربك القارئ.

على سبيل المثال، في مقال تقني حول HTML:

<p>The <dfn>API</dfn> (Application Programming Interface) allows different software applications to communicate with each other. Once defined, an API can simplify many web development tasks.</p>

في هذه الحالة، يتم تعريف “API” عندما يتم ذكره لأول مرة، والاستخدامات اللاحقة لـ “API” لا تحتاج إلى علامة <dfn> بعد الآن.

كيف تحسن <dfn> وضوح المحتوى التقني

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

من خلال وضع علامات على التعريفات باستخدام <dfn>، قد تتمكن محركات البحث وأدوات أخرى أيضًا من تفسير محتواك بشكل أفضل، مما يجعلها أكثر وصولاً. على سبيل المثال، يمكن أن تستخدم القواميس التقنية أو المواقع التعليمية <dfn> لجعل مصطلحاتها تبرز.

مثال على <dfn>

<p>The <dfn>URL</dfn> (Uniform Resource Locator) is the address used to access a resource on the web.</p>

في هذه الجملة، يتعرف القارئ على مصطلح “URL”، تليه شرح واضح. يساعد هذا الأسلوب في تقديم المصطلحات باستخدام علامة <dfn> على جعل المحتوى التقني أسهل قراءة وفهما، خاصة بالنسبة لأولئك الذين غير عائلين بهذا الموضوع.

علامة <wbr>: فرص كسر السطر

يُستخدم علامة <wbr> لاقتراح موقع يمكن فيه تقسيم كلمة أو رابط URL لإنشاء فرصة لكسر السطر إذا لزم الأمر. يكون هذا مفيدًا عند التعامل مع كلمات طويلة، روابط URL، أو أي نص قد يؤدي إلى كسر تصميم صفحة الويب.

ما هي علامة <wbr> ولماذا تعتبر أساسية للكلمات الطويلة أو روابط URL

أحيانًا، الكلمات الطويلة أو روابط الإنترنت يمكن أن تؤثر على تصميم صفحة الويب من خلال إحداث تمرير أفقي أو كسر التصميم. توفر علامة <wbr> تلميحًا للمتصفح حول مكان تقسيم الكلمة، ولكن فقط عند الضرورة. هذا يساعد في جعل النص قابل للقراءة ويمنع التجاوز.

على سبيل المثال، إذا كان لديك رابط URL طويل، يمكنك وضع علامة <wbr> لإخبار المتصفح حيث يمكن كسر النص:

<p>Visit our website at https://www.example<wbr>.com/super/long-url-that-might-break-layout</p>

إذا كان يحتاج المتصفح إلى تقسيم الرابط، سيفعل ذلك بعد علامة <wbr>، مما يضمن بقاء التصميم سليمًا.

أفضل الممارسات للتحكم في تغليف الكلمات وتجاوز النص

يجب استخدام علامة <wbr> في الأماكن التي قد تسبب فيها النص مشاكل تجاوز، مثل المصطلحات التقنية الطويلة، عناوين البريد الإلكتروني، أو روابط URL. ولكن لا تفرط في استخدامها، حيث يمكن أن تجعل الفواصل غير الضرورية النص أكثر صعوبة في القراءة.

وإليك مثال آخر بكلمة طويلة:

<p>This word is too long: anti<wbr>disestablishmentarianism.</p>

إذا كانت الكلمة طويلة جداً بالنسبة للسطر، سيقوم المتصفح بتقسيمها بعد “anti-” دون التأثير على قابلية القراءة.

بالإضافة إلى ذلك مع CSS، يمكنك أيضاً التحكم في لف الكلمات وتجاوز النص للحصول على نتائج أفضل:

p {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

يضمن هذا CSS أن النص سيلف بشكل مرتب عند الحاجة، واستخدام <wbr> يمكن أن يعطي مزيداً من التحكم حول مكان حدوث تلك الانقطاعات.

دعم المتصفح لـ <wr> والتحديات المحتملة

تتمتع علامة <wbr> بدعم في جميع المتصفحات الرئيسية، بما في ذلك Chrome وFirefox وSafari وEdge. إنها خفيفة الوزن ولا تحتاج إلى أي تنسيق خاص للعمل.

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

على سبيل المثال:

<p>Contact us at longemail<wbr>@example<wbr>.com for more information.</p>

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

استخدم <wbr> عندما تتوقع وجود سلاسل نصية طويلة قد لا تنكسر بشكل طبيعي، مما يحافظ على تصميمك نظيفاً ووظيفياً عبر الأجهزة.

علامة <ins>: النص المضاف

تُستخدم علامة <ins> لعرض النص الذي تمت إضافته إلى مستند. وهذا غالباً ما يكون مفيداً عند تتبع التعديلات أو التحديثات أو التغييرات في المستندات. كما تأتي مع خط تحت افتراضي لتسليط الضوء على المحتوى الجديد.

ما هي علامة <ins> وكيف تقارن بعلامة <s>?

تم تصميم العلامة <ins> لتسميه المحتوى المضاف، بينما تستخدم العلامة <s> للنص الذي تم إزالته أو لم يعد ذا صلة. كلا العلامتين مفيدتان عند الحاجة لإظهار التغييرات في مستند، مثل التحديثات أو التنقيحات.

مثال:

<p>This is the <ins>new text</ins> that was added.</p>
<p>This is the <s>old text</s> that is no longer valid.</p>

هنا، تبرز العلامة <ins> ما تم إضافته، وتظهر العلامة <s> ما تم شطبه كما لم يعد صالحا.

الاستخدام في تتبع تحرير المستندات أو التنسيق

تُستخدم العلامة <ins> عادةً عند إدارة المستندات التي تحتاج إلى التحكم بالإصدارات أو حيث يجب أن تكون التعديلات مرئية. على سبيل المثال، يمكنك استخدامها في منصات الكتابة التعاونية أو المستندات القانونية لإظهار الأجزاء التي تمت إضافتها.

مثال على مستند به تغييرات:

<p>The contract was updated to include <ins>an extra clause</ins> on data privacy.</p>

يجعل ذلك واضحًا للقارئ أن القسم حول “خصوصية البيانات” تمت إضافته مؤخرًا.

في تطوير البرمجيات أو إدارة المحتوى، قد تستخدم العلامة <ins> لإظهار النص الذي تم إدخاله حديثًا في الملفات التي تم التحكم في إصدارها، مما يجعل من السهل تتبع التعديلات والمراجعات مع مرور الوقت.

خيارات التنسيق لتوضيح التغييرات

المظهر الافتراضي للعلامة <ins> هو تحته خط، ولكن يمكنك تخصيصه باستخدام CSS لتحسين التركيز، خاصة إذا كنت ترغب في أن تبرز التغييرات بشكل أكبر.

إليك كيف يمكنك تنسيق العلامة <ins> بتأثيرات بصرية مختلفة:

ins {
  background-color: #d4edda;
  color: green;
  text-decoration: none; /* يزيل الخط السفلي الافتراضي */
}

سيعطي هذا النص المُدرج لونًا أخضر وخلفية خضراء فاتحة، مما يجعله أكثر وضوحًا.

يمكنك أيضًا إضافة أنماط مختلفة مثل خط عريض أو حدود:

ins {
  font-weight: bold;
  border-bottom: 2px solid green;
}

تساعد خيارات التنسيق هذه المستخدمين على التعرف على ما تم إضافته أو تغييره، مما يحسن من قابلية قراءة التعديلات وشفافيتها.

بشكل عام، فإن علامة <ins> هي وسيلة بسيطة ولكن فعالة لتتبع المحتوى المدرج، مما يجعلها مفيدة جدًا لكل من الوثائق التقنية والمنصات التعاونية حيث تحتاج التعديلات إلى أن تكون مرئية بوضوح.

علامة <del>: النص المحذوف

تستخدم علامة <del> لإظهار النص الذي تم حذفه أو إزالته من الوثيقة. تقوم هذه العلامة بشطب النص بشكل افتراضي، مما يسهل التعرف على ما تم حذفه. إنها مفيدة بشكل خاص في الحالات التي يكون فيها تتبع التغييرات أو المراجعات ضروريًا.

الغرض واستخدام علامة <del> للنص المشطوب

الوظيفة الرئيسية لعلامة <del> هي عرض بصري لإظهار أن بعض المحتوى قد تمت إزالته. من الشائع في الوثائق أو المقالات أو الشيفرات حيث تحتاج التغييرات إلى أن تكون مرئية للقارئ. عادةً ما يكون النص المحذوف مشطوبًا، مما يشير إلى أنه لم يعد ذا صلة أو صالح.

مثال:

<p>This product costs <del>$50</del> $40 now.</p>

في هذا المثال، يتضح تغيير السعر. السعر القديم (50 دولارًا) مشطوب، ويتبع السعر الجديد (40 دولارًا) مباشرة بعده.

كيف يمكن دمجه مع <ins> لتتبع المراجعات

يمكن أن يتم إقران العلامة <del> مع العلامة <ins> لعرض كل من المحتوى المحذوف والمحتوى الجديد، مما يجعله مثاليًا لتتبع التعديلات أو المراجعات. هذا مفيد جدًا في الكتابة التعاونية، والوثائق القانونية، أو أي موقف يتطلب تسجيل التغييرات بوضوح.

مثال على تتبع المراجعات:

<p>The meeting has been moved <del>Monday</del> <ins>Tuesday</ins>.</p>

هنا، من السهل أن نرى أن “الاثنين” تم استبداله بـ “الثلاثاء”، والقارئ يعرف بدقة ما تغير.

أفضل الممارسات لعرض وتنسيق المحتوى المحذوف

بشكل افتراضي، تضيف العلامة <del> خط عبر النص، ولكن يمكنك تنسيقه بشكل إضافي بواسطة CSS لجعله أكثر وضوحًا أو لمطابقة احتياجات التصميم الخاصة بك.

إليك مثالًا على تخصيص مظهر النص المحذوف:

del {
  color: red;
  text-decoration: line-through;
}

يجعل هذا النص المحذوف يظهر باللون الأحمر، مما يجذب المزيد من الانتباه إليه. يمكنك أيضًا دمجه مع تنسيق إضافي، مثل تلاشي النص:

del {
  color: gray;
  opacity: 0.7;
}

يقلل هذا التنسيق من التركيز على المحتوى المحذوف، مما يجعله أقل إلهاء ولكنه لا يزال مرئيًا للقراء.

توفر العلامة <del> طريقة بسيطة وفعالة لتتبع وعرض التغييرات، خصوصًا عند استخدامها بالاشتراك مع العلامة <ins>. إنها ضرورية لجعل الوثائق شفافة وواضحة لأي شخص يراجع التعديلات أو التحديثات.

الاستنتاج

عند استخدام هذه العناصر الفريدة من نوعها في HTML، يتم توسيع ما يمكن تحقيقه على الويب، مما يساعد في إنشاء محتوى أكثر معنوية ويسهل الوصول إليه. العلامات مثل <q>، <s>، <mark>، <ruby>، <time>، <bdi>، <dfn>، <wbr>، <ins>، و <del> تقدم كل منها مزاياها الخاصة لمهام محددة. تقوم هذه العناصر بأكثر من تنسيق النص فقط؛ إذ تضيف سياقًا وتعزز تجارب المستخدمين وتحسن هيكل الوثيقة.

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

إذا كان لديك أي أسئلة أو اقتراحات، فلا تتردد في التواصل على LinkedIn. إذا كنت استمتعت بهذا المحتوى، فكر في شرائي فنجان قهوة لدعم إنشاء المزيد من المحتويات ودية للمطورين.