وثائق HTML قابلة للتشغيل: القوائم في HTML

Q: كيف أنشئ نقاطًا في HTML؟

استخدم قائمة غير مرتبة: مع لكل نقطة، مثل Milk Eggs . يرسم المتصفح نقطة قبل كل عنصر ويزيح القائمة.

Q: كيف أزيل النقاط من قائمة في HTML؟

اضبط list-style: none على في CSS. واضبط أيضًا padding-inline-start: 0 (أو padding: 0) لإزالة الإزاحة التي يضيفها المتصفح من أجل النقاط.

Q: كيف أبدأ قائمة مرقمة من رقم آخر؟

استخدم السمة start: يعطي العنصر الأول الرقم 5. وreversed تجعل العد تنازليًا، وvalue على تحدد رقم ذلك العنصر والعناصر التي تليه.

Q: كيف أنشئ قائمة متداخلة في HTML؟

ضع أو الداخلية داخل من القائمة الخارجية، بعد نص ذلك العنصر. القائمة الموضوعة مباشرة داخل أخرى، بين عناصر ، غير صالحة.

القوائم في HTML: ul وol وli

في HTML قائمتان رئيسيتان. <ul> (قائمة غير مرتبة) تعرض النقاط، و<ol> (قائمة مرتبة) تعرض الأرقام. كل عنصر فيها هو <li> (عنصر قائمة).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Lists</title>
</head>
<body>
  <h3>Shopping</h3>
  <ul>
    <li>Milk</li>
    <li>Eggs</li>
    <li>Bread</li>
  </ul>

  <h3>Recipe</h3>
  <ol>
    <li>Whisk the eggs</li>
    <li>Heat the pan</li>
    <li>Cook for two minutes</li>
  </ol>
</body>
</html>

استخدم <ol> حين يكون للترتيب معنى (خطوات، تصنيفات، فهرس محتويات) و<ul> حين لا يكون. تعلن قارئات الشاشة عن الاثنتين كقوائم مع عدد العناصر، مثل «قائمة، 3 عناصر»، ولهذا فالقائمة الحقيقية أفضل من أسطر تبدأ بـ «•» أو «1.» مكتوبة يدويًا.

لا يمكن أن تحتوي القائمة مباشرة إلا على عناصر <li>. أي شيء آخر، بما في ذلك العناوين والفقرات والقوائم الأخرى، يوضع داخل <li>.

أنماط النقاط

list-style-type على <ul> تغيّر النقطة. والعنصر الزائف ::marker ينسّق النقطة أو الرقم نفسه، بمعزل عن النص:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bullet styles</title>
  <style>
    .disc { list-style-type: disc; }
    .circle { list-style-type: circle; }
    .square { list-style-type: square; }
    .custom { list-style-type: "\2713  "; }
    .colored li::marker { color: #2563eb; font-size: 1.3em; }
  </style>
</head>
<body>
  <ul class="disc"><li>disc (the default)</li></ul>
  <ul class="circle"><li>circle</li></ul>
  <ul class="square"><li>square</li></ul>
  <ul class="custom"><li>any text as the bullet</li></ul>
  <ul class="colored"><li>blue, larger marker</li><li>text stays the same</li></ul>
</body>
</html>

القيمة النصية تستخدم ذلك النص كنقطة. "\2713 " علامة صح تتبعها مسافة واحدة: المسافة الأولى تنهي التهريب \2713 فقط. يقبل ::marker خصائص قليلة، أهمها color وfont-size وخصائص الخط الأخرى، وهذا يلبي الطلب الشائع «نقاط ملونة» من دون شيفرة إضافية.

القوائم المرتبة: الأرقام والحروف والأرقام الرومانية

لعنصر <ol> سمات للترقيم:

السمة	مثال	النتيجة
`type`	`type="a"`	a وb وc (وتعمل أيضًا `A` و`i` و`I` و`1`)
`start`	`start="5"`	يبدأ العد من 5
`reversed`	`reversed`	يعد تنازليًا
`value` (على `<li>`)	`<li value="10">`	هذا العنصر رقمه 10، والعناصر التالية تكمل منه

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ordered lists</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 24px; font-family: system-ui, sans-serif; }
  </style>
</head>
<body>
  <ol type="A">
    <li>Option A</li>
    <li>Option B</li>
  </ol>

  <ol type="i">
    <li>Preface</li>
    <li>Contents</li>
  </ol>

  <ol start="4">
    <li>Fourth step</li>
    <li>Fifth step</li>
  </ol>

  <ol reversed>
    <li>Bronze</li>
    <li>Silver</li>
    <li>Gold</li>
  </ol>
</body>
</html>

type مقبولة في HTML لأن الحروف قد تحمل معنى («اختر الخيار B»). أما للتغييرات البصرية فقط فتفعل CSS الشيء نفسه بـ list-style-type: upper-alpha أو lower-roman.

القوائم المتداخلة

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested list</title>
</head>
<body>
  <ul>
    <li>Frontend
      <ul>
        <li>HTML</li>
        <li>CSS
          <ul>
            <li>Flexbox</li>
            <li>Grid</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Backend</li>
  </ul>
</body>
</html>

لاحظ موضع </li>: العنصر «Frontend» لا يُغلق إلا بعد قائمته الفرعية. إغلاقه قبل <ul> يضع القائمة الفرعية مباشرة داخل <ul> الخارجية، وهذا غير صالح رغم أن الشكل يكاد يكون نفسه.

القوائم المرتبة تتداخل بالطريقة نفسها، ويبدأ الترقيم من 1 في كل قائمة فرعية. للأرقام مثل 1.1 و1.2 تحتاج إلى عدّادات CSS.

قوائم الوصف: dl وdt وdd

قائمة الوصف تربط المصطلحات بأوصافها: مسرد مصطلحات، تفاصيل طلب، أزواج تشبه الأسئلة الشائعة. <dt> هو المصطلح و<dd> الوصف:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Description list</title>
  <style>
    dt { font-weight: bold; }
    dd { margin: 0 0 10px; color: #4b5563; }
  </style>
</head>
<body>
  <dl>
    <dt>HTML</dt>
    <dd>The structure and content of a page.</dd>
    <dt>CSS</dt>
    <dd>How the page looks.</dd>
    <dt>JavaScript</dt>
    <dd>What the page does.</dd>
  </dl>
</body>
</html>

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

قوائم بلا نقاط: القوائم الرئيسية والقوائم الأفقية

قوائم التنقل هي قوائم روابط. أزل النقاط بـ list-style: none والإزاحة بـ padding: 0، ثم رتّب العناصر في صف بـ flexbox:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Horizontal list</title>
  <style>
    nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      gap: 8px;
    }
    nav a {
      display: block;
      padding: 8px 14px;
      border-radius: 6px;
      background: #e5e7eb;
      color: #111827;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#courses">Courses</a></li>
      <li><a href="#pricing">Pricing</a></li>
    </ul>
  </nav>
</body>
</html>

تبقى القائمة قائمة بالنسبة لقارئات الشاشة («تنقل، قائمة، 3 عناصر»). مع استثناء واحد: Safari مع VoiceOver قد يُسقط معنى القائمة عند إزالة النقاط. إذا كان العدد مهمًا لمستخدميك، فأضف role="list" إلى <ul>.

التباعد الافتراضي

تعطي المتصفحات القوائم هامشًا علويًا وسفليًا بمقدار 1em وتزيحها بـ padding-inline-start: 40px، وهناك تقع النقاط. الحشو في جهة البداية، لذلك في اللغات المكتوبة من اليمين إلى اليسار تنتقل النقاط والإزاحة إلى الجهة الأخرى تلقائيًا، أي إلى اليمين في العربية. احذف الحشو وستخرج النقاط خارج صندوق القائمة، حيث قد تُقتطع، فإما أن تُبقي بعض الحشو أو تستخدم list-style-position: inside.

أخطاء شائعة

<li> بلا قائمة أب. يجب أن يكون داخل <ul> أو <ol> أو <menu>.
قائمة متداخلة خارج <li> الخاص بها. ضع القائمة الفرعية داخل العنصر الذي تنتمي إليه.
نص أو وسوم أخرى مباشرة داخل <ul>، مثل <ul><p>Note</p><li>...</li></ul>. انقلها إلى داخل <li> أو إلى خارج القائمة.
كتابة النقاط أو الأرقام يدويًا بـ • و<br>. تسمع قارئات الشاشة فقرة، لا قائمة.
list-style: none من دون padding: 0، فتبقى إزاحة غامضة بمقدار 40 بكسل.
استخدام <ol> من أجل المظهر. إذا كان الترتيب لا يهم، فاستخدم <ul> ونسّقها.

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

كيف أنشئ نقاطًا في HTML؟

استخدم قائمة غير مرتبة: <ul> مع <li> لكل نقطة، مثل <ul><li>Milk</li><li>Eggs</li></ul>. يرسم المتصفح نقطة قبل كل عنصر ويزيح القائمة.

ما الفرق بين ul وol؟

<ul> قائمة غير مرتبة تُعرض بالنقاط، للعناصر التي لا يهم ترتيبها. <ol> قائمة مرتبة تُعرض بالأرقام، للخطوات والتصنيفات التي يهم فيها الترتيب. كلاهما يحتوي على عناصر <li>.

كيف أزيل النقاط من قائمة في HTML؟

اضبط list-style: none على <ul> في CSS. واضبط أيضًا padding-inline-start: 0 (أو padding: 0) لإزالة الإزاحة التي يضيفها المتصفح من أجل النقاط.

كيف أبدأ قائمة مرقمة من رقم آخر؟

استخدم السمة start: <ol start="5"> يعطي العنصر الأول الرقم 5. وreversed تجعل العد تنازليًا، وvalue على <li> تحدد رقم ذلك العنصر والعناصر التي تليه.

كيف أنشئ قائمة متداخلة في HTML؟

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

مفاهيم ذات صلة

القوائم في HTML: النقطية والمرقمة والمتداخلة