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

أين ينبغي أن توضع قائمة HTML المتداخلة؟

تتكون قائمة HTML من جزأين بنيويين: حاوية القائمة وعناصرها. استخدم <ul> للقائمة غير المرتبة و<ol> للقائمة المرتبة. يُحاط كل عنصر عادي بالوسمين <li> و</li>. ينبغي أن توضع القائمة المتداخلة داخل أحد هذه العناصر. يوضح دليل القوائم من Google نمط التداخل هذا تحديدًا.

التسلسل الأساسي هو: افتح عنصر القائمة الأصل، واكتب تسميته، وأدرج القائمة الفرعية كاملة، ثم أغلق عنصر القائمة الأصل. إبقاء وسم الإغلاق ظاهرًا يجعل التحقق من العلاقة أسهل.

يوضح مقطع HTML الصحيح هذا أن المجموعة A تضم عنصرين تابعين، بينما تظل المجموعة B في المستوى الخارجي:

<ul>
  <li>Group A
    <ul>
      <li>Item A1</li>
      <li>Item A2</li>
    </ul>
  </li>
  <li>Group B</li>
</ul>

اقرأ وسوم الإغلاق من الداخل إلى الخارج. أولًا، يُغلق كل عنصر تابع. ثم تُغلق القائمة الداخلية باستخدام </ul>. بعد ذلك تُغلق المجموعة A باستخدام </li>. وبعدها فقط تبدأ المجموعة B. وهذا يمنحك طريقة عملية للتحقق: حدّد وسمَي الفتح والإغلاق للعنصر الأصل، وتأكد من أن القائمة الفرعية بأكملها تقع بينهما.

يسمح معيار HTML بأن تحتوي عناصر <li> على محتوى تدفقي، ويشمل ذلك القوائم. ويسمح نموذج المحتوى لكل من <ul> و<ol> بعناصر القوائم والعناصر الداعمة للنصوص البرمجية؛ لكنه لا يسمح بوضع حاوية قائمة أخرى مباشرة داخل الحاوية الخارجية. راجع تعريفات المحتوى التجميعي في معيار HTML.

اختر نوع القائمة بشكل مستقل في كل مستوى

اسأل نفسك ما إذا كان تغيير ترتيب العناصر سيغيّر معناها. إذا كان سيغيّرها، فاختر <ol>. أما إذا كانت العناصر مجموعة لا يعتمد معناها على التسلسل، فاختر <ul>. طبّق هذا السؤال بشكل مستقل على كل قائمة فرعية. يشرح توثيق القوائم المرتبة من Mozilla اختبار الترتيب ومزج أنواع القوائم.

في المثال أدناه، المجموعة A والمجموعة B تصنيفان محايدان، لذا فقائمتهما الخارجية غير مرتبة. والعنصران A1 وA2 أيضًا مجموعة غير مرتبة. أما ضمن العنصر A2، فيأتي فتح مستند نموذجي قبل إعادة تسميته، لذا تُستخدم قائمة مرتبة لهاتين التعليمات.

علاقة المحتوى اختيار القائمة الموضع
مجموعة من المجموعات <ul> حول عناصر المجموعات
عناصر تنتمي إلى المجموعة A <ul> داخل <li> الخاص بالمجموعة A
تسلسل ينتمي إلى العنصر A2 <ol> داخل <li> الخاص بالعنصر A2
عناصر تنتمي إلى المجموعة B <ul> داخل <li> منفصل للمجموعة B

لا يتطلب التحول من التعداد النقطي إلى الترقيم أسلوب تداخل مختلفًا. يظل العنصر الأصل محتويًا على القائمة الفرعية كاملة. يدعم توثيق Mozilla صراحةً تداخل القوائم المرتبة وغير المرتبة معًا على مستويات متعددة. ملاحظات استخدام القوائم المرتبة

أنشئ مستندًا كاملًا بقوائم متداخلة في TextEdit

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

في TextEdit، اختر File > New، ثم Format > Make Plain Text. الصق المثال الكامل أدناه. توثق Apple سير العمل هذا باستخدام النص العادي لإنشاء ملفات HTML في دليل HTML الخاص بـ TextEdit.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sample workspace outline</title>
</head>
<body>
  <h1>Sample workspace outline</h1>
  <ul>
    <li>Group A
      <ul>
        <li>Item A1</li>
        <li>Item A2
          <ol>
            <li>Open the sample document.</li>
            <li>Rename the sample document.</li>
          </ol>
        </li>
      </ul>
    </li>
    <li>Group B
      <ul>
        <li>Item B1</li>
        <li>Item B2</li>
      </ul>
    </li>
  </ul>
</body>
</html>

اختر File > Save، وسمِّ الملف nested-lists.html، واحفظه في مكان يسهل العثور عليه. إذا سأل TextEdit عن الامتداد المطلوب، فاختر Use .html. هذه هي خطوات حفظ HTML الموثقة من Apple. انسخ التعليمات البرمجية داخل الكتلة المحاطة بعلامات فقط؛ ولا تنسخ أسطر علامات Markdown المحيطة بها.

في Finder، حدد الملف المحفوظ واختر File > Open With > Safari. توثق Apple اختيار تطبيق عبر File > Open With في اختيار تطبيق لفتح ملف على Mac.

قارن المعاينة بالعلاقات المتوقعة التالية:

  • المجموعة A والمجموعة B شقيقتان في المستوى الخارجي.
  • ينتمي العنصران A1 وA2 إلى المجموعة A.
  • تنتمي التعليمات المرقمة فقط إلى العنصر A2.
  • ينتمي العنصران B1 وB2 إلى المجموعة B.

تحقق من هذه العلاقات في المصدر وكذلك في العرض. جرى التحقق برمجيًا من الوسوم الصريحة وعلاقات القائمة بعناصرها الأصلية في المثال؛ ولم يُختبر مظهره في Safari هنا.

شخّص ارتباط قائمة فرعية بالعنصر الخطأ

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

1. ابحث عن عنصر أصل يُغلق مبكرًا جدًا

يغلق هذا المقطع غير الصحيح المجموعة A قبل بدء قائمتها الفرعية:

<ul>
  <li>Group A</li>
  <ul>
    <li>Item A1</li>
  </ul>
</ul>

هنا، تكون <ul> الداخلية عنصرًا تابعًا مباشرًا لـ<ul> الخارجية. انقل </li> الخاص بالمجموعة A إلى ما بعد </ul> الداخلية، لكي يحتوي العنصر الأصل على القائمة الفرعية. يتبع هذا الإصلاح قاعدة الموضع الموضحة في مثال القوائم المتداخلة من Google.

2. تحقق مما إذا كان الهيكل صحيحًا لكن العنصر الأصل غير صحيح

قد تتبع القائمة قواعد التداخل، ومع ذلك تصف علاقة غير صحيحة. فعلى سبيل المثال، وضع التعليمات المرقمة داخل العنصر A1 سيربطها بالعنصر A1، حتى لو كانت التسمية المقصودة هي العنصر A2. لا تكفي صحة البنية وحدها لتحديد التجميع الذي تقصده.

لكل قائمة فرعية، اسأل: «وسم الفتح لأي عنصر يحتوي هذه القائمة كاملة؟» قارن تسمية ذلك العنصر بالأصل المقصود. في المثال الكامل، ينبغي أن يقودك تتبع التعليمات المرقمة إلى الخارج إلى العنصر A2، ثم إلى المجموعة A. إذا وصلت إلى تسمية أخرى، فانقل القائمة الفرعية كاملة قبل تعديل مظهرها.

3. اجعل وسوم الإغلاق صريحة أثناء التحرير

يسمح HTML بحذف وسم الإغلاق </li> لعنصر ما في ظروف محددة، بما في ذلك عندما يتبعه عنصر آخر مباشرةً. لا حاجة إلى الاعتماد على هذا الاختصار. اكتب كل وسم إغلاق للعناصر أثناء تعلم التداخل أو إصلاحه، لكي تكون كل الحدود ظاهرة. تورد Mozilla شروط الحذف الدقيقة في الملخص التقني لعناصر القوائم.

استخدم مسافات بادئة متسقة للمساعدة أثناء التحرير: اجعل مسافة بادئة للقائمة التابعة أسفل تسمية العنصر الأصل، وحاذِ وسوم فتح وإغلاق القوائم المتطابقة. ثم تحقق من حدود الوسوم الفعلية. تجعل المسافات البادئة العلاقة المقصودة أسهل قراءة؛ أما العناصر الحاوية فهي التي تحددها.

4. أبقِ أغلفة الفقرات داخل حدودها

إذا كانت تسمية العنصر الأصل تحتاج إلى فقرة، فأغلق تلك الفقرة قبل فتح القائمة الفرعية، مع إبقاء كليهما داخل عنصر الأصل. يذكر معيار HTML أن حاويات القوائم لا يمكن أن تكون عناصر تابعة لعناصر <p>. قواعد محتوى الفقرات في HTML

يحافظ هذا المقطع الصحيح على فقرة التسمية والقائمة التابعة معًا داخل المجموعة A:

<ul>
  <li>
    <p>Group A</p>
    <ul>
      <li>Item A1</li>
    </ul>
  </li>
</ul>

أعد فتح المصدر وحافظ على التسلسل الهرمي أثناء التعديلات

إذا أظهرت إعادة فتح الملف في TextEdit محتوى منسقًا بدلًا من الوسوم، فاختر File > Open، وحدد الملف، وانقر Show Options، وحدد Ignore rich text commands، ثم انقر Open. وللملفات المستقبلية، توفر Apple أيضًا TextEdit > Settings > Open and Save والخيار Display HTML files as HTML code instead of formatted text. عرض HTML بوصفه تعليمات برمجية في TextEdit

عند نقل عنصر، انقل كتلة <li> كاملة، بما في ذلك أي قوائم فرعية تحتويها. على سبيل المثال، يتطلب نقل العنصر A2 نقل التعليمات التابعة له معه. سيؤدي نقل التسمية وحدها إلى ترك تلك التعليمات خلفها وتغيير التجميع المقصود في المستند.

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

المصادر