لماذا دليل أسلوب؟
كود 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/CSS/JS. الكود النظيف استثمار في نفسك وفريقك.