لیست ها نیز از موارد پرکاربرد در سایت ها هستند و مواقع زیادی رخ می دهد که لازم باشد در سایت از لیست ها استفاده کرد.

لیست ها چه نوع عناصری هستند؟

لیست ها به دو گروه مرتب شده (ordered) و نامرتب (unordered) تقسیم می شوند و همانطور که از نامشان پیداست برای نمایش لیستی از مطالب به کار می روند.

در لیست های نامرتب که با تگ <ul> استفاده می شوند، ترتیب اجزاء اهمیتی ندارد اما در لیست های مرتب که تگ مربوط به آن <ol> می باشد ترتیب اجزاء اهمیت خاصی دارد و بیشتر با کاراکترهایی مانند اعداد شماره گذاری می شوند.

نمونه ای از لیست نامرتب:

آشنایی با لیست ها در HTML

لیست نامرتب

نمونه ای از لیست مرتب:

آشنایی با لیست ها در HTML

لیست مرتب

تگ <ul> و <ol>:

برای شروع یک لیست باید از این دو تگ استفاده کنید.

ul: لیست نامرتب (unordered list)

ol: لیست مرتب (ordered list)

این تگ ها شامل چند ویژگی مهم هستند که در ادامه تک تک آن ها را بررسی می کنیم.

ویژگیtype:

این ویژگی برای <ol> و <ul> متفاوت است و شکل کاراکتر کناری را تنظیم می کند. برای لیست های مرتب (ol) شامل مقدار های زیر است:

1: با استفاده از اعداد. امتداد آن به صورت 1 – 2 – 3 و…

a: با استفاده از حروف لاتین کوچک. امتداد آن به صورت a و b و c و…

A: با استفاده از حروف لاتین بزرگ. امتداد به صورت A و B و C و …

i: با استفاده از حروف یونانی کوچک. امتداد به صورت i و ii و iii و…

I: با استفاده از جروف یونانی بزرگ. امتداد به صورت I و II و III و…

 

ویژگیstart:

با استفاده از این ویژگی می توانید تنظیم کنید که مقدار عددی برای لیست های مرتب از چه کاراکتری شروع شود. تصویر زیر یک مثال است که در آن از این ویژگی استفاده شده است و برابر با 5 قرار دارد:

آشنایی با لیست ها در HTML

استفاده از ویژگی start



 

ویژگیdir:

راست به چپ (rtl) بودن یا چپ به راست (ltr) بودن را تنظیم می کند.

توجه کنید که اگر از مفادیر فارسی استفاده می کنید همیشه این ویژگی را برابر با rtl و در غیر این صورت برابر با ltr قرار دهید.

 

شکل کلی آن به صورت زیر است:

افزودن آیتم به لیست ها:

برای افزودن یک ردیف یا آیتم به لیست باید از تگ <li> استفاده کنید. این تگ با <li> شروع و با </li> ختم می شود.

 

یک مثال از لیست:

 

که خروجی آن به شکل زیر است:

آشنایی با لیست ها در HTML