3 علامات HTML مفيدة قد لا تعلم بوجودها أصلاً

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

دبليو بي آر

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

غيبورتستاغسكوشن

هذا كل شيء! باستخدام هذه العلامة البسيطة، يمكنك التلاعب بمحتويات النص كما يحلو لك.

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

عداد

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

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

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

DEL و INS

هل تساءلت يومًا ما عن كيفية إنشاء مؤشر يمكن الوصول إليه للأجزاء المحذوفة والمضافة من المحتوى (الفرق في GitHub أو إشعارات البريد الإلكتروني من Jira عند تحديث التذكرة)؟ كل ما تحتاجه هو تغليف المحتوى المحذوف بـالوسم. على سبيل المثال: <del><p>المحتوى المحذوف فقط</p></del>. لإظهار الجزء المضاف فقط من المحتوى، يمكنك استخدام<ins> بنفس الطريقة تمامًا. تقدم هذه العلامة أيضًا سمتين:

• الاستشهاد بـ → uri لمورد يشرح سبب إضافة هذا الجزء;
• التاريخ والوقت → بيانات ووقت التغيير.

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