كيفية تنسيق وتصغير كود HTML

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

التنسيق: جعل HTML قابلًا للقراءة

يأخذ المنسّق HTML مضغوطًا أو فوضويًا ويضيف مسافة بادئة جيدة وفواصل أسطر وتباعدًا متّسقًا. تصبح البنية مرئية بنظرة واحدة.

قبل:

<div class="card"><h2>عنوان</h2><p>بعض النص هنا</p><a href="/link">اقرأ المزيد</a></div>

بعد:

<div class="card">
  <h2>عنوان</h2>
  <p>بعض النص هنا</p>
  <a href="/link">اقرأ المزيد</a>
</div>

كيفية تنسيق HTML

1. الصق HTML الخاص بك — أدخل الكود الفوضوي أو المصغَّر في المنسّق.
2. اضبط تفضيلاتك — اختر حجم المسافة البادئة (2 أو 4 مسافات) وما إذا كنت تريد الحفاظ على العلامات المضمَّنة.
3. انسخ النتيجة — HTML المنسَّق جاهز لمحرّرك.

التصغير: جعل HTML خفيفًا

يزيل المصغّر كل ما لا يحتاجه المتصفّح — المسافات البيضاء والتعليقات وعلامات الإغلاق الاختيارية وقيم السمات الزائدة. النتيجة سلسلة وحيدة ومضغوطة.

كيفية تصغير HTML

1. الصق HTML المنسَّق — أدخل الكود بالمسافة البادئة والتعليقات والمسافات.
2. اضبط الخيارات — اختر إزالة التعليقات وتقليل المسافات وتحسين السمات.
3. انسخ المخرج المصغَّر — استخدمه في بناء الإنتاج الخاص بك.

متى تستخدم ماذا

نصائح

• أتمتة في عملية البناء — يمكن لمعظم الأدوات (Webpack وVite وGulp) تصغير HTML تلقائيًا عند النشر. اكتب كودًا منسّقًا، وسلّم كودًا مصغَّرًا.
• نسّق قبل الإيداع — HTML نظيف ومتّسق يجعل فروقات Git أكثر قابلية للقراءة ومراجعات الكود أسرع.
• التصغير لن يكسر HTML الخاص بك — يزيل فقط ما ليس له تأثير على العرض. التعليقات والمسافات الزائدة والعلامات الاختيارية يمكن إزالتها بأمان.
• استخدم تلوين الصياغة — يقدّم كل من المنسّق والمصغّر تلوينًا يساعد على التحقّق من أن المخرج صحيح.