لیست های رایج در HTML لیست های ترتیبی و غیر ترتیبی هستند.

لیست ها در HTML

لیست های مرتب

  1. The first list item
  2. The second list item
  3. The third list item

لیست های نامرتب

  • List item
  • List item
  • List item

مثال - خودتان امتحان کنید

Wiki

Unordered list
نحوه ایجاد لیست نامرتب در سند HTML.

Ordered list
نحوه ایجاد لیست مرتب در HTML.

(شما می توانید مثال های بیشتر را در پایین این صفحه مشاهده کنید.)

لیستهای نامرتب (Unorder List)

Wiki

یک لیست غیر ترتیبی یا نامرتب با تگ <ul> شروع می شود. آیتم های هر لیست با تگ <li> شروع می شوند. (List Item)

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

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

نحوه نمایش کد بالا در مرورگر:

  • Coffee
  • Milk

لیست های مرتب (Order List)

Wiki

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

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

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

نحوه نمایش کد بالا در مرورگر:

  1. Coffee
  2. Milk

لیست های تعریفی (Description List)

Wiki

یک لیست تعریفی لیستی از آیتم هاست که هر آیتم توضیحی دارد.

لیست های تعریفی با تگ <dl> نوشته می شوند.

تگ <dl> به همراه تگ <dt> (که آیتم های موجود در لیست را مشخص می کند) و تگ <dd> ( که آیتم های موجود در لیست را توضیح می دهد) استفاده می شود.

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

نحوه نمایش کد بالا در مرورگر:

Coffee
- black hot drink
Milk
- white cold drink

نکات مهم و اساسی

Wiki

نکته: درون آیتم های یک لیست، می توانید تصویر، لینک، تگ </ br>، لیستی دیگر و غیره را قرار دهید.

مثال بیشتر - خودتان امتحان کنید

Different types of ordered lists
نمایش انواع دیگر لیست های ترتیبی.

Different types of unordered lists
نمایش انواع دیگر لیست های غیر ترتیبی.

Nested list
نمایش لیست های تو در تو.

Nested list 2
نمایش لیست های تو در توی پیچیده تر.

Description list
نمایش لیست تعریفی.

تگ های لیست در HTML

Tag Description
<ol>

یک لیست ترتیبی تعریف می کند.
<ul>

یک لیست غیر ترتیبی تعریف می کند.
<li>

آیتم های یک لیست را تعریف می کند.
<dl>

برای ساخت یک لیست تعریفی استفاده می شود.
<dt>

برای ساخت یک آیتم در لیست تعریفی استفاده می شود.
<dd>

برای تعریف توضیحات یک آیتم در لیست تعریفی استفاده می شود.