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

كيف تجمع قائمة الأوصاف في HTML المصطلحات؟

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

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

السؤال العملي هو: ما العناصر التي تنتمي معًا؟ قبل كتابة الترميز، دوّن كل ارتباط مقصود بلغة عادية. في هذا المثال الافتراضي، يشترك «Gap» و«Gutter» في شرح واحد، بينما يحمل «Tile» معنيين بديلين.

العلاقة المقصودة البنية ضمن مجموعة واحدة
مصطلح واحد مع وصف واحد عنصر dt واحد، ثم عنصر dd واحد
عدة مصطلحات تشترك في وصف واحد جميع عناصر dt، ثم عنصر dd واحد
مصطلح واحد مع أوصاف بديلة عنصر dt واحد، ثم عدة عناصر dd
عدة مصطلحات تشترك في أوصاف بديلة جميع عناصر dt، ثم جميع عناصر dd
وصف واحد يحتوي على عدة فقرات عنصر dd واحد يحتوي على الفقرات

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

ما الأوصاف التي ينبغي أن تشترك في مجموعة؟

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

عدة مصطلحات مع وصف مشترك واحد

يمنح هذا المقتطف مصطلحين افتراضيين في مسرد شرحًا مشتركًا واحدًا. يظهر المصطلحان قبل الوصف، بما يتوافق مع نمط المصطلحات المتعددة الموثق في MDN. MDN: عدة مصطلحات ووصف واحد

<dl>
  <dt>Gap</dt>
  <dt>Gutter</dt>
  <dd>The space between adjacent columns.</dd>
</dl>

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

مصطلح واحد مع أوصاف بديلة

يمكن أن يأتي وصف بعد وصف آخر ضمن المجموعة نفسها. هنا، يستخدم المسرد الافتراضي «Tile» للدلالة على مفهومين مختلفين. MDN: عنصر تفاصيل الوصف

<dl>
  <dt>Tile</dt>
  <dd>A repeating unit in a visual pattern.</dd>
  <dd>A rectangular content block in a page layout.</dd>
</dl>

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

وصف واحد مع عدة فقرات

إذا كانت الفقرة الثانية توسّع الشرح الأول، فأبقِ الفقرتين داخل عنصر dd واحد. يقبل dd محتوى التدفق، بما في ذلك الفقرات. يحافظ ذلك على وصف واحد مع إتاحة بنية داخلية سهلة القراءة. MDN: الملخص التقني لعنصر تفاصيل الوصف

<dl>
  <dt>Canvas</dt>
  <dd>
    <p>The working area for a composition.</p>
    <p>In this glossary, the term refers to the whole area.</p>
  </dd>
</dl>

أنشئ مثالًا كاملًا في TextEdit على جهاز Mac

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

الصق المستند الكامل أدناه. فهو يجمع القرارات الثلاثة السابقة في مسرد صغير واحد. لكل مجموعة عنصر تغليف div خاص بها، وهو تركيب مدعوم لتطبيق الأنماط أو السمات على مجموعة كاملة. MDN: تغليف مجموعات الاسم والقيمة

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Layout glossary</title>
</head>
<body>
  <h1>Layout glossary</h1>
  <dl>
    <div>
      <dt>Gap</dt>
      <dt>Gutter</dt>
      <dd>The space between adjacent columns.</dd>
    </div>
    <div>
      <dt>Tile</dt>
      <dd>A repeating unit in a visual pattern.</dd>
      <dd>A rectangular content block in a page layout.</dd>
    </div>
    <div>
      <dt>Canvas</dt>
      <dd>
        <p>The working area for a composition.</p>
        <p>In this glossary, the term refers to the whole area.</p>
      </dd>
    </div>
  </dl>
</body>
</html>

اختر File > Save، وسمِّ الملف layout-glossary.html، ثم انقر Save. إذا سألك TextEdit عن الامتداد المطلوب، فاختر Use .html. هذه هي خطوات الحفظ التي توثقها Apple لملف HTML مكتوب يدويًا. Apple: إنشاء ملف HTML

افتح الملف المحفوظ في متصفحك. وقارن النص المعروض بثلاثة ارتباطات متوقعة: يشترك «Gap» و«Gutter» في شرح واحد؛ ولـ«Tile» وصفان؛ أما «Canvas» فله وصف واحد يتكون من فقرتين. استخدم هذه المقارنة للتحقق من علاقات المحتوى التي تقصدها، حتى إن اختلف التباعد الافتراضي في المتصفح عن التصميم الذي تفضله.

حافظ على سلامة التجميع أثناء التحرير

يدعم HTML إما مجموعات المصطلحات والأوصاف مباشرةً داخل dl، أو مجموعات مغلفة بعناصر div. اختر بنية واحدة في القائمة المعنية والتزم بها. في النسخة المغلفة أعلاه، أبقِ مصطلحات كل مجموعة وأوصافها مباشرةً داخل عنصر التغليف الخاص بها؛ ولا تضع المصطلحات والأوصاف في حاويات منفصلة. معيار HTML: نموذج محتوى قائمة الأوصاف

عند مراجعة المثال، استخدم قائمة التحقق المختصرة هذه:

  1. اعثر على المجموعة التي تريد تعديلها.
  2. أبقِ جميع مصطلحاتها قبل أوصافها.
  3. قرر ما إذا كان النص التوضيحي الجديد قيمة أخرى أم فقرة أخرى للقيمة الحالية.
  4. أضف مجموعة جديدة كاملة عند إدخال مصطلح غير ذي صلة.
  5. احفظ المستند وأعد تحميل معاينة المتصفح.

على سبيل المثال، تؤدي إضافة «Panel» بين وصفي «Tile» إلى قطع العلاقة المقصودة: إذ سيصبح الوصف التالي تابعًا للمجموعة التي بدأت حديثًا. ضع المصطلح الجديد ووصفه في عنصر تغليف مستقل. وهذا يتبع قاعدة المعيار التي تنص على أن المصطلح الذي يأتي بعد وصف يبدأ مجموعة جديدة. معيار HTML: خوارزمية التجميع

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

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

المصادر