منسق HTML
نسّق واختصر وافحص ترميزك

ماذا يفعل منسق HTML

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

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

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

لا يبني أي صفحة ولا يُنفّذ أي نص برمجي، لذلك تُقرأ كتلة ترميز منسوخة من موقع عميل تمامًا مثل كتلتك. كما تُنقل كتلة <script> أو <style> دون مساس، لأن محتواها ليس HTML، وإعادة تنسيقه ستكسره.

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

كيف يقرأ منسق HTML ترميزك

المرور الأول يحوّل النص إلى رموز. وسم بداية ووسم نهاية وسلسلة نص وتعليق وdoctype أشياء مختلفة، لذلك يقرّر القارئ أيّها ينظر إليه حرفًا حرفًا.

ثم يرتّب المرور الثاني تلك الرموز في شجرة، وهنا يُفحَص الشكل. القواعد هنا هي مواصفة تحليل HTML من WHATWG، المستند نفسه الذي يتبعه كل متصفح.

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

ثلاثة أنواع من العناصر تلقى معاملة خاصة. أولًا، عنصر فارغ مثل <br> أو <img> لا يأخذ وسم إغلاق أبدًا. ثم عنصر نص خام مثل <script> أو <style> أو <textarea> يحتفظ بمحتواه حرفيًا. أخيرًا، يحافظ <pre> على مسافاته، لأن المسافة في ذلك العنصر وحده محتوى.

حالة الأحرف قرار لا قاعدة. افتراضيًا يترك المنسق أسماء وسومك وسماتك تمامًا كما هي، لذلك يحافظ <svg> السطري على viewBox وlinearGradient مكتوبةً كما يطلب SVG. لكن خيار واحد يحوّل كل شيء إلى حروف صغيرة حين تريد نمط HTML الأبسط.

لماذا التنسيق والاختصار هما القارئ نفسه

كلا الوضعين يقرأ الترميز بالطريقة نفسها ويبني الشجرة نفسها. ثم يطبع وضع تلك الشجرة عبر أسطر بادئة كثيرة، ويطبعها الآخر بإزالة الفجوات بين الوسوم.

لذلك الفرق هو الخطوة الأخيرة فقط. لأن الاختصار يطوي سلاسل المسافات بدل حذفها، تُبقى مسافة بين وسمين سطريين، إذ إنّ إسقاطها سيلصق كلمتين معًا على الصفحة.

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

لذلك نسّق حين تريد قراءة الترميز أو تحريره، واختصر حين تريد نشره. لصفحة أنت على وشك تقديمها، يؤدّي مختصِر HTML المخصّص الضغط نفسه مع خيارات أكثر قليلًا.

الفحوص التي يجريها، وماذا تعني كل ملاحظة

الملاحظة الأولى وسم إغلاق ضمني. لأن <li> أو <p> أو صف جدول قد يغلق نفسه، يُدرِج المنسق وسم الإغلاق ويخبرك أين، لذلك تكون الشجرة صريحة حتى حين لم يكن مصدرك كذلك.

الثانية عنصر فارغ كُتب بوسم إغلاق. </br> أو وسم إغلاق على <img> لا يعني شيئًا، لذلك يسقطه القارئ ويدوّن الموضع بدل ترك زوج مربك.

الثالثة وسم إغلاق بلا شريك. حين لا يطابق وسم إغلاق شيئًا في المكدّس، لا يستطيع القارئ إقرانه، لذلك يؤشّر السطر بدل تخمين أي وسم مفتوح قصدت.

الرابعة عنصر لا يُغلق أبدًا. إن وصل <div> أو <span> إلى نهاية الملف ما زال مفتوحًا، تسمّي الملاحظة الوسم الذي فتحه، لأنه هو الذي تحتاج إلى إيجاده.

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

السادسة توقف كل شيء، وهي الوحيدة التي تفعل ذلك. تعليق أو doctype أو كتلة <script> بلا نهاية تندفع خارج حافة الملف، لذلك لا يستطيع القارئ الإنهاء ولا يُطبَع شيء حتى تغلقها.

ما لن يفعله منسق HTML هذا

لن يصيّر صفحتك. لا شيء هنا يحمّل صورة أو يُنفّذ نصًا برمجيًا أو يطبّق ورقة أنماط، لذلك لا يستطيع الترميز أن يفعل شيئًا في علامة التبويب بينما تقرأه.

لن يتحقق من صحة الترميز تمامًا. يفحص المنسق الشكل لا القواعد، لذلك يخرج <div> متداخل داخل <span> أو مستوى عنوان قُفز من اثنين إلى أربعة مرتّبًا بإتقان ومع ذلك خاطئًا. في الواقع المرتّب ليس كالصالح.

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

لن يمسّ ما ليس HTML. يُنسَخ محتوى <script> أو <style> أو <pre> تمامًا، لذلك مرّره عبر مدقّق JavaScript أو مدقّق CSS حين تريد فحصها أيضًا.