Loading…

حول مُجمِّل HTML هذا مُجمِّل HTML عبر الإنترنت

هل لديك كتلة HTML غير مقروءة ومضغوطة؟ الصقها هنا وحوّلها إلى ترميز نظيف ومرتب بنقرة واحدة ✨. يعمل مُجمِّل HTML هذا بنسبة 100% في متصفحك، ويستخدم مُنسِّقاً على غرار Prettier في الخلفية، ومُعدّاً لمستندات HTML5، ومقتطفات جزئية، والمخرجات المعتمدة على القوالب.

الميزات الرئيسية لهذا المُجمِّل لـ HTML

  • تجميل بنقرة واحدة: إعادة المسافات البادئة وإعادة تدفق HTML لتحسين القراءة
  • يعمل مع المستندات الكاملة والمقتطفات الصغيرة (المكونات، الأجزاء، القوالب الجزئية)
  • مسافات بادئة مخصصة: مسافات أو علامات تبويب، بعمق 1-8 أحرف (تطابق إعدادات الأداة)
  • تفاف ناعم اختياري عبر تلميح طول السطر، مثالي لمقارنات Git
  • واعي للمسافات البيضاء: يحترم الكتل الحساسة مثل <pre> والشفرة في معظم الحالات الشائعة
  • يحافظ على نوع المستند والتعليقات ووسوم SEO أثناء إعادة تنسيق الهيكل
  • دعم الملفات لـ .html و .htm و .xhtml حتى ~5 ميجابايت (مع حماية نصية 2 ميجابايت)
  • معالجة 100% على جانب العميل – لا يتم رفع HTML إلى الخادم أبداً

🔧 كيفية تجميل HTML (خطوة بخطوة) for html-beautifier

1

لصق أو إسقاط HTML

الصق HTML الخاص بك في المحرر على اليسار، أو اسحب وأسقط ملف .html / .htm من مشروعك. تقبل الأداة مستندات HTML5 كاملة أو أجزاء جزئية.

2

اختر خيارات التنسيق

اختر نمط المسافات البادئة (مسافات أو علامات تبويب) وحجم المسافة البادئة (1-8). يمكنك أيضاً ضبط طول السطر المفضل للحفاظ على الشفرة مرتبة لمقارنات Git.

3

تجميل الترميز

شغِّل المُنسِّق. تقوم الأداة بتحليل HTML الخاص بك وإعادة طباعته بمسافات بادئة متسقة وفواصل أسطر وتباعد مع الحفاظ على الهيكل الدلالي.

4

نسخ أو حفظ

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

المواصفات الفنية

دعم الترميز والملفات

تم ضبط الأداة لسير عمل HTML الحديثة مع بقائها ودودة للترميز القديم.

الميزةالدعمملاحظات
مستندات HTML5✅ كامليتم الحفاظ على نوع المستند ورأس/جسم المستند ووسوم SEO
أجزاء HTML✅ كاملالمكونات، القوالب الجزئية، مقتطفات CMS
XHTML✅ أساسييُعامل كـ HTML؛ يُوصى بترميز سليم التكوين
النصوص البرمجية/الأنماط المضمنة✅ أساسيالمحتوى محفوظ؛ التنسيق الخارجي مُنظف
SVG/MathML مضمن✅ محفوظيحافظ على الهيكل، مسافة بادئة HTML عادية
علامات القوالب✅ بأقصى جهدمعظم الكتل {{ }}, <% %>, {% %} تُحفظ كنص

خيارات التنسيق (مُعينة لإعدادات الأداة)

تتوافق الخيارات مع لوحة تكوين منسق HTML.

الإعدادالنطاق / القيمالافتراضي
نمط المسافة البادئةمسافات / علامات جدولةمسافات
حجم المسافة البادئة1–8مسافتان
تلميح التفاف السطر0 (بدون تلميح) – 12080 حرفًا
نهاية السطرLF (\n) / CRLF (\r\n)LF (\n)
نوع المخرجات النهائيةمُنسق / مُصغرمُنسق (وضع التجميل)
الحد الأقصى لحجم النص~2 ميجابايتحماية أمان داخل محرك المُنسق

الأداء والحدود

سلوك تقريبي في متصفحات سطح المكتب الحديثة.

حجم الإدخالالتجربةالتوصية
≤ 200 كيلوبايت⚡ فوريمثالي لتصحيح الأخطاء اليومية والمراجعات
200–1000 كيلوبايت⚡ سريعلا يزال مريحًا للتحرير التفاعلي
1–2 ميجابايت⏳ توقف ملحوظجيد للاستخدام العرضي؛ احفظ كثيرًا
> 2 ميجابايت🚩 غير موصى به في المتصفحيفضل استخدام أدوات سطر الأوامر للمعالجة المجمعة/التكامل المستمر

بدائل تنسيق HTML عبر سطر الأوامر

للمشاريع الكبيرة، خطوط أنابيب التكامل المستمر، أو القوالب الضخمة، استخدم الأدوات المحلية واحتفظ بهذا المُنسِّق للفحص السريع وتصحيح الأخطاء العشوائي.

لينكس / 🍏 ماك أو إس / 🪟 ويندوز

تنسيق HTML جميل

npx prettier --parser html --write index.html

يستخدم نفس عائلة قواعد التنسيق المستخدمة في العديد من المحررات الحديثة.

Prettier بعرض سطر 100 حرف

npx prettier --parser html --print-width 100 index.html

يطابق تلميح طول السطر الأوسع المشابه لهذه الأداة عبر الإنترنت.

لينكس / 🍏 ماك أو إس

تنظيف tidy-html5

tidy -indent -wrap 80 -quiet index.html > index.pretty.html

أداة كلاسيكية لتنظيف الترميز القديم أو المُنشأ بواسطة أنظمة إدارة المحتوى.

حالات استخدام عملية

تصحيح الأخطاء ومراجعات الكود

اجعل HTML المعقد أسهل للقراءة حتى تبرز الأخطاء.

  • كشف العلامات غير المتوازنة المخفية في الترميز المضغوط.
  • فحص التخطيطات المتداخلة، الشبكات، وحاويات flexbox بصريًا.
  • مشاركة مقاطع قابلة للقراءة في طلبات السحب، التذاكر، أو الوثائق.
<!-- قبل -->
<section><div><article><h2>Title</h2><p>Text…</p></article></div></section>
<!-- بعد التجميل -->
<section>
  <div>
    <article>
      <h2>Title</h2>
      <p>نص...</p>
    </article>
  </div>
</section>

فحص SEO والدلالات

كشف الهيكل لتتمكن من التفكير في الدلالات وعلامات SEO.

  • تحقق من تسلسل العناوين (h1 → h2 → h3) بعد إخراج نظام إدارة المحتوى أو المنشئ.
  • تحقق من وضع علامات meta وعلامات Open Graph والبيانات المهيكلة.
  • مسح سريع للبحث عن علامات canonical و hreflang المكررة أو المفقودة.

التعلم من الصفحات الحالية

تحسين مظهر HTML من جهات خارجية لتعلم الأنماط وأفضل الممارسات.

  • إزالة الضغط عن قوالب الأمثلة من مكتبات واجهة المستخدم.
  • دراسة الترميز الناتج من مولدات المواقع الثابتة أو سمات نظام إدارة المحتوى.
  • تعليم الطلاب كيفية هيكلة HTML الدلالي في الواقع العملي.

❓ Frequently Asked Questions

هل يؤدي تجميل HTML إلى تغيير طريقة عرض الصفحة؟

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

ما الفرق بين أداة تجميل HTML هذه وأداة تصغير HTML؟

تركز هذه الصفحة على ناتج قابل للقراءة وصديق للمطور: المسافات البادئة وفواصل الأسعار والهيكل المتسق. بينما تفضل أداة تصغير HTML المخصصة حجم الملف والأداء، بإزالة المسافات البيضاء والتعليقات وبعض العلامات الاختيارية بشكل عدواني. استخدم أداة التجميل أثناء التصحيح، وأداة التصغير عند تحضير الأصول للإنتاج.

هل يمكنني استخدام هذا مع قوالب الخادم أو الأطر؟

نعم، للعديد من الإعدادات. عادةً ما يحافظ المُنسِّق على معظم علامات القوالب (مثل {{ }}، <% %>، {% %}) كنص. ومع ذلك، قد لا يتم تنسيق HTML غير المعتاد أو غير الصادر من بعض محركات القوالب بشكل مثالي. دائمًا قم بمعاينة القوالب الحرجة قبل النشر.

هل يتم إرسال كود HTML الخاص بي إلى خادم أو تخزينه في أي مكان؟

لا. يعمل المُجمِّل بالكامل في متصفحك باستخدام JavaScript من جانب العميل. لا يتم تحميل HTML الخاص بك أو تسجيله أو مشاركته. للقوالب شديدة الحساسية، يمكنك تفضيل أدوات CLI المحلية، ولكن هذه الأداة مصممة لتكون صديقة للخصوصية افتراضيًا.

ما هو الحد الأقصى لحجم إدخال HTML؟

لتجربة تفاعلية سلسة، يحدد المحرر إدخال النص بحوالي 2 ميغابايت وتحمل الملفات بحوالي 5 ميغابايت. من الأفضل معالجة حزم HTML الأكبر أو تصديرات المواقع الثابتة الكاملة دون اتصال باستخدام أدوات CLI المتصلة بخطوة البناء الخاصة بك.

Pro Tips

Best Practice

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

Best Practice

شغِّل HTML عبر مُجمِّل قبل الالتزام في Git بحيث تبقى الاختلافات المستقبلية صغيرة ومركزة على تغييرات المحتوى الفعلية، وليست مسافات بيضاء عشوائية.

Best Practice

بعد التجميل، امسح العناوين والمعالم وسمات aria-* بسرعة لتحقيق مكاسب سهلة في إمكانية الوصول.

Best Practice

اقترن هذا المُجمِّل بأداة تصغير HTML: قم بالتنسيق للتطوير، واصغر كخطوة أخيرة في خط أنابيب البناء أو النشر.

Additional Resources

MDN – HTML: لغة ترميز النص الفائق
Documentation
WHATWG – معيار HTML الحي
Technical specification
Prettier – خيارات تنسيق HTML
Documentation

Other Tools