منسق HTML عبر الإنترنت للحصول على كود ويب أكثر تنظيماً

مقدمة

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

كيف تنسّق هذه الأداة شيفرتك

عند لصق شيفرة HTML والضغط على «تنسيق» يُعاد بناؤها بإزاحة من مسافتين، بمستوى تداخل واحد لكل وسم، فيتضح من نظرة واحدة أي العناصر يقع داخل أيها. وهناك بضع نقاط تستحق المعرفة عن طريقة تعاملها مع شيفرة HTML الواقعية:

• التعليقات تبقى ولا تُحذف. تُنقل تعليقات HTML كما هي، بما فيها التعليقات الشرطية وكتل CDATA — وهذا مفيد إن كانت شيفرتك تتضمن إسنادًا لمصدر، أو ملاحظات TODO، أو تعليق ترخيص لا بد من الإبقاء عليه.
• كتل <script> و<style> يُعاد تموضعها ولا يُعاد كتابتها. تُضبط إزاحتها بما يوافق موقعها داخل شيفرة HTML المحيطة، أما ما بداخلها من JavaScript أو CSS فلا يُعاد تنسيقه على حدة. فإن كانت الشيفرة داخل كتلة سكربت أو نمط مبعثرة أصلًا فستبقى مبعثرة — وكل ما يُرتَّب هو موضعها بالنسبة إلى ما حولها من HTML. استخدم JavaScript Beautifier أو CSS Beautifier مباشرة على ذلك المحتوى إن كان يحتاج إلى تنسيق خاص به.

ما ينبغي معرفته قبل الاستخدام

تتعامل هذه الأداة جيدًا مع شيفرة HTML المعتادة وسليمة التكوين. وثمة ثلاثة أمور تحديدًا تستحق التحقق قبل الاعتماد على الناتج مع شيفرة أقل شيوعًا:

• بعض عناصر HTML5 ذاتية الإغلاق لا تُعرَّف على أنها كذلك. قائمة الوسوم التي ترى هذه الأداة أنها لا تحتاج وسم إغلاق تنقصها بعض العناصر الأحدث إذا قورنت بـقائمة العناصر الفارغة في مواصفة HTML الحالية — وتحديدًا <source> (ويُستخدم داخل <video> و<audio> و<picture>)، و<track> (ويُستخدم داخل <video> لعرض التسميات التوضيحية)، و<col> (ويُستخدم داخل <colgroup> في الجداول). فإذا استُخدم أي منها في شيفرتك بالصيغة المعتادة — أي من دون شرطة الإغلاق /> الصريحة — فقد يظهر كل ما يليه بمستوى إزاحة زائد، لأن المنسّق يظل ينتظر وسم إغلاق لن يأتي. وكتابة هذه الوسوم بشرطة إغلاق صريحة (<source />) تتفادى المشكلة.
• لا تُصلح الأداة شيفرة HTML المعطوبة. إن بقي وسم في شيفرتك الأصلية دون إغلاق، أو كانت الوسوم غير متطابقة، فستعيد الأداة تنسيق البنية التي تجدها دون أن تتوقف عن العمل، لكنها في المقابل لا تضيف وسم الإغلاق الناقص ولا تعالج أصل المشكلة. وسيظل الناتج ينقصه ما كان ينقص المُدخل — فهي أداة تنسيق لا أداة تحقق.
• قد تنتقل الوسوم السطرية الواقعة في وسط الجملة إلى سطر مستقل. الوسوم مثل <strong> أو <em> أو <a> داخل فقرة نصية متصلة قد تنتهي في أسطر منفصلة عن الكلمات المحيطة بها، لأن هذه الأداة لا تعدّها من الوسوم التي «تبقى في السطر» كما تفعل بعض أدوات التنسيق الأخرى. وهذا لا يغيّر شكل عرض HTML في المتصفح — إذ تُدمج المسافات بين الوسوم في الحالتين — لكن من الجيد توقّعه إن كنت تنسّق محتوى نصيًا غنيًا بوسوم التنسيق السطرية.

لا شيء من ذلك يغيّر ما تفعله شيفرة HTML فعليًا حين يعرضها المتصفح — فالأمر كله يتعلق بشكل الشيفرة أمام من يقرؤها مباشرة، لا بكيفية ظهور الصفحة.

متى تكون هذه الأداة هي الخيار المناسب

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

إذا كانت شيفرتك تكثر من وسوم <source> أو <track> أو <col> من دون شرطة إغلاق صريحة، فتحقق مرتين من الإزاحة بعد تلك الوسوم في الناتج — راجع القيد المذكور أعلاه. أما مع شيفرة الصفحات المعتادة فهذه الأداة طريق سريع إلى بنية مقروءة من دون تثبيت محرر أو إضافة.

مثال

يُطلب من طالب أن يفحص الصفحة الرئيسية لموقع حقيقي وأن يصف كيف بُنيت قائمة التنقل الرئيسية فيه داخل شيفرة HTML. وعند عرض مصدر الصفحة يجد سطرًا واحدًا متراصًا ومصغَّرًا بلا أي تباعد. وبلصق ذلك في هذه الأداة وتنسيقه يتحول إلى شيفرة مُزاحة كما ينبغي، فيصبح ممكنًا أن يرى فعلًا أي عناصر <nav> و<ul> و<li> متداخلة داخل أيها، وكيف ترتبط قائمة التنقل ببقية الصفحة — وهي قراءة بنيوية يصعب كثيرًا إنجازها على سطر واحد غير منسق.

أسئلة شائعة

هل يغيّر التنسيق طريقة عرض شيفرة HTML؟

لا. تتغير المسافات وفواصل الأسطر فقط — أما الوسوم والسمات والمحتوى فتبقى كما هي، ومن ثم تظهر الصفحة في المتصفح على النحو نفسه في الحالتين.

هل تُحذف تعليقات HTML؟

لا — تبقى التعليقات، بما فيها التعليقات الشرطية، كما هي في الناتج.

هل يُنسَّق أيضًا ما في شيفرتي من CSS أو JavaScript؟

ليس على حدة. يُعاد تموضع كتل <script> و<style> لتوافق إزاحة شيفرة HTML المحيطة بها، لكن ما بداخلها من شيفرة لا يُعاد تنسيقه بمفرده. استخدم JavaScript Beautifier أو CSS Beautifier مباشرة على ذلك المحتوى إن كان يحتاج إلى تنسيق خاص به.

هل تصلح الوسوم المعطوبة أو غير المغلقة؟

لا. تنسّق هذه الأداة البنية التي تجدها؛ وهي لا تتحقق من صحة HTML ولا تضيف وسوم الإغلاق الناقصة.

هل تتعامل مع وسوم <source> و<track> و<col> بشكل صحيح؟

ليس على نحو موثوق حين تُكتب من دون شرطة إغلاق صريحة — فقد يظهر المحتوى الذي يليها بمستوى إزاحة زائد. وكتابتها على هيئة <source /> تتفادى ذلك. راجع «ما ينبغي معرفته قبل الاستخدام» أعلاه.

هل تُحفظ شيفرتي في أي مكان؟

لا. تُعالَج شيفرة HTML الملصوقة لإنتاج النتيجة المنسقة ثم لا يُحتفظ بها بعد ذلك؛ ولا يُسجَّل سوى أن الأداة استُخدمت، لا الشيفرة نفسها.

ما الأدوات ذات الصلة التي يمكنني استخدامها؟

استخدم JavaScript Beautifier أو CSS Beautifier لتنسيق ما في شيفرتك من JavaScript أو CSS، أو HTML Minifier لإعادة ضغط شيفرة HTML الجاهزة استعدادًا لنشرها.