قوائم HTML

 

قائمة HTML غير مرتبة

تبدأ قائمة غير مرتبة بالعلامة او الوسم <ul>  ويبدأ كل عنصر قائمة بعلامة او الوسم <li>

سيتم تمييز عناصر القائمة بدوائر سوداء صغيرة افتراضيًا:

<ul>
  <li>موز</li>
  <li>تفاح</li>
  <li>عنب</li>
</ul>
  • موز
  • تفاح
  • عنب

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

تبدأ القائمة المرتبة بالعلامة او الوسم<ol>  يبدأ كل عنصر قائمة بعلامة او وسم <li>

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

<ol>
  <li>موز</li>
  <li>تفاح</li>
  <li>عنب</li>
</ol>
  1. موز
  2. تفاح
  3. عنب

قائمة HTML المرتبة - سمة النوع Type 

تحدد السمة type للعلامة <ol>  نوع علامة عنصر القائمة ارقام او حروف

الأرقام:

<ol type="1">
  <li>موز</li>
  <li>تفاح</li>
  <li>عنب</li>
</ol>
  1. موز
  2. تفاح
  3. عنب

الأحرف الكبيرة:

<ol type="A">
  <li>موز</li>
  <li>تفاح</li>
  <li>عنب</li>
</ol>
  1. موز
  2. تفاح
  3. عنب

أحرف صغيرة:

<ol type="a">
  <li>موز</li>
  <li>تفاح</li>
  <li>عنب</li>
</ol>
  1. موز
  2. تفاح
  3. عنب

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

<ol type="I">
  <li>موز</li>
  <li>تفاح</li>
  <li>عنب</li>
</ol>
  1. موز
  2. تفاح
  3. عنب

الأرقام الرومانية احرف صغيرة:

<ol type="i">
  <li>موز</li>
  <li>تفاح</li>
  <li>عنب</li>
</ol>
  1. موز
  2. تفاح
  3. عنب

قائمة تبدا من عدد معين:

افتراضيًا ستبدأ القائمة المرتبة بالعد من 1. إذا كنت تريد بدء العد من رقم محدد فيمكنك استخدام السمة start  

<ol start="100">
  <li>موز</li>
  <li>تفاح</li>
  <li>عنب</li>
</ol>
  1. موز
  2. تفاح
  3. عنب

قوائم وصف  HTML

 HTML  يدعم أيضا قوائم الوصف.

تحدد العلامة او الوسم  <dl> قائمة الوصف بينما تحدد العلامة او الوسم  <dt> المصطلح (الاسم) ، وتصف العلامة <dd> كل مصطلح:

<dl>
  <dt>قهوة</dt>
  <dd>- مشروب ساخن اسود</dd>
  <dt>حليب</dt>
  <dd>- مشروب بارد أبيض</dd>
</dl>
قهوة
- مشروب ساخن اسود
حليب
- مشروب بارد أبيض

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

<ul>
  <li>قهوة</li>
  <li>شاي
    <ul>
      <li>شاي اسود</li>
      <li>شاي اخضر</li>
    </ul>
  </li>
  <li> حليب</li>
</ul>
  • قهوة
  • شاي
    • شاي اسود
    • شاي اخضر
  • حليب

ملاحظة: يمكن أن تحتوي عناصر القائمة على قائمة جديدة وعناصر HTML أخرى مثل الصور والروابط إلخ.

دروس لغة Html اخرى