تصحيح أخطاء HTML

لا يتوقف HTML عند الخطأ: يحاول المتصفح «إصلاح» الكود السيئ فتأتي النتيجة مختلفة عن المتوقع. لذا تحتاج إلى أدوات لرؤية المشكلة، وأفضل صديق نافذة «فحص العنصر» (F12) التي تعرض الشجرة الفعلية التي بناها المتصفح.

1. انقر بزر الفأرة الأيمن على عنصر واختر Inspect.
2. قارن الشجرة الفعلية بالبنية التي توقعتها.
3. أصلح أول خطأ من الأعلى أولًا لأن ما بعده قد ينشأ عنه.

• وسم غير مغلق: يظهر كل المحتوى اللاحق بشكل خاطئ.
• تداخل خاطئ: <b><i>…</b></i>.
• علامة اقتباس منسية: <a href="page.html>.
• حالة أحرف اسم الملف: Photo.JPG تختلف عن photo.jpg.
• غياب الترميز يفسد الحروف.
• استخدام id نفسه مرتين.

<!-- wrong -->
<p>Hello <b>world</p></b>
<img src="Photo.JPG" alt="">

<!-- right -->
<p>Hello <b>world</b></p>
<img src="photo.jpg" alt="A tidy desk">

يتيح W3C Markup Validator لصق الكود لفحصه ويعرض كل خطأ مع رقم السطر. قبل نشر كل صفحة راجع هذه القائمة القصيرة: هل يوجد doctype؟ وهل كُتبت lang؟ وهل title فريد؟ وهل لكل الصور alt؟ وهل تسلسل العناوين صحيح؟