HTML Academy · درس

W3C Markup Validator

العثور على أخطاء HTML وإصلاحها باستخدام W3C Markup Validation Service

W3C Markup Validator درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.

ما الذي يتحقق منه المدقّق

يحلل W3C Markup Validator (validator.w3.org) HTML وفق المواصفة الرسمية، ويبلغ عن كل مخالفة للمواصفة: الوسوم غير المغلقة، والتداخل غير الصالح، مثل وجود <p> داخل <p> أخرى، والخصائص الإلزامية المفقودة، مثل img من دون alt، والعناصر غير المعروفة، وغير ذلك الكثير.

أهمية التحقق

قد يُعرض HTML غير الصالح في أي متصفح اليوم، لكن لكل متصفح الحرية في معالجة الأخطاء بطريقة مختلفة؛ فما يبدو سليمًا في Chrome قد يتعطل في Firefox. ينتج HTML الصالح عرضًا متوقعًا ومتسقًا، ويتجنب السلوك المفاجئ في قارئات الشاشة وبرامج زحف محركات البحث وعملاء البريد الإلكتروني.

ثلاث طرق للإرسال

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

قراءة النتائج

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

التحذيرات في مقابل الأخطاء

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

الأخطاء الشائعة

غياب alt عن img. عدم إغلاق وسم الإغلاق الذاتي (<br> بدلًا من <br/> القديم، وهو صالح أيضًا). وجود id مكرر في الصفحة. وجود تسمية نموذج من دون سمة for تطابق معرّف input. تداخل العناصر التفاعلية (مثل وجود زر داخل a). تمثل هذه الحالات الخمس معظم مخرجات أداة التحقق.

التحقق من صحة القوالب

إذا كان HTML لديك يُولَّد بواسطة القوالب، فتحقق من الناتج النهائي (الصفحة التي جرى تصييرها) بدلًا من مصدر القالب. لا يُعد العنصر النائب {{ }} HTML صالحًا؛ فالمهم هو ما تنتجه الآلة فقط. شغّل أداة التحقق في CI على الصفحات التي جرى تصييرها من بنية اختبارية.

html-validate CLI

لدمج التحقق في CI، استخدم حزمة npm المسماة html-validate: يتحقق npx html-validate "public/**/*.html" من كل صفحة في البنية. اضبط القواعد في .htmlvalidate.json. استخدم ذلك لإيقاف عمليات البناء عند حدوث تراجعات في التحقق.

Stylelint والفحص البرمجي في المصدر

يكشف الفحص البرمجي وقت الكتابة (باستخدام stylelint لـ CSS وeslint-plugin-jsx-a11y لـ React) كثيرًا من المشكلات قبل وصولها إلى أداة التحقق. اجمع ذلك مع التحقق الشامل من البداية إلى النهاية في CI لتوفير دفاع متعدد الطبقات؛ اكشف معظم المشكلات مبكرًا، واكشف البقية قبل النشر.

ما لا يكتشفه التحقق

يتحقق الفحص من صحة الترميز، لا من الدلالات. فالصفحة التي تستخدم <h6> لجميع العناوين تُعد HTML صالحًا، لكنها سيئة دلاليًا. تكشف عمليات تدقيق إمكانية الوصول في Lighthouse والمراجعة اليدوية المشكلات الدلالية التي لا تكتشفها أداة التحقق.

تحذير من وضع التوافق القديم

يؤدي غياب <!doctype html> إلى تفعيل وضع التوافق القديم (Quirks Mode)، حيث تستخدم المتصفحات طبقة توافق قديمة تتسبب في تعطيل CSS الحديث. تضع أداة التحقق غياب doctype بوصفه الخطأ الأول؛ فلا تنشر أي صفحة من دون تصريح doctype.

التحقق المستمر

شغّل التحقق مع كل طلب سحب عبر GitHub Actions: ثبّت html-validate، وشغّله على الموقع المبني، وأخفِق طلب السحب إذا وُجدت أخطاء. وبذلك تُكتشف الأخطاء الجديدة أثناء المراجعة بدلًا من تراكمها على مدى أشهر، ثم أصبح إصلاحها بأثر رجعي أمرًا مرهقًا.

اختبار المعرفة

لماذا يُعد غياب التصريح <!doctype html> مهمًا إلى هذا الحد بالنسبة إلى أداة التحقق من W3C؟

الخلاصة

تحلل أداة التحقق من ترميز W3C لغة HTML وفقًا للمواصفات، وتُبلغ عن الترميز غير الصالح. استخدمها عبر واجهة الويب لإجراء الفحوص الفردية، وعبر html-validate CLI في CI لتوفير تغطية مستمرة. تشمل المشكلات الشائعة: غياب alt، ومعرّفات id المكررة، وغياب doctype، وتداخل العناصر التفاعلية. يكشف التحقق أخطاء الترميز؛ لذا اجمعه مع Lighthouse والمراجعة اليدوية لضمان الجودة الدلالية وإمكانية الوصول.

الأسئلة الشائعة

هل درس «W3C Markup Validator» مجاني؟

نعم — نص درس «W3C Markup Validator» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.

ماذا ستتعلم في «W3C Markup Validator»؟

العثور على أخطاء HTML وإصلاحها باستخدام W3C Markup Validation Service تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟

لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «W3C Markup Validator»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟

نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى HTML Academy