لماذا دليل أسلوب؟
كود HTML منظّم ومتّسق أسهل في القراءة والصيانة والعمل الجماعي. هذه قواعد ذهبية يتبعها المحترفون.
1) أعلن نوع المستند واللغة
<!DOCTYPE html>
<html lang="ar" dir="rtl">
2) استخدم أحرفًا صغيرة
أسماء العناصر والسمات بحروف صغيرة دائمًا:
<p class="note">صحيح</p> <!-- ✅ -->
<P CLASS="NOTE">خطأ</P> <!-- ❌ -->
3) ضع قيم السمات بين اقتباسات
<a href="page.html">صحيح</a> <!-- ✅ -->
<a href=page.html>تجنّبه</a> <!-- ❌ -->
4) أغلق كل العناصر
<p>فقرة مغلقة.</p> <!-- ✅ -->
<img src="x.jpg" alt="صورة" /> <!-- العناصر المفردة تُغلق ذاتيًا -->
5) استخدم مسافات بادئة (Indentation)
أزِح العناصر المتداخلة لتوضيح البنية:
<ul>
<li>عنصر</li>
<li>عنصر</li>
</ul>
6) لا تنسَ alt و<title>
- كل صورة لها
altوصفي. - كل صفحة لها
<title>فريد.
7) أسماء فئات ذات معنى
<div class="user-card"> <!-- ✅ واضح -->
<div class="dd1"> <!-- ❌ غامض -->
8) فصل الاهتمامات
- HTML للبنية.
- CSS للمظهر (في ملف منفصل).
- JavaScript للسلوك (في ملف منفصل).
لمحة: HTML مقابل XHTML
XHTML نسخة أكثر صرامة من HTML بقواعد XML (إغلاق إلزامي، أحرف صغيرة، اقتباس إلزامي). اليوم HTML5 هو المعيار، لكن اتّباع عادات XHTML الصارمة يجعل كودك أنظف على أي حال.
التحقق من HTML عبر HTML Validator
المتصفح متسامح جدًا مع أخطاء HTML — يحاول عرض الصفحة حتى لو كانت وسومًا غير مغلقة أو متداخلة بشكل خاطئ، دون أي تحذير ظاهر لك. هذا يعني أن أخطاء كثيرة تمر دون أن تلاحظها بالعين المجردة.
مدقق W3C الرسمي يفحص كود صفحتك مقابل مواصفة HTML الرسمية ويُخرج قائمة أخطاء وتحذيرات دقيقة: وسم غير مغلق، خاصية غير موجودة أصلًا، تداخل غير صحيح، معرّف id مكرر... يمكنك لصق الكود مباشرة أو إدخال رابط الصفحة.
🔑 شغّل صفحتك على المدقّق مرة قبل النشر على الأقل — أخطاء بسيطة مثل وسم منسي الإغلاق قد تكسر تنسيق الصفحة بالكامل في متصفحات أو قارئات شاشة معينة، حتى لو بدت سليمة عندك.
عناصر وخصائص قديمة (Deprecated)
بعض وسوم وخصائص HTML كانت شائعة قبل انتشار CSS، والمواصفة الحديثة تحذّر من استخدامها لأنها تخلط الشكل بالبنية — استبدلها دائمًا بمكافئها في CSS:
| قديم (Deprecated) | استخدم بدلًا منه |
|---|---|
<font color="red" size="5"> | CSS: color وfont-size |
<center> | CSS: text-align: center أو margin: auto |
<marquee> و<blink> | CSS Animations، وتجنّب النص المتحرك أصلًا لأسباب وصول |
<strike> | <s> أو <del> حسب المعنى (شطب شكلي أو حذف فعلي) |
السمة bgcolor على <body> | CSS: background-color |
<frame>/<frameset> | <iframe> عند الحاجة الفعلية للتضمين |
⚠️ المتصفحات لا تزال "تفهم" أغلب هذه الوسوم لأسباب توافقية قديمة، لكنها ليست جزءًا من مواصفة HTML الحية اليوم — استخدامها اليوم علامة على كود قديم يحتاج تحديثًا، وأول ما يُبلّغ عنه مدقّق W3C.
الأخطاء الشائعة
- ❌ خلط الأحرف الكبيرة والصغيرة في الوسوم.
- ❌ نسيان إغلاق العناصر → سلوك غير متوقّع.
- ❌ كود بلا مسافات بادئة → صعب القراءة.
- ❌ نشر صفحة دون تشغيلها على مدقّق HTML ولو مرة واحدة → أخطاء بنيوية تمر دون أن تلاحظها.
- ❌ استخدام وسوم Deprecated لأنها "تعمل" رغم وجود بديل CSS مباشر وأبسط.
خلاصة
اكتب HTML بأحرف صغيرة، مع اقتباس القيم وإغلاق العناصر ومسافات بادئة وأسماء فئات واضحة، وافصل HTML/CSS/JS. تحقّق من صفحاتك عبر مدقّق W3C قبل النشر، وتجنّب الوسوم والخصائص القديمة Deprecated لصالح بدائلها في CSS. الكود النظيف استثمار في نفسك وفريقك.