كيفية عمل مسافة بادئة في لغة HTML: دليل خطوة بخطوة

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

يغطي هذا الدليل كلاً من هيكلة مستند HTML الخاص بك باستخدام المسافة البادئة المناسبة على مستوى الكود والمسافة البادئة المرئية للنص على صفحة الويب الخاصة بك باستخدام خصائص CSS.

باختصار: المسافة البادئة في لغة HTML

• يعمل تنسيق المسافات البادئة في لغة HTML على مستويين: بنية الكود في محرر النصوص، والمسافة البادئة المرئية للنص على الصفحة المعروضة

• استخدم مسافتين لكل مستوى تداخل للمسافة البادئة على مستوى الكود، وحافظ على التناسق في جميع أنحاء الملف

• لضبط المسافة البادئة للنص بصريًا، استخدم خاصية text-indent للسطر الأول فقط، و margin-left لإزاحة كتلة كاملة، و padding-left للمسافة البادئة داخل الحاويات المنسقة

• لا تستخدم أو<blockquote style=";text-align:right;direction:rtl"> فقط لإنشاء مسافة بادئة مرئية

• استخدم أداة التنسيق المدمجة في VS Code أو Prettier لأتمتة المسافة البادئة في جميع أنحاء فريقك

لماذا يُعدّ التنسيق الصحيح للمسافات البادئة في لغة HTML أمرًا مهمًا؟

تخيّل أنك تقرأ كتابًا بلا فصول، ولا فقرات، ولا مسافات بين الجمل. هذا بالضبط ما كود HTML لأي مطوّر يتعامل معه.

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

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

إلى جانب سهولة القراءة، محركات البحث بتحليل كود HTML الخاص بك لفهم بنية الصفحة. يساعد كود HTML النظيف والمنظم جيدًا برامج الزحف على تفسير تسلسل المحتوى بدقة، مما قد يدعم بشكل غير مباشر أداء تحسين محركات البحث (SEO).

نوعان من المسافات البادئة في لغة HTML يجب أن تعرفهما

قبل الخوض في التقنيات، يجدر توضيح لبسٍ يقع فيه العديد من المبتدئين. هناك معنيان مختلفان يقصدهما الناس عندما يقولون "المسافة البادئة في لغة HTML"

• تنسيق الكود إلى كيفية ترتيب وسوم HTML داخل محرر الكود. ولا يؤثر ذلك على ما يراه المستخدمون على الموقع الإلكتروني. يتمثل الغرض منه في جعل الكود قابلاً للقراءة من خلال تمثيل التسلسل الهرمي للعناصر بصريًا.

• مصطلح "المسافة البادئة المرئية للنص" إلى إضافة مسافة بادئة للمحتوى على صفحة الويب المعروضة، بحيث يرى المستخدمون مسافة بادئة فعلية. ويتم التحكم في ذلك من خلال خصائص CSS. يؤدي الخلط بين هذين المصطلحين إلى إساءة استخدام المطورين لعناصر معينة، مثل

  `<textarea>`، لمجرد التأثير البصري، مما يخلق مشاكل حقيقية في إمكانية الوصول.

كيفية ضبط مسافة بادئة لرمز HTML الخاص بك في المحرر؟

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

فهم بنية العلاقة بين الوالدين والطفل

لغة HTML هي لغة هرمية. عندما يكون عنصر ما داخل عنصر آخر، يصبح تابعًا له. يجب دائمًا أن يكون العنصر التابع مُزاحًا بمقدار مستوى واحد أعمق من العنصر الأصل لجعل هذه العلاقة مرئية في الكود.

إليك نموذج HTML بدون مسافات بادئة يعمل ولكنه صعب القراءة:

<div style=";text-align:right;direction:rtl"><h1 style=";text-align:right;direction:rtl">عنوان الصفحة</h1><p style=";text-align:right;direction:rtl"> هذه فقرة.</p><ul style=";text-align:right;direction:rtl"><li style=";text-align:right;direction:rtl"> البند الأول</li><li style=";text-align:right;direction:rtl"> البند الثاني</li></ul></div>

إليك نفس كود HTML مع تطبيق المسافة البادئة المناسبة:

<div style=";text-align:right;direction:rtl"><h1 style=";text-align:right;direction:rtl">عنوان الصفحة</h1><p style=";text-align:right;direction:rtl"> هذه فقرة.</p><ul style=";text-align:right;direction:rtl"><li style=";text-align:right;direction:rtl"> البند الأول</li><li style=";text-align:right;direction:rtl"> البند الثاني</li></ul></div>

تتضح البنية على الفور.<h1 style=";text-align:right;direction:rtl"> ،<p style=";text-align:right;direction:rtl"> ، و<ul style=";text-align:right;direction:rtl"> جميعهم أبناء<div style=";text-align:right;direction:rtl"> . ال<li style=";text-align:right;direction:rtl"> تتواجد العناصر في مستوى أعمق لأنها أبناء لـ<ul style=";text-align:right;direction:rtl"> يتم إزاحة كل مستوى من مستويات التداخل بنفس المقدار باستمرار.

مسافتان، أم أربع مسافات، أم علامات جدولة؟

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

الأهم هو اختيار نمط واحد واستخدامه في جميع أنحاء المشروع. فاستخدام مسافتين في بعض الملفات وأربع مسافات في ملفات أخرى يُسبب فوضى في نظام التحكم بالإصدارات، ويُؤدي إلى احتكاك في بيئات العمل الجماعي.

استخدام VS Code لأتمتة المسافة البادئة

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

• في نظام التشغيل ويندوز، اضغط على Shift + Alt + F لتنسيق المستند بأكمله.
• على نظام ماك، اضغط على Shift + Option + F.

بالنسبة للفرق، يفرض ملحق Prettier قواعد المسافة البادئة على محرر كل مطور من خلال ملف تكوين مشترك .prettierrc. هذا يزيل تمامًا تعارضات الدمج المتعلقة بالمسافة البادئة وصعوبات مراجعة التعليمات البرمجية.

كيفية إضافة مسافة بادئة للنص في HTML باستخدام CSS؟

والآن ننتقل إلى الجزء الذي يؤثر على ما يراه المستخدمون فعلياً: وهو تنسيق النص بصرياً على صفحة الويب. هناك ثلاث خصائص رئيسية في CSS ستستخدمها، ولكل منها سلوك مختلف.

خاصية CSS text-indent

تُضيف خاصية text-indent مسافة بادئة للسطر الأول فقط من كتلة النص. وهي تعمل على عناصر مستوى الكتلة مثل الفقرات والعناوين. أما جميع الأسطر اللاحقة في نفس العنصر فتبقى على الهامش العادي.

p { text-indent: 30px; }

يؤدي هذا إلى إزاحة السطر الأول من كل فقرة بمقدار 30 بكسل. يمكنك استخدام وحدات مختلفة حسب تصميمك. توفر لك وحدات البكسل إزاحة مطلقة ثابتة.

يؤدي استخدام em أو rem إلى ربط المسافة البادئة بحجم الخط، مما يُحسّن التوافق مع مختلف أحجام الشاشات . أما قيم النسبة المئوية فتجعل المسافة البادئة نسبية إلى عرض الكتلة الحاوية.

p { text-indent: 2em; }

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

p { text-indent: -2em; padding-left: 2em; }

يتميز تنسيق خاصية المسافة البادئة للنص بتوافق ممتاز مع جميع المتصفحات الحديثة. ولا حاجة إلى أي بادئات خاصة بالبائعين.

خاصية الهامش الأيسر

تُضيف خاصية margin-left مسافة بادئة لكتلة كاملة من المحتوى عن طريق إزاحة العنصر بأكمله إلى اليمين. وهذا مفيد عندما تريد إزاحة فقرة أو قسم أو حاوية كاملة بدلاً من سطرها الافتتاحي فقط.

.indented-section { margin-left: 40px; }

تعمل خاصية margin-left على أي عنصر HTML تقريبًا.

هناك أمرٌ يجب مراعاته: تُنشئ الهوامش مساحةً خارج صندوق العنصر، لذا فهي تُزيح العنصر نفسه وليس النص الموجود بداخله فقط. وهذا مهمٌ في تخطيطات Flexbox أو Grid حيث تتم إدارة المسافات بالفعل بواسطة نظام التخطيط.

خاصية الحشو الأيسر

تُنشئ خاصية padding-left مساحة داخل صندوق محتوى العنصر، بين الحدود والمحتوى. وهذا هو الفرق الرئيسي بينها وبين خاصية margin-left.

.callout-box { padding-left: 24px; background-color: #f5f5f5; border-left: 4px solid #0057ff; }

إذا استخدمت خاصية margin-left هنا بدلاً من padding-left، فسيظهر النص بمسافة بادئة، لكن لون والحدود سيبدآن من الحافة اليسرى الأصلية، مما يبدو غير مكتمل.

تحافظ خاصية padding-left على شكل الحاوية المنسقة سليمة أثناء تحريك النص إلى الداخل. استخدمها عند إضافة مسافة بادئة للنص داخل حاوية ذات خلفية أو حدود أو نموذج صندوق محدد.

تنسيق قوائم HTML والعناصر المتداخلة

تُطبّق المتصفحات مسافة بادئة افتراضية على قوائم HTML، لكن مقدار هذه المسافة يختلف بين متصفحات Chrome وFirefox وSafari. وللحصول على نتائج متسقة ومُتحكّم بها، حدّدها صراحةً في CSS

ul, ol { padding-left: 24px; }

بالنسبة للقوائم المتداخلة، قم بتطبيق مسافة بادئة إضافية على العنصر المتداخل لإنشاء مستوى ثانٍ واضح:

<ul style=";text-align:right;direction:rtl"><li style=";text-align:right;direction:rtl">العنصر الرئيسي<ul style=";text-align:right;direction:rtl"><li style=";text-align:right;direction:rtl"> العنصر المتداخل أ</li><li style=";text-align:right;direction:rtl"> العنصر المتداخل ب</li></ul></li></ul>

من خلال التحكم في خاصية padding-left في كل مستوى باستخدام CSS، ينتج عن ذلك قائمة نظيفة ذات مستويين متباعدين تبدو متناسقة عبر جميع المتصفحات.

عناصر HTML التي تتعامل مع المسافة البادئة بشكل أصلي

تأتي بعض عناصر HTML مزودة بخاصية المسافة البادئة المدمجة في المتصفحات. إن معرفة متى تستخدمها بشكل صحيح ومتى لا تستخدمها تحافظ على سهولة الوصول إلى التعليمات البرمجية الخاصة بك وعلى سلامة دلالاتها.

• عنصر الاقتباس (blockquote) مُزاحًا بشكل افتراضي في معظم المتصفحات. يُسيء العديد من المطورين استخدامه لمجرد هذا التأثير البصري، وهذا خطأ.

ال<blockquote style=";text-align:right;direction:rtl"> يُستخدم هذا العنصر لتمييز المحتوى المقتبس من مصدر خارجي. تُعرّفه قارئات الشاشة على أنه اقتباس، لذا فإن استخدامه مع محتوى غير مقتبس يُضلل المستخدمين الذين يعتمدون على التقنيات المساعدة. استخدمه فقط للاقتباسات الفعلية، واستخدم CSS لكل شيء آخر.

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

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

أخطاء شائعة في المسافات البادئة يجب تجنبها

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

يؤدي استخدام الأنماط المضمنة في كل عنصر على حدة بدلاً من فئة CSS قابلة لإعادة الاستخدام إلى خلق كابوس صيانة.

تحديث النمط "margin-left: 40px" عبر عشرين علامة فقرة مختلفة في HTML الخاص بك هو عمل شاق كان من الممكن التخلص منه تمامًا باستخدام فئة CSS واحدة.

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

إمكانية الوصول والمسافة البادئة

هذا أمر تتجاهله معظم الأدلة. يؤثر التنسيق الصحيح للمسافات البادئة على مستوى الكود بشكل مباشر على مدى دقة تحليل التقنيات المساعدة لصفحتك.

• عندما يتم تداخل العناصر بشكل صحيح، ويكون التسلسل الهرمي لـ HTML نظيفًا، يمكن لقارئات الشاشة تحديد المعالم والعناوين ومناطق المحتوى بدقة.

• عندما يتم إساءة استخدام العناصر لتأثيراتها الجانبية البصرية، فإن قارئات الشاشة تعلن عن السياق الخاطئ للمستخدمين.

كما أن التنسيق الصحيح للمسافات البادئة يجعل من السهل جدًا تدقيق HTML الخاص بك للتأكد من صحته الدلالية باستخدام أدوات مثل WAVE و axe DevTools .

الخاتمة

يُعدّ تنسيق المسافات البادئة في لغة HTML أحد تلك العادات التي تُؤتي ثمارها أكثر بكثير من تكلفتها.

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

في شركة سي هوك ميديا، نقوم ببناء وتدقيق مواقع الويب حيث تؤثر جودة الكود بشكل مباشر على الأداء وسهولة الصيانة وتجربة المستخدم.

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

الأسئلة الشائعة