تركز هذه المقالة على علامات html في الحكاية الخيالية المثالية السابقة، فهي ضارة وسيئة وقبيحة بشكل واضح، ويجب استبعادها من HTML القياسي للحصول على نصف العمل فقط، إما تخريب المتصفح أو استخدام الجديد الأبسط والموصى به تلك.
على الرغم من أن البرامج التعليمية الأساسية السابقة قدمت اقتراحات تفي بالمعايير، إلا أن المبتدئين لديهم أسس مختلفة أو تمارين غير صحيحة، وإليك الملخص.
يحاول HTML التحول من الأداء إلى الدلالات، ومن ثم فصل الدلالات (HTML) والأداء (CSS). لقد تم استخدام هذا على نطاق واسع على صفحات الويب لأنه يمكن استخدام توجيه عرض تقديمي واحد (ملف CSS) في العديد من الصفحات. بهذه الطريقة، تصبح إدارة موقع الويب أسهل، وإذا كنت تريد تغيير الموقع بأكمله، فما عليك سوى تغيير رمز بسيط.
بعض العلامات الضارة هي في الواقع علامات عرض بسيطة (مثل الصغيرة)، والتي يمكن استبدالها بكود يحمل نفس المعنى في CSS. العلامات الأخرى ليست معبرة، ولكنها غير ضرورية (مثل علامة الخط) أو تضر بسهولة الاستخدام (مثل وميض).
العلامات
يمكن أن تستخدم العلامات المدرجة أدناه خيارات أفضل:
العلامة b تعني غامق، ويمكنك استخدام strong بدلاً من ذلك، أو إضافة Font-weight:bold في CSS.
يمثل i العناصر المائلة، ويمكنك استخدام em بدلاً من ذلك، أو إضافة نمط الخط: مائل في CSS.
يتم استخدام الحجم الكبير للتعبير عن النص الكبير، ويمكنك استخدام h1 وh2 وما إلى ذلك في العنوان بدلاً من ذلك، ويمكن التحكم في الحجم الآخر على وجه التحديد.
يستخدم Small للتعبير عن نص صغير ويمكن التحكم فيه بحجم cssfont.
يمثل hr خطًا أفقيًا، والذي يمكن استبداله بحدود أعلى أو حدود أسفل في CSS، أو يمكن أيضًا تمثيله بالصور.
تتوافق جميع العلامات المذكورة أعلاه مع معايير HTML الحديثة، ولكنها لا تنقل معنى دلاليًا للمحتوى. قد يكون لها استخدامات أكثر ولكنها ليست ضارة بشكل كبير وقد يكون من السهل جدًا ارتكاب الأخطاء عند الوقوف على الملصقات السيئة أدناه.
u يمثل عنصرا تحته خط. إنها تحافظ على وضع خط تحت النص مثل الاتصال، وهذا ربما هو سبب اختفاء هذه العلامة، فالأشخاص لا يحبون حقًا وضع خط تحت النص غير المتصل.
center يمكنه توسيط العنصر. خاصية محاذاة النص في CSS لا يمكنها توسيط النص فحسب، بل يمكنها أيضًا توسيط اليسار واليمين والضبط. تُستخدم القائمة لإنشاء قائمة قوائم، وهي تفعل ذلك بشكل أكثر جمالًا من ul، لكن القوائم غير المرتبة أكثر شيوعًا، ويحل ul محل القائمة.
عنصر الطبقة يشبه إلى حد كبير عنصر div، ولكنه يعمل فقط في الإصدارات الأقدم من متصفحات Netscape وهو قليل الاستخدام.
وميض أو سرادق. قل لهم لا بحزم.
يمكن استخدام الخط لتحديد اسم الخط وحجمه ولونه. مواقع الويب القديمة (وحتى المواقع الحالية) التي تستخدم علامات الخطوط بشكل مستمر عبر الصفحة تشبه طاعون النمل الأبيض. يضع البعض من برامج إنشاء الويب علامات الخطوط حول كل عنصر للتحكم في لون النص أو حجمه. استخدم علامة الخط لتطبيقها على كل عنصر، إذا تم التعبير عنها في CSS، فلا يستغرق الأمر سوى جملة بسيطة، ويمكن تغييرها في جميع أنحاء الموقع. باستخدام هذه الطريقة، لا يمكنك تقليل حجم صفحة الويب فحسب، بل يمكنك أيضًا تغيير المحتوى الذي يمثله الخط عن طريق تغيير عبارة CSS البسيطة. وهذا يحافظ على اتساق نمط موقع الويب. علامات الخطوط وإساءة استخدام الجداول هي الأسباب الرئيسية لصفحات الويب المتضخمة.
صفات
ربما تكون الآن تستخدم الملصقات بشكل صحيح، ولكنها تحتوي على بعض الخصائص الطفيلية المزعجة التي يمكن أن تؤدي إلى فقدان النكهة.
name يعين اسمًا لعنصر ما، والذي يعمل بشكل مثالي في عناصر النموذج مثل الإدخال، ولكن في أي مكان آخر، يتم الاستيلاء على وظيفة الاسم بواسطة سمة المعرف.
يتم استخدام النص وbgcolor لتحديد لون النص الأساسي ولون الخلفية لعلامة النص المفتوح. يمكن تطبيق خصائص اللون ولون الخلفية في CSS بشكل جيد على محدد النص.
يمكن للخلفية تحديد صورة خلفية لعلامة الجسم. يمكن أن يوفر CSS سمات أفضل لصورة الخلفية، مثل صورة الخلفية.
الرابط، alink، vlink يمكن أن يحدد لون الرابط لعلامة الجسم. خصائص CSS: :link، :active، :visited لها نفس التأثير. يمكن لـ align التحكم في ترتيب العناصر، مثل <div align="center">الأشياء</div>، ولكن مثل علامة المركز، يمكنك استخدام سمة محاذاة النص في css.
يتم فتح الرابط الهدف في حالات مختلفة، مثل فتح نافذة جديدة <a href="wherever.html" target="_blank">ساعدني</a>. يبدو جيدًا، لكنه لا يبدو مألوفًا للموقع. لا يتوقع المستخدمون أن تظهر هذه الأمور (مثل فتح نوافذ جديدة) كالسحر. يحب معظم المستخدمين استخدام زر "الرجوع"، ويعني فتح نافذة جديدة أن هذه الوظيفة معطلة. تحدد سمات أداء العلامة، مثل عرض الصورة وارتفاعها وحشو الخلايا وتباعد الخلايا في الجدول، تطبيق سمات مختلفة على عناصر مختلفة. إنها ليست حلاً مثاليًا، ولكن إذا كانت صفحتك تحتوي على الكثير من الصور أو الجداول، فقد لا يكون لديك أي خيارات أخرى قابلة للتطبيق.
تنتمي معظم سمات العرض التقديمي التي لا يمكن تفسيرها إلى علامة textarea، التي لا تحتوي على سمات صالحة للأعمدة والصفوف فحسب، بل يتطلبها أحدث معايير HTML.
تسمية جيدة وتطبيق سيء.
لدخول منزلك، قد تجثو على ركبتيك وتزحف من خلال فتحة للكلاب، لكن انتظر، هناك زخرفة باب مصممة خصيصًا للأشخاص - المقبض، هاها، انظر، الباب هو الحجم المناسب ليمر الناس من خلاله.
تم تصميم علامات HTML للتفاصيل، وثق بها أم لا، فعندما تستخدمها بشكل صحيح، يمكنك تحقيق أفضل النتائج.
عندما يكون HTML دلاليًا، تكون صفحات الويب أكثر قابلية للاستخدام من قبل المستخدمين ذوي الإعاقة، مثل برامج قراءة الشاشة التي غالبًا ما تركز على القوائم باستخدام علامات ul أو عنوان باستخدام علامات h1 أو h2.
أخطر إساءة استخدام لـ HTML هو استخدام الجداول للتخطيط، ولكنها تُستخدم فقط لتمثيل البيانات الجدولية. إن فكرة عدم استخدام تخطيط الجدول لا تتعلق بالبحث عن التنوير مثل البوذيين، بل لها فوائد حقيقية، ليس فقط تقليل حجم صفحة الويب، ولكن أيضًا تسهيل صيانة صفحة الويب وإعادة تصميمها.
في بعض الأحيان يستخدم بعض المصممين بعض العلامات والسمات لإكمال التصميمات الانتقالية (خاصة تخطيطات الجدول). أولاً، يمكنهم دعم الإصدارات الأقدم من المتصفحات (Netscape 4). كان أداء الجداول أفضل من CSS في Netscape 4، لكن عدد مستخدميها كان صغيرًا للغاية وكان عددهم في انخفاض. والآن مع تزايد عدد مستخدمي الأجهزة المحمولة، أصبح تخطيط الجدول سيئًا للغاية. مزايا الجداول المذكورة أعلاه تفوق عيوبها بكثير، والسبب هو أن الصفحة تحتاج إلى مراعاة جميع وظائف المتصفح بأقل قدر ممكن من الأسلوب.
إطارات
تعتقد "غولديلوكس" أنها فكرة جيدة جدًا أن تساعدها في الحصول على وعاء من العصيدة، ولكن بعد ذلك تظهر ثلاثة حيوانات مفترسة كبيرة وترميها من النافذة. الإطار يشبه وعاء العصيدة الذي ينتمي إلى الدب. تبدو جيدة، لكن الخطر موجود دائمًا.
لا تستخدم معظم مواقع الويب الإطارات، ويستخدم معظم مستخدمي مواقع الويب صفحة واحدة فقط.
ولكن ماذا لو كنت، لسبب ما، بحاجة إلى منع المستخدمين من إضافة صفحة معينة إلى إشاراتهم المرجعية، أو كنت تريد منع تقديم صفحات معينة عبر البريد الإلكتروني أو الرسائل الفورية، أو كنت تريد إضافة مستوى آخر من التعقيد العام لاستخدام قراءة الشاشة لمستخدمي المتصفح المعاقين الذين يحتاجون إلى التنقل بين الإطارات، أو إذا كنت تريد الدخول إلى جحيم محرك البحث، استخدم الإطارات.
في الأساس، الأطر لا تفعل شيئًا سوى إضافة التعقيد وفقدان سهولة الاستخدام.
أخيرًا، إذا اتبعت القواعد الموضحة أدناه، فلن تخطئ كثيرًا.
1) إذا كان اسم التسمية أو السمة غير مألوف نسبيًا، فمن المستحسن التعليق عليه أو عدم استخدامه. سيتم تحسين كفاءة استخدام CSS بهذه الطريقة.
2) دع التسمية تقوم بالمهمة التي سميت بها. يتم استخدام الجداول للبيانات الجدولية. فقط استخدم العنوان للعنوان، وهكذا.
3) عندما يكون لديك محتوى واضح، استخدم العلامات المناسبة. استخدم القوائم للقوائم، والعناوين للعناوين، وما إلى ذلك.