مُنسِّق HTML
نسِّق HTML فوضويًا أو مُصغَّرًا بمسافة بادئة مناسبة، باستخدام مُحلِّل HTML حقيقي يُنسِّق أيضًا CSS وJavaScript المُضمَّنين بشكل صحيح. تُبلَّغ أخطاء الصياغة برقم السطر.
- الملفات لا تغادر جهازك أبدًا
- مجاني، بدون تسجيل
- بدون علامات مائية
- يعمل دون اتصال بعد التحميل
كيفية استخدام مُنسِّق HTML
- 1
ألصق HTML الخاص بك
مُصغَّر، سيئ المسافة البادئة، أو مكتوب يدويًا — كله يعمل.
- 2
اختر المسافة البادئة
مسافتان، أربع مسافات، أو تبويبات.
- 3
انسخ النتيجة
أو نزّلها كملف .html.
لماذا HTML أكثر صرامة بشأن المسافات البيضاء مما يبدو
يتحمل معظم HTML أن يُعيد مُنسِّق تنظيم مسافاته البيضاء بحرية — مسافة بادئة إضافية بين عناصر كتلة مثل `<div>` و`<p>` ليس لها أي تأثير مرئي، لأن المتصفحات تُطوي تسلسلات المسافات البيضاء بين تلك العناصر عند العرض. ثلاث حالات محددة تكسر ذلك الافتراض تمامًا: المحتوى داخل `<pre>` يعرض كل مسافة وسطر جديد حرفيًا، بالضبط كما كُتب؛ يعامل `<textarea>` محتواه بنفس الطريقة لأنه مُصمَّم لإعادة إنتاج نص دقيق قابل للتحرير من المستخدم؛ وأي عنصر يحمل `white-space: pre` في CSS يرث نفس المعاملة الحرفية. مُنسِّق يُعيد تنظيم المسافات البيضاء داخل أي من تلك الكتل يُغيِّر ما تعرضه الصفحة فعليًا، لا فقط شكل الكود المصدري — لهذا يترك هذا المُنسِّق تلك الكتل سليمة تمامًا بدلًا من تطبيق قواعده المعتادة للمسافة البادئة.
العناصر المضمَّنة الموضوعة مباشرة بجانب نص حالة أكثر دقة: مسافة بين عنصرين مضمَّنين أحيانًا مهمة بصريًا — المسافة بين كلمتين تمتدان عبر وسمي `<span>` منفصلين، على سبيل المثال — لذا المُنسِّق متحفظ عمدًا مع المحتوى المضمَّن، يفضل ترك المسافة البيضاء الغامضة كما هي بدلًا من المخاطرة بطي مسافة كانت تؤدي عملًا بصريًا حقيقيًا.
تنسيق صفحة كاملة في خطوة واحدة، لا فقط الوسوم
صفحة مُجمَّعة كملف HTML واحد تُضمِّن عادةً CSS الخاص بها داخل كتلة `<style>` وJavaScript الخاص بها داخل كتلة `<script>`، ومُنسِّق يفهم فقط وسوم HTML سيترك ذلك الكود المُضمَّن ككتلة غير منسقة أو، أسوأ، يُفسدها بمعاملة الأقواس المعقوفة والفاصلات المنقوطة كصياغة HTML. تسليم محتوى تلك الكتل إلى مُحلِّل CSS حقيقي ومُحلِّل JavaScript حقيقي على التوالي يعني أن الملف بأكمله — الترميز والأنماط والسلوك معًا — يعود مُنسَّقًا بشكل متسق، لا فقط بنية HTML الخارجية.
لماذا تقبل المتصفحات HTML مكسورًا ولا يستطيع مُنسِّق ذلك
المتصفحات مبنية بنموذج استرداد أخطاء مُصمَّم تحديدًا لعرض شيء معقول حتى من ترميز مشوَّه بشدة — وسم غير مُغلَق، علامة اقتباس مفقودة، عناصر متداخلة بترتيب غير صالح — لأن الويب لديه عقود من HTML غير مثالي في الإنتاج لا يزال يحتاج العرض. لا يمكن لمُنسِّق تبني نفس التسامح: لإعادة تنسيق مستند، يجب أن يبني فهمًا بنيويًا دقيقًا لما يتداخل داخل ماذا، ومستند بوسوم غير متوازنة فعلًا ليس له بنية صحيحة وحيدة لاستعادتها. لهذا صفحة تُعرَض بشكل طبيعي تمامًا في متصفح قد لا يزال يُرفَض بواسطة هذا المُنسِّق — أصلح المتصفح الغموض بصمت بطريقته، بينما أداة تحاول إعادة التنسيق بشكل صحيح يجب أن تُشير إلى الغموض بدلًا من التخمين.
صياغة القوالب إنذار كاذب شائع
ملف يفشل في التنسيق غالبًا ليس HTML مكسورًا على الإطلاق، بل قالب — Handlebars أو Jinja أو Blade أو EJS أو ما شابه — يمزج توجيهات القوالب بالترميز، منتجًا مستندًا ليس HTML مستقلًا صالحًا بذاته ولا يحتاج أبدًا أن يكون كذلك. يصبح القالب HTML حقيقيًا وجيد التكوين فقط بعد تشغيل محرك القوالب واستبدال البيانات الفعلية. تنسيق الإخراج المُعرَض، المُلتقَط بعد معالجة محرك القوالب له — من "عرض المصدر" في متصفح، على سبيل المثال — يتجنب هذا تمامًا، بما أن ذلك الإخراج HTML حقيقي دون أي صياغة قوالب متبقية.
الأسئلة الشائعة
هل يُنسِّق CSS وJavaScript داخل الصفحة؟
نعم. يُسلَّم المحتوى داخل `<style>` و`<script>` إلى مُحلِّلات CSS وJavaScript، لذا تُنسَّق صفحة كاملة من ملف واحد بشكل صحيح بدلًا من ترك تلك الكتل دون تعديل.
هل سيُغيِّر التنسيق كيفية عرض صفحتي؟
تقريبًا أبدًا، لكن ليس أبدًا تمامًا: يعامل HTML المسافات البيضاء كمهمة داخل `<pre>` و`<textarea>` والعناصر بـ`white-space: pre`. تُترَك تلك بالضبط كما هي. قد تنزاح العناصر المضمَّنة بمسافة في حالات نادرة، لذا المُنسِّق متحفظ معها.
لماذا يُرفَض HTML الخاص بي؟
عادةً وسوم غير متوازنة فعلًا، أو صيغة قوالب مثل Handlebars أو Jinja أو Blade ليست HTML صالحًا. تُصلح المتصفحات الترميز المكسور بصمت؛ يحتاج المُنسِّق فهم البنية، لذا لا يمكنه ذلك.
هل يُرفَع ترميزي إلى أي مكان؟
لا. يعمل المُحلِّل في متصفحك، لذا تبقى الصفحات غير المنشورة وعمل العملاء على جهازك.
مهام شائعة لأداة مُنسِّق HTML
قد تحتاج أيضًا إلى
مُنسِّق CSS
جمِّل أو صغِّر أوراق الأنماط
مُنسِّق JavaScript
نسِّق JS وTypeScript بمُحلِّل حقيقي
مُنسِّق JSON
نسِّق وتحقق من وصغِّر JSON فورًا
مُرمِّز ومُفكِّك ترميز Base64
رمِّز وفُك ترميز Base64 وBase64URL
أداة تصغير CSS
صغّر أوراق الأنماط بأداة تصغير حقيقية تفهم CSS
مولّد التجزئة (Hash)
MD5 وSHA-1 وSHA-256 وSHA-384 وSHA-512
أداة تصغير JS
صغّر جافاسكريبت بتصغير حقيقي، لا بتعابير نمطية
مُفكِّك ترميز JWT
فُك ترميز وافحص JSON Web Tokens