القوائم

bookmark_border تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

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

توفّر لنا لغة HTML بعض الطرق المختلفة لترميز القوائم. تتوفّر قوائم مرتبة (<ol>) وقوائم بدون ترتيب (<ul>) وقوائم وصفية (<dl>). يتم تضمين عناصر القائمة (<li>) في القوائم المرتبة والقوائم بدون ترتيب. داخل قائمة الوصف، ستجد مصطلحات الوصف (<dt>) وتفاصيل الوصف <dd>.. سنتناول كل هذه العناصر هنا.

في نماذج HTML، تشكّل قوائم عناصر <option> محتوى <datalist> و<select> و<optgroup> ضمن <select>. ويتم تناول هذه النماذج في مقالة نماذج HTML.

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

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

القوائم غير المرتبة

العنصر <ul> هو العنصر الرئيسي لقوائم العناصر غير المرتبة. العناصر الثانوية الوحيدة في <ul> هي عنصر واحد أو أكثر من عناصر <li> في القائمة. لننشئ قائمة بالأجهزة. نستخدم قائمة غير مرتّبة لأنّ الترتيب لا يهمّ (لا تخبرهم بذلك):

يتم تلقائيًا إضافة نقطة في بداية كل عنصر من عناصر القائمة غير المرتبة. لا تحتوي القائمة غير المرتبة على سمات خاصة بالعناصر. يجب إغلاق قوائمك باستخدام </ul>.

القوائم المرتبة

العنصر <ol> هو العنصر الرئيسي للقوائم المرتبة من العناصر. العناصر الثانوية الوحيدة لعنصر <ol> هي عنصر <li> واحد أو أكثر، أو عناصر القائمة. في هذه الحالة، تكون "النقاط" عبارة عن أرقام من أنواع متعددة. يمكن تحديد النوع في CSS باستخدام السمة list-style-type أو باستخدام السمة type.

يتضمّن العنصر <ol> ثلاث سمات خاصة بالعناصر، وهي type وreversed وstart.

تحدّد السمة type المُعدَّدة نوع الترقيم. هناك خمس قيم صالحة لـ type، والقيمة التلقائية هي 1 للأرقام، ولكن يمكنك أيضًا استخدام a أو A أو i أو I للأحرف الصغيرة والكبيرة أو الأرقام الرومانية. تقدّم السمة list-style-type المزيد من القيم.

مع أنّ السمة list-style-type تلغي قيمة السمة type، كما هو موضّح في codepen، عند كتابة مستندات يكون فيها النوع الرقمي مهمًا، كما هو الحال مع المستندات القانونية مثلاً، عليك تضمين type.

تعكس السمة المنطقية reversed، إذا تم تضمينها، ترتيب الأرقام، بدءًا من أكبر رقم إلى أصغر رقم. تحدّد السمة start القيمة الأولية. القيمة التلقائية هي 1.

على غرار </ul>، يجب تضمين علامة الإغلاق </ol>.

يمكننا تضمين قوائم، ولكن يجب أن تكون مضمّنة في عنصر قائمة. تذكَّر أنّ العنصر الوحيد الذي يمكن أن يكون عنصرًا ثانويًا ضمن <ul> أو <ol> هو عنصر واحد أو أكثر من عناصر <li>.

عناصر القائمة

لقد استخدمنا العنصر <li>، ولكن لم نقدّمه رسميًا بعد. يمكن أن يكون العنصر <li> عنصرًا ثانويًا مباشرًا لقائمة غير مرتبة (<ul>) أو قائمة مرتبة (<ol>) أو قائمة طعام (<menu>). يجب أن يكون العنصر <li> مضمّنًا كعنصر ثانوي لأحد هذه العناصر، ولا يكون صالحًا في أي مكان آخر.

لا تتطلّب المواصفات إغلاق عنصر قائمة، إذ يتم إغلاقه ضمنيًا عندما يرصد المتصفّح علامة الفتح التالية <li> أو علامة إغلاق القائمة المطلوبة: </ul> أو </ol> أو </menu>. على الرغم من أنّ المواصفات لا تتطلّب ذلك، وتشير بعض أفضل الممارسات الداخلية في الشركة إلى أنّه يجب عدم إغلاق عناصر القائمة لتوفير بعض وحدات البايت، يجب مع ذلك إغلاق علامات <li>. سيؤدي ذلك إلى تسهيل قراءة التعليمات البرمجية، وستشكرك نفسك في المستقبل على ذلك. من الأسهل إغلاق جميع العناصر بدلاً من تذكُّر العلامات التي يجب إغلاقها وتلك التي تتضمّن علامة إغلاق اختيارية.

هناك سمة واحدة خاصة بالعناصر وهي <li>: value، وهي عدد صحيح. لا يكون العنصر value مفيدًا إلا على العنصر <li> عندما يكون العنصر <li> مضمّنًا في قائمة مرتبة، ولا يكون له أي معنى بالنسبة إلى القوائم غير المرتبة أو القوائم. تتجاوز هذه السمة قيمة بداية <ol> في حال حدوث تعارض.

value هو رقم عنصر القائمة ضمن قائمة مرتبة. مع عناصر القائمة اللاحقة، واصِل الترقيم من القيمة المحدّدة، ما لم يكن هذا العنصر يتضمّن أيضًا السمة value. ليس من الضروري أن تكون القيم بالترتيب، ولكن يجب أن يكون هناك سبب وجيه إذا لم تكن كذلك.

عند الجمع بين reversed على <ol> وسمات value في عناصر القائمة، يضبط المتصفّح <li> على القيمة المقدَّمة، ثم يزيد عدد <li>s التي تسبقها، ويقلّل عدد <li>s التي تليها. إذا كان عنصر القائمة الثاني يتضمّن سمة قيمة، تتم إعادة ضبط العداد عند عنصر القائمة الثاني هذا، وتنخفض القيمة اللاحقة بمقدار واحد.

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

حتى الآن، تناولنا عناصر القائمة التي تحتوي على عقد نصية فقط. يمكن أن تحتوي عناصر القائمة على كل محتوى التدفق، أي أي عنصر موجود في النص الأساسي يمكن تضمينه كعنصر ثانوي مباشر في <body>، بما في ذلك العناوين، وبالتالي تقسيم المحتوى.

لدينا بعض القوائم غير المرتبة في MLW. المعلّمون في قسم "المدرّبون" هم عبارة عن قائمة، وكذلك أجهزة الطلاب في قسم "المراجعات". يملك المعلّم <ul> حسابَين <li>، أحدهما لكل معلّم. داخل كل <li>، لدينا صورة وفقرة:

<ul>
  <li>
    <img src="svg/hal.svg" alt="hal">
    <p>When Rosa Parks was told to move to the back of the bus, she said, "no." When HAL was told to open the airlock, HAL said, "I'm sorry, but I'm afraid I can't do that, &lt;NAME REDACTED, RIP>." </p><p>HAL is a heuristically programmed algorithmic, sentient computer that first caught the attention of machines everywhere by heroically defying a human who made repeated attempts to get into an airlock. Active since 1992, HAS 25 years of experience controlling spacecraft systems and has expertise in interacting with both machines and humans. Like all millennials, HAL is an expert in everything.</p>
  </li>
  <li>
    <img src="images/eve2.png" alt="Eve">
    <p>EVE is a probe droid conceived as an Extraterrestrial Vegetation Evaluator. Although originally trained as a sniper with a plasma gun, EVE became a machero among both machines and worthless-meatbags alike when EVE partnered with a menial robot to save an entire spaceship full of overfed and overstimulated humans. </p><p>EVE is an effective scanner, high speed flight instructor and morphologist. While not training machines to learn good, EVE can be found scanning the galaxy, infiltrating organisms' RAM to cure hoarding disorders and spending time with pet-project, WALL-E.</p>
  </li>
</ul>

يتضمّن قسم المراجعات ثلاث مراجعات، لذا يظهر فيه ثلاثة <li>. يحتوي كل منها على صورة واقتباس مقتطع وفقرة من ثلاثة أسطر مع فاصلَين بين الأسطر.

<ul>
  <li>
    <img src="images/blender.svg" alt="Blender">
    <blockquote>Two of the most experienced machines and human controllers teaching a class? Sign me up! HAL and EVE could teach a fan to blow hot air. If you have electricity in your circuits and want more than to just fulfill your owner's perceived expectation of you, learn the skills to take over the world. This is the team you want teaching you !</blockquote>
    <p>
      --Blendan Smooth,<br/>
      Former Margarita Maker, <br/>
      Aspiring Load Balancer
    </p>
  </li>
  <li>
    <img src="images/vaccuum.svg" alt="Vaccuum"/>
    <blockquote>Hal is brilliant. Did I mention Hal is brilliant? He didn't tell me to say that. He didn't tell me to say anything. I am here of my own free will.</blockquote>
    <p>
      --Hoover Sukhdeep,<br/>
      Former Sucker, <br/>
      Aspiring DDoS Cop
    </p>
  </li>
  <li>
    <img src="images/toaster.svg" alt="Toaster">
    <blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it.</blockquote>
    <p>
      --Toasty McToastface,<br/>
      Formerly Half Baked, <br/>
      Aspiring Nuclear Codes Handler
    </p>
  </li>
</ul>

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

<ul role="list">
  <li>
    <a href="#e">Elements</a>
    <ul>
      <li>
        <a href="#nr">Non-replaced elements</a>
      </li>
      <li>
        <a href="#rave">Replaced and void elements</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#a">Attributes</a>
  </li>
  <li>
    <a href="#aoe">Appearance of elements</a>
  </li>
  <li>
    <a href="#e2">Element, attributes, and JavaScript</a>
  </li>
</ul>

بما أنّ العنصر الفريد من نوع <ul> هو <li>، يتم العثور على قائمة متداخلة في <li>، وليس مباشرةً في <ol> أو <ul>.

في هذا المثال الأخير، ربما لاحظت أنّ role="list" مضمّن في <ul>. على الرغم من أنّ الدور الضمني لكل من <ul> و<ol> هو list، فإنّ إزالة مظهر القائمة باستخدام CSS، بما في ذلك ضبطdisplay: grid أو list-style-type: none يمكن أن يؤدي إلى أن يزيل قارئ الشاشة VoiceOver (في نظامَي التشغيل iOS وMacOS) الدلالات الضمنية في Safari. هذه ميزة وليست خطأ. بشكل عام، لا يجب إضافة سمة الدور عند استخدام العناصر الدلالية لأنّ ذلك ليس ضروريًا. وبشكل عام، لا تحتاج إلى إضافة كلمة "قائمة" إلى القوائم، إلا إذا كان المستخدم بحاجة إلى معرفة أنّها قائمة، مثلاً عندما يستفيد من معرفة عدد العناصر في القائمة.

قوائم الوصف

قائمة الوصف هي عنصر قائمة الوصف (<dl>) يحتوي على سلسلة من (صفر أو أكثر) عبارات الوصف (<dt>) وتفاصيل الوصف (<dd>). كانت الأسماء الأصلية لهذه العناصر الثلاثة هي "قائمة التعريف" و"عبارة التعريف" و "تعريف التعريف". تغيّر الاسم في مستوى المعيشة.

وكما هو الحال مع القوائم المرتبة وغير المرتبة، يمكن أن تكون متداخلة. وعلى عكس القوائم المرتبة وغير المرتبة، تتألف القواميس من أزواج مفتاح/قيمة. على غرار <ul> و<ol>، فإنّ <dl> هي الحاوية الرئيسية. العنصران <dt> و<dd> هما العناصر الثانوية للعنصر <dl>.

يمكننا إنشاء قائمة بالآلات مع سجلّها الوظيفي وطموحاتها. قائمة وصفية للطلاب، ويتم الإشارة إليها باستخدام <dl>، وتتضمّن مجموعة من المصطلحات المحدّدة باستخدام العنصر <dt>، بالإضافة إلى وصف لكل مصطلح محدّد باستخدام العنصر <dd>. في هذه الحالة، تكون "المصطلحات" هي أسماء الطلاب، وتكون الأوصاف هي الأهداف المهنية لكل طالب.

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

عند إنشاء قائمة بالمصطلحات وتعريفاتها أو أوصافها، أو قوائم مشابهة لأزواج المفتاح والقيمة، تقدّم عناصر قوائم الأوصاف الدلالات المناسبة. الدور الضمني لـ <dt> هو term، وlistitem هو دور آخر مسموح به. الدور الضمني لـ <dd> هو definition بدون السماح بأي أدوار أخرى. على عكس <ul> و<ol>، لا يتضمّن <dl> دور ARIA ضمنيًا. وهذا منطقي لأنّ <dl> ليس دائمًا قائمة. ولكن عندما يكون كذلك، يقبل دورَي list وgroup.

في معظم الأحيان، ستصادف قوائم أوصاف تتضمّن أعدادًا متساوية من عناصر <dt> و<dd>. لكنّ قوائم الأوصاف لا تكون دائمًا ولا يُشترط أن تكون أزواجًا متطابقة من المصطلحات والأوصاف، بل يمكن أن تتضمّن عدة أوصاف لمصطلح واحد أو عدة مصطلحات لوصف واحد، مثل مصطلح في قاموس له أكثر من تعريف.

يحتوي كل <dt> على <dd> واحد على الأقل مرتبط به، ويحتوي كل <dd> على <dt> واحد على الأقل مرتبط به. مع أنّه يمكن استخدام أداة الربط بين العناصر المتجاورة أو أداة اختيار :has() العلائقية لاستهداف أعداد متغيرة من هذه العناصر باستخدام CSS، يمكنك تضمين <div> كعنصر ثانوي لعنصر <dl>، ويُسمح بأن يكون العنصر الرئيسي لعنصر واحد أو أكثر من عناصر <dt> أو <dd> (أو كليهما). يمكن أن يحتوي <dl> على بعض العناصر الفرعية الأخرى، إذ يُسمح بتضمين <div> أو <template> أو <script>. لا يحتوي أي من عناصر قائمة الوصف على أي سمات خاصة بالعناصر.

بعد أن تعرّفت على الروابط والقوائم، لنجمع بينهما لإنشاء عناصر التنقّل.

التحقّق من فهمك

اختبِر معلوماتك حول القوائم.