23/08/2023
أفضل الممارسات لكتابة كود HTML مرتّب ومنظّم، وتصحيح لبعض الأخطاء الشائعة.
أولاً، ما المقصود بـ أفضل الممارسات (Best practices)؟
"أفضل الممارسات" مصطلح يقصد به تحقيق مجموعة من المعايير التي وضعها مطورون ذوو خبرة عالية، والغرض منها هو تحسين شكل الكود والنتائج، ومن المهم الالتزام بهذه الممارسات للحفاظ على جودة الكود وجودة النتائج. فبعض الممارسات تساهم في تحسين الأمان وبعضها تعمل على زيادة الكفاءة والبعض للإنتاجية وغيرها.
إذا، ما هي هذه النقاط وأفضل الممارسات التي يجب مراعاتها عند كتابة كود HTML؟
هذه المقالة تعتبر تمهيداً لمحتوى بقية أجزاء هذه السلسلة. سأركز هنا فقط على أفضل الممارسات وسأتجاهل توضيح الأسباب وشرح التفاصيل التي ستتعلق بالمقالات القادمة.
سأبدأ بالحديث عن أكثر الأخطاء شيوعاً التي يقع فيها المطورون المبتدئون، وما هو تصحيحها. وكأول نقطة وأول ممارسة، فإن من بين هذه الأخطاء الشائعة هو تكرار استخدام العنصر أكثر من مرة في نفس الصفحة، والصحيح هو أن تحتوي كل صفحة على عنصر وحيد فقط ولا يمكن بتاتاً أن تحتوي على أكثر من عنصر .
كما أنه من الأخطاء الشائعة تكرار استخدام نفس الـ id selector لأكثر من عنصر. يتميز الـ id بأنه لا يمكن أن يتكرر لأكثر من عنصر واحد بنفس الاسم في نفس الصفحة. لذلك، فالصحيح هو تجنب استخدام نفس اسم الـ id لأكثر من عنصر.
وأخيرًا، يتجاهل العديد من المطورين كتابة (Doctype declaration) والذي يعني تعريف أو إعلان Doctype. يُوضع هذا التعريف في السطر الأول من ملف صفحة HTML. ومن أسباب أهمية كتابته هو تعريف المتصفح بإصدار ال html المستخدم، مما يسهل على المتصفح فهم وتفسير وتحميل الصفحة بشكل صحيح. وبالتالي، يُساعد في التعامل مع الأخطاء بشكل صحيح وتحسين أداء الموقع.
والآن قد تسأل: ماذا لو لم أضف ال ؟
حينها سيدخل المتصفح وضع (quirks mode) والذي يعني وضع المراوغات (المراوغات نعم، أعتقد ان الاسم كافي لشرح ما سيحدث 😄). في هذا الوضع، سيحاول المتصفح فهم كود HTML بأفضل ما يستطيع، مما قد يؤدي إلى تجاهل بعض العناصر والخصائص الخاصة بـ HTML5. لذا، يجب عدم نسيان إضافة تعريف Doctype لتجنب الدخول في هذا الوضع.
والآن سأتحدث عن باقي أفضل الممارسات بشكل عام:
1. تذكيراً بالنقاط المذكورة سابقاً سأعيدها مجدداً: أولًا، عدم تكرار العنصر أكثر من مرة في الصفحة. ثانيًا، عدم استخدام نفس مُعرف الـ id أكثر من مرة. وثالثًا، إضافة ال Doctype declaration في السطر الأول من ملفات صفحات الموقع.
2. عند كتابة الروابط في شريط التنقل (navigation bar)، فيًفضل أن تضاف هذه الروابط داخل عناصر في ال ، وتجنب إضافة الروابط مباشرة في العنصر .
3. إضافة وصف للروابط في ال title attribute، فهذا يسهّل على الزوار فهم إلى أين يؤدي الرابط.
4. استخدم العنصر فقط إذا كان العنصر يحتوي على رابط، ما لم يكن يحتوي على رابط فاستخدم العنصر المناسب مثل .
استخدام عناصر HTML الدلالية (Semantic HTML)، بدلاً من الاعتماد على العنصر .
5. إضافة lang attribute للعنصر ، لتحديد لغة الموقع الرئيسية.
6. إضافة نص بديل (alt attribute) للصور، لكي يتمكن المتصفح من قراءة وفهم محتوى الصورة، مما يؤدي إلى عرض الصور في نتائج البحث.
7. استخدام عناصر العناوين h1 - h6 بالتدرج وبتسلسل منطقي، واعتماداً على أهمية كل عنوان، ولا تتخطى أحد العناوين؛ فإذا استخدمت ال h3 لا بد أن تكون قد استخدمت ال h2 وهكذا.
8. لا تستخدم عناصر التنسيق التي لا تملك أي معنى دلالي ولا يستطبق المتصفح قراءتها وتمييزها، مثل و من أجل تضخيم أو تمييل النص، ولكن استخدم بدلاً منهم و .
9. أضف تعليقات لشرح أقسام الصفحة وأجزاء محددة من الكود. هذه التعليقات ستساعدك على فهم الكود وصيانته لاحقاً.
هذه بعض من أهم ممارسات كتابة كود HTML نظيف ومرتّب، وكما ذكرت سابقاً سأتطرق لاحقاً لتوضيح هذه الممارسات بتفاصيل أكثر.
لا تتجاهل استخدام هذه الممارسات واطلع على ممارسات أخرى، فهذا سيساهم من تطوير مهارات التكويد لديك، -وكما أشرت في المقالة السابقة- ستجعل الكود قابل للصيانة بطريقة أفضل وأيضاً ستؤدي إلى تحسين محركات البحث وال accessibility .. الخ.
#تكنواي
