إحدى العلامات التي ستتعلمها مبكرًا في تعليم تصميم الويب الخاص بك هي زوج من العلامات المعروفة باسم "علامات التمييز". دعونا نلقي نظرة على ما هي هذه العلامات وكيف يتم استخدامها في تصميم الويب اليوم.
العودة إلى XHTML
إذا كنت قد تعلمت HTML منذ عدة سنوات ، قبل ظهور HTML5 ، فمن المحتمل أنك استخدمت كلا من العلامات الغامقة والمائلة. كما تتوقع ، تحولت هذه العلامات إلى نص غامق أو نص مائل على التوالي. المشكلة مع هذه العلامات ، ولماذا دفعت جانبا لصالح عناصر جديدة (التي سوف ننظر في وقت قريب) ، هي أنها ليست عناصر دلالية. هذا لأنه يحدد كيفية ظهور النص بدلاً من المعلومات حول النص. تذكر ، HTML (حيث يتم كتابة هذه العلامات) هو كل شيء عن البنية ، وليس النمط المرئي! يتم التعامل مع الصور المرئية من قبل CSS وتصميم مواقع الإنترنت وقد عقدت أفضل الممارسات منذ فترة طويلة أنه يجب أن يكون لديك فصل واضح للأسلوب وهيكل في صفحات الويب الخاصة بك. هذا يعني عدم استخدام عناصر غير معنوية والتفاصيل التي تبدو بدلاً من البنية. هذا هو السبب في أن العلامات الجريئة والمائلة تم استبدالها بشكل عام بقوة (للخط العريض) والتأكيد (للحروف المائلة).
العلامة & lt؛ قوية & GT. و & lt؛ em & gt؛
تضيف العناصر القوية والتأكيدية معلومات إلى نصك ، مع تفصيل المحتوى الذي يجب التعامل معه بشكل مختلف والتأكيد عليه عند نطق المحتوى. أنت تستخدم هذه العناصر بنفس الطريقة التي كنت تستخدم فيها الخط المائل والمائل في الماضي. ما عليك سوى إحاطة النص باستخدام علامتي الفتح والإغلاق ( و للتأكيد و و للتركيز القوي) وسيتم التأكيد على النص المرفق.
يمكنك تضمين هذه العلامات ولا يهم ما هي العلامة الخارجية. وهنا بعض الأمثلة.
يتم التركيز على هذا النص وستعرض معظم المتصفحات عليه كخطوط مائلة. يتم التركيز بشدة على هذا النص وستعرضه معظم المتصفحات كنوع غامق.في كلا المثالين ، نحن لا نملي نظرة بصرية مع HTML. نعم ، سيكون المظهر الافتراضي للعلامة مائلًا وسيكون غامقًا ، ولكن يمكن بسهولة تغيير هذه المظهرات في CSS. وهذا هو أفضل ما في العالمين. يمكنك الاستفادة من أنماط المستعرض الافتراضية للحصول على نص مائل أو غامق في المستند دون عبور الخط وخلط البنية والأسلوب. لنفترض أنك تريد أن يكون النص ليس غامقًا فقط ، بل أن يكون أحمر أيضًا ، يمكنك إضافة هذا إلى CSS
قوي {
لون احمر؛
}
في هذا المثال ، لا تحتاج إلى إضافة خاصية للخط الغامق للوزن لأن هذا هو الإعداد الافتراضي. إذا كنت لا ترغب في ترك ذلك للصدفة ، فيمكنك دائمًا إضافته في:
قوي {
font-weight: bold؛
لون احمر؛
}
الآن ، ستكون مضمونًا أن تكون لديك صفحة بها نص عريض (وأحمر) أينما تستخدم العلامة .
مضاعفة على التركيز
شيء واحد لاحظته على مدار العام هو ما يحدث إذا حاولت مضاعفة التركيز. فمثلا:
يجب أن يحتوي هذا النص على نص عريض ومائل داخله.قد تظن أن هذا الخط سيخرج منطقة بها نص غامق ومائل. في بعض الأحيان يحدث ذلك بالفعل ، لكنني رأيت بعض المتصفحات فقط تكريم ثاني نمطين من التوكيد ، والأقرب إلى النص الفعلي المعني ، وعرض هذا فقط كخط مائل. هذا هو أحد الأسباب التي تجعلني لا أشارك في علامات التركيز.
سبب آخر لتجنب هذا "مضاعفة" هو للأغراض الأسلوبية. شكل واحد من أشكال التركيز إذا كان عادة ما يكفي لتوصيل النغمة التي تريد وضعها. لا تحتاج إلى أن تكون جريئة أو مائلة أو ملونة أو تكبير أو تسطير النص لكي تبرز. هذا النص ، هل كل هذه الأنواع المختلفة من التركيز ، سوف تصبح متوهجة. لذا كن حذرًا عند استخدام علامات التمييز أو أنماط CSS لتوفير التركيز وعدم المبالغة في ذلك.
ملاحظة حول Bold و Italics
فكرة واحدة أخيرة - بينما لم يعد يُنصح باستخدام علامات الخط العريض () والخط المائل () كعناصر التأكيد ، هناك بعض مصممي الويب الذين يستخدمون هذه العلامات في مناطق نصية مضمنة. في الأساس ، يستخدمونه مثل عنصر . هذا أمر جيد لأن العلامات قصيرة جدًا ، ولكن لا يوصى باستخدام هذه العناصر بهذه الطريقة بشكل عام. أذكر في حال كنت تراه في بعض المواقع التي تستخدم لا لإنشاء نص غامق أو مائل ، ولكن لإنشاء خط CSS لبعض أنواع أخرى من التصميم المرئي.
المقالة الأصلية لجنيفر كرينين. حرره جيريمي جيرار في 12/2/16.