الفرق بين المراجعتين لصفحة: «HTML/ul»

المراجعة الحالية بتاريخ 16:06، 7 أكتوبر 2022

يُمثِّل العنصر <ul> قائمةً غير مرتبة من العناصر، التي تُعرَض على شكل قائمة منقطة عادةً.

قائمة غير مرتبة <ul> فيها ثلاثة عناصر <li>:

<ul>
  <li>العنصر الأول</li>
  <li>العنصر الثاني</li>
  <li>العنصر الثالث</li>
</ul>

بطاقة العنصر

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

دعم المتصفحات

Chrome	Firefox	Edge	Safari	Opera
مدعوم	مدعوم	مدعوم	مدعوم	مدعوم

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

`compact`

هذه الخاصية المنطقية (boolean) تُحدِّد إذا كانت القائمة ستُعرَض متراصةً على بعضها، لكن تفسير هذه الخاصية يختلف حسب المتصفح ولا تعمل بشكل متناسق في جميع المتصفحات.

يجدر بالذكر أنَّ هذه الخاصية أصبحت مهملة في HTML5، ولا يجب استخدامها، وإنما يمكن تنسيق العنصر <ul> عبر أنماط CSS، ونستطيع تطبيق نفس تأثير هذه الخاصية إذا ضبطنا قيمة line-height إلى 80%.

`type`

تستعمل هذه الخاصية لتحديد نوع النقط التي تظهر قبل عناصر القائمة وهي:

circle
disc
square

لكن هذه الخاصية أصبحت مهملةً أيضًا، لذا لا تستعملها وإنما استعمل خاصية list-style-type في CSS.

ملاحظات الاستخدام

يُستخدم العنصر <ul> لتجميع مجموعة من العناصر التي ليس لها ترتيب رقمي والتي لا يكون لترتيبها أهمية، وتوضع عادةً قبل العناصر نقط أو مربعات أو دوائر ...إلخ. ويمكن تعريف شكل تلك النقط باستخدام خاصية list-style-type في CSS.
لا يوجد حد أقصى لتشعّب القوائم (سواءً كانت قوائم مرتبة <ol> أو غير مرتبة <ul>).
عنصرا <ol> و <ul> يمثلان قائمةً بالعناصر، ويختلفان عن بعضهما أنَّ ترتيب العناصر في <ol> مهم. لذا إذا كنتَ في حيرةٍ من أمرك وأردتَ أن تعرف أيُّ العنصرين تختار، فجرِّب تغيير ترتيب العناصر، فإن تغيّر المعنى فيجب استخدام العنصر <ol> وإن بقي على حاله فاستعمل <ul>.

أمثلة

مثال عن قائمة غير مرتبة متشعبة، لاحظ مكان وسم الإغلاق للعنصر <li>:

<ul>
  <li>العنصر الأول</li>
  <li>العنصر الثاني  <!-- </li> لا يوجد وسم إغلاق --> 
    <ul>
      <li>العنصر الفرعي الأول</li>
      <li>العنصر الفرعي الثاني   <!-- </li> لا يوجد وسم إغلاق --> 
        <ul>
          <li>العنصر الفرعي الأول في القائمة الفرعية</li>
          <li>العنصر الفرعي الثاني في القائمة الفرعية</li>
          <li>العنصر الفرعي الثالث في القائمة الفرعية</li>
        </ul>
      </li>   <!-- </li> هنا وسم الإغلاق -->
      <li>العنصر الفرعي الثالث</li>
    </ul>
    <!-- </li> هنا وسم الإغلاق -->
  </li>
  <li>العنصر الثالث</li>
</ul>

مثال عن قائمة غير مرتبة يتشعب داخلها قائمة مرتبة <ol>:

<ul>
  <li>العنصر الأول</li>
  <li>العنصر الثاني  <!-- </li> لا يوجد وسم إغلاق --> 
    <ol>
      <li>العنصر الفرعي الأول</li>
      <li>العنصر الفرعي الثاني</li>
      <li>العنصر الفرعي الثالث</li>
    </ol>
    <!-- </li> هنا وسم الإغلاق -->
  </li>
  <li>العنصر الثالث</li>
</ul>

التنسيق الافتراضي

تعرض أغلبية المتصفحات العنصر <ul> مع ضبط قيمة الخاصية display إلى block، وشكل الإشارة الخاصة بالقائمة list-style-type إلى disc، مع ضبط الهوامش (margin-top و margin-bottom إلى 1em، و margin-left و margin-right إلى 0)، والحاشية اليسرى padding-left (أو اليمنى padding-right إذا كان اتجاه النص من اليمين إلى اليسار) إلى 40px:

ul {
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

مصادر ومواصفات

معيار HTML Living Standard.
مواصفة HTML5.
مواصفة HTML 4.01.

@@ سطر 3: / سطر 3: @@
 قائمة غير مرتبة <code><nowiki><ul></nowiki></code> فيها ثلاثة عناصر <code>[[HTML/li|<nowiki><li></nowiki>]]</code>:<syntaxhighlight lang="html">
 <ul>
-    <li>first item</li>
+  <li>العنصر الأول</li>
-    <li>second item</li>
+  <li>العنصر الثاني</li>
-    <li>third item</li>
+  <li>العنصر الثالث</li>
 </ul>
 </syntaxhighlight>
+== بطاقة العنصر ==
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 46: / سطر 48: @@
 هذه الخاصية المنطقية (boolean) تُحدِّد إذا كانت القائمة ستُعرَض متراصةً على بعضها، لكن تفسير هذه الخاصية يختلف حسب المتصفح ولا تعمل بشكل متناسق في جميع المتصفحات.
-يجدر بالذكر أنَّ هذه الخاصية أصبحت مهملة في HTML5، ولا يجب استخدامها، وإنما يمكن تنسيق العنصر <code><nowiki><ul></nowiki></code> عبر أنماط CSS، ونستطيع تطبيق نفس تأثير هذه الخاصية إذا ضبطنا قيمة <code>line-height</code> إلى <code>80%.</code>
+يجدر بالذكر أنَّ هذه الخاصية أصبحت مهملة في HTML5، ولا يجب استخدامها، وإنما يمكن تنسيق العنصر <code><nowiki><ul></nowiki></code> عبر أنماط [[CSS]]، ونستطيع تطبيق نفس تأثير هذه الخاصية إذا ضبطنا قيمة <code>line-height</code> إلى <code>80%.</code>
 === <code>type</code> ===
@@ سطر 53: / سطر 55: @@
 * <code>disc</code>
 * <code>square</code>
-لكن هذه الخاصية أصبحت مهملةً أيضًا، لذا لا تستعملها وإنما استعمل خاصية <code>list-style-type</code> في CSS.
+لكن هذه الخاصية أصبحت مهملةً أيضًا، لذا لا تستعملها وإنما استعمل خاصية <code>[[CSS/list-style-type|list-style-type]]</code> في CSS.
 == ملاحظات الاستخدام ==
-* يُستخدم العنصر <code><nowiki><ul></nowiki></code> لتجميع مجموعة من العناصر التي ليس لها ترتيب رقمي والتي لا يكون لترتيبها أهمية، وتوضع عادةً قبل العناصر نقط أو مربعات أو دوائر ...إلخ. ويمكن تعريف شكل تلك النقط باستخدام خاصية <code>list-style-type</code> في CSS.
+* يُستخدم العنصر <code><nowiki><ul></nowiki></code> لتجميع مجموعة من العناصر التي ليس لها ترتيب رقمي والتي لا يكون لترتيبها أهمية، وتوضع عادةً قبل العناصر نقط أو مربعات أو دوائر ...إلخ. ويمكن تعريف شكل تلك النقط باستخدام خاصية <code>[[CSS/list-style-type|list-style-type]]</code> في CSS.
 * لا يوجد حد أقصى لتشعّب القوائم (سواءً كانت قوائم مرتبة <code>[[HTML/ol|<nowiki><ol></nowiki>]]</code> أو غير مرتبة <code><nowiki><ul></nowiki></code>).
 * عنصرا <code>[[HTML/ol|<nowiki><ol></nowiki>]]</code> و <code><nowiki><ul></nowiki></code> يمثلان قائمةً بالعناصر، ويختلفان عن بعضهما أنَّ ترتيب العناصر في <code>[[HTML/ol|<nowiki><ol></nowiki>]]</code> مهم. لذا إذا كنتَ في حيرةٍ من أمرك وأردتَ أن تعرف أيُّ العنصرين تختار، فجرِّب تغيير ترتيب العناصر، فإن تغيّر المعنى فيجب استخدام العنصر <code>[[HTML/ol|<nowiki><ol></nowiki>]]</code> وإن بقي على حاله فاستعمل <code><nowiki><ul></nowiki></code>.
 == أمثلة ==
-مثال عن قائمة غير مرتبة متشعبة، مع ترك وضع وسم الإغلاق للعنصر <code>[[HTML/li|<nowiki><li></nowiki>]]</code>: <syntaxhighlight lang="html">
+مثال عن قائمة غير مرتبة متشعبة، لاحظ مكان وسم الإغلاق للعنصر <code>[[HTML/li|<nowiki><li></nowiki>]]</code>: <syntaxhighlight lang="html">
 <ul>
-   <li>first item</li>
+   <li>العنصر الأول</li>
-   <li>second item
+   <li>العنصر الثاني  <!-- </li> لا يوجد وسم إغلاق -->
-  <!-- Look, the closing </li> tag is not placed here! -->
      <ul>
-       <li>second item first subitem</li>
+       <li>العنصر الفرعي الأول</li>
-       <li>second item second subitem
+       <li>العنصر الفرعي الثاني   <!-- </li> لا يوجد وسم إغلاق -->
-      <!-- Same for the second nested unordered list! -->
          <ul>
-           <li>second item second subitem first sub-subitem</li>
+           <li>العنصر الفرعي الأول في القائمة الفرعية</li>
-           <li>second item second subitem second sub-subitem</li>
+           <li>العنصر الفرعي الثاني في القائمة الفرعية</li>
-           <li>second item second subitem third sub-subitem</li>
+           <li>العنصر الفرعي الثالث في القائمة الفرعية</li>
          </ul>
-       </li> <!-- Closing </li> tag for the li that
+       </li>   <!-- </li> هنا وسم الإغلاق -->
-                  contains the third unordered list -->
+       <li>العنصر الفرعي الثالث</li>
-       <li>second item third subitem</li>
      </ul>
-  <!-- Here is the closing </li> tag -->
+    <!-- </li> هنا وسم الإغلاق -->
    </li>
-   <li>third item</li>
+   <li>العنصر الثالث</li>
 </ul>
 </syntaxhighlight>مثال عن قائمة غير مرتبة يتشعب داخلها قائمة مرتبة <code>[[HTML/ol|<nowiki><ol></nowiki>]]</code>:<syntaxhighlight lang="html">
 <ul>
-   <li>first item</li>
+   <li>العنصر الأول</li>
-   <li>second item
+   <li>العنصر الثاني  <!-- </li> لا يوجد وسم إغلاق -->
-  <!-- Look, the closing </li> tag is not placed here! -->
      <ol>
-       <li>second item first subitem</li>
+       <li>العنصر الفرعي الأول</li>
-       <li>second item second subitem</li>
+       <li>العنصر الفرعي الثاني</li>
-       <li>second item third subitem</li>
+       <li>العنصر الفرعي الثالث</li>
      </ol>
-  <!-- Here is the closing </li> tag -->
+    <!-- </li> هنا وسم الإغلاق -->
    </li>
-   <li>third item</li>
+   <li>العنصر الثالث</li>
 </ul>
+</syntaxhighlight>
+==التنسيق الافتراضي==
+تعرض أغلبية المتصفحات العنصر <code><nowiki><ul></nowiki></code> مع ضبط قيمة الخاصية <code>[[CSS/display|display]]</code> إلى <code>block</code>، وشكل الإشارة الخاصة بالقائمة <code>[[CSS/list-style-type|list-style-type]]</code> إلى <code>disc</code>، مع ضبط الهوامش (<code>[[CSS/margin-top|margin-top]]</code> و <code>[[CSS/margin-bottom|margin-bottom]]</code> إلى <code>1em</code>، و <code>[[CSS/margin-left|margin-left]]</code> و <code>[[CSS/margin-right|margin-right]]</code> إلى <code>0</code>)، والحاشية اليسرى <code>[[CSS/padding-left|padding-left]]</code> (أو اليمنى <code>[[CSS/padding-right|padding-right]]</code> إذا كان اتجاه النص من اليمين إلى اليسار) إلى <code>40px</code>:<syntaxhighlight lang="css">
+ul {
+  display: block;
+  list-style-type: disc;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  margin-left: 0;
+  margin-right: 0;
+  padding-left: 40px;
+}
 </syntaxhighlight>
 ==مصادر ومواصفات==
@@ سطر 102: / سطر 112: @@
 *مواصفة [http://www.w3.org/TR/html5/grouping-content.html#the-ul-element HTML5].
 *مواصفة [https://www.w3.org/TR/html401/struct/lists.html#h-10.2 HTML 4.01].
-[[تصنيف:HTML]]
+[[تصنيف:HTML|{{SUBPAGENAME}}]]
-[[تصنيف:HTML Elements]]
+[[تصنيف:HTML Elements|{{SUBPAGENAME}}]]
-[[تصنيف:HTML Text Content]]
+[[تصنيف:HTML Text Content|{{SUBPAGENAME}}]]