تنسيق الكود في HTML

تنسيق الكود في HTML

يا هلا بالجميع! لما نكتب كود HTML، مو بس المهم إنه يشتغل صح، الأهم كمان إنه يكون سهل القراءة والفهم. تخيل لو ترجع لكود كتبته قبل 6 شهور، أو لو زميلك يبغى يعدل على شغلك. التنسيق هو اللي بيخلي الحياة أسهل للكل.

1. المسافات البادئة (Indentation)

هذي أهم نقطة. كل ما فتحت وسم (tag) جديد داخل وسم ثاني، لازم تسوي مسافة بادئة (indent). أغلب المبرمجين يستخدمون مسافتين أو أربع مسافات (spaces) أو علامة tab. المهم إنك تكون ثابت على طريقة وحدة.

شوف الفرق هنا:

كود سيء:

<div>
<h1>عنوان</h1>
<p>فقرة</n></p></div>

كود ممتاز (بمسافتين):

<div>
  <h1>عنوان</h1>
  <p>فقرة</p>
</div>

نصيحة: استخدم نفس عدد المسافات البادئة في كل مشروع عشان يكون الكود متناسق.

2. فواصل الأسطر (Line Breaks)

لا تخلي الأسطر طويلة بزيادة، ولا تحشر كل شي بسطر واحد. كل وسم (tag) جديد، خاصة البلوكات الكبيرة زي div, p, h1، يفضل يكون في سطر لحاله. وكذلك كل خاصية (attribute) لو كانت كثيرة.

كود سيء:

<div class="container"><p>هذا نص في فقرة.</p></div>

كود ممتاز:

<div class="container">
  <p>هذا نص في فقرة.</p>
</div>

3. ترتيب الخصائص (Attribute Order)

هذي مو قاعدة إلزامية، بس تخلي الكود أنظف. ممكن ترتب الخصائص أبجدياً، أو ترتبها حسب الأهمية (مثلاً: id أول شي، بعدين class، بعدين src أو href). المهم تكون ثابت على طريقة معينة.

مثال (ترتيب حسب الأهمية/الاستخدام الشائع):

<img src="image.jpg" alt="صورة توضيحية" width="500" height="300" class="responsive-img">

أو (ترتيب أبجدي):

<img alt="صورة توضيحية" class="responsive-img" height="300" src="image.jpg" width="500">

4. التعليقات (Comments)

التعليقات مفيدة جداً لشرح أجزاء معينة من الكود، خاصة الأجزاء المعقدة أو اللي تحتاج توضيح. استخدمها بحكمة، لا تبالغ فيها.

<!-- هذا قسم التنقل الرئيسي للموقع -->
<nav>
  <ul>
    <li><a href="#home">الرئيسية</a></li>
    <li><a href="#about">عنا</a></li>
  </ul>
</nav>

5. الوسوم ذاتية الإغلاق (Self-Closing Tags)

الوسوم اللي ما تحتاج وسم إغلاق زي , ,
,

---

... إلخ، اكتبها صح. في HTML5، مو لازم تحط الشرطة المائلة / في النهاية، لكن لو حطيتها ما تضر (زي ).

كود صحيح (HTML5):

<img src="image.jpg" alt="وصف">
<input type="text" name="username">

كود صحيح (متوافق مع XHTML):

<img src="image.jpg" alt="وصف" />
<input type="text" name="username" />

6. أدوات التنسيق الآلي (Automated Formatters)

لا تتعب نفسك كثير بالتنسيق اليدوي! فيه أدوات تسوي الشغل هذا عنك بضغطة زر أو حتى بشكل آلي لما تحفظ الملف.

• VS Code: فيه تنسيق مدمج، وتقدر تضيف إضافات زي Prettier أو Beautify.
• Prettier: أداة ممتازة تدعم لغات كثيرة وتنسق الكود بشكل تلقائي حسب قواعد قابلة للتخصيص.

في النهاية، التنسيق الجيد للكود مو بس يخلي شغلك احترافي، بل يوفر عليك وقت وجهد كبير في المستقبل. طبق هالقواعد البسيطة وبتشوف الفرق!

← السابقالفهرس