لیست‌ها در HTML؛ فهرست‌های مرتب و نامرتب

وقتی چند مورد مشابه دارید — مثل مراحل یک دستورالعمل یا مواد لازم یک دستور غذا — نوشتن آن‌ها به‌صورت جداگانه با <br> یا پاراگراف‌های پشت سر هم، هیچ رابطه‌ای بین آن موارد را به مرورگر یا صفحه‌خوان منتقل نمی‌کند. عناصر لیست HTML — <ul>، <ol> و <li> — دقیقاً همین رابطه «این‌ها اعضای یک مجموعه‌اند» را مشخص می‌کنند.

<ul> (Unordered List) زمانی استفاده می‌شود که ترتیب موارد اهمیتی ندارد. هر مورد داخل یک <li> (List Item) قرار می‌گیرد:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>جاوااسکریپت</li>
</ul>

مرورگر به‌طور پیش‌فرض هر مورد را با یک نشانه (معمولاً یک دایره توپر) نمایش می‌دهد. این نشانه ظاهری است و با CSS قابل تغییر است.

<ol> (Ordered List) زمانی استفاده می‌شود که ترتیب موارد مهم است — مثل مراحل یک دستورالعمل:

<ol>
  <li>آب را بجوشانید</li>
  <li>پاستا را اضافه کنید</li>
  <li>بعد از ۱۰ دقیقه صاف کنید</li>
</ol>

مرورگر این موارد را به‌طور پیش‌فرض با شماره (۱، ۲، ۳...) نمایش می‌دهد، نه با نشانه دایره‌ای.

سوال کلیدی برای انتخاب بین این دو این است: «اگر ترتیب موارد را عوض کنم، معنای محتوا تغییر می‌کند؟» اگر جواب مثبت است (مثل مراحل یک دستورالعمل)، از <ol> استفاده کنید. اگر جواب منفی است (مثل فهرست تکنولوژی‌هایی که با آن‌ها کار می‌کنید)، <ul> انتخاب درست است.

روی <ol> می‌توانید با type شکل شماره‌گذاری را تغییر دهید (مثلاً حروف به‌جای عدد) و با start عدد شروع را مشخص کنید:

<ol type="a">
  <li>گزینه اول</li>
  <li>گزینه دوم</li>
</ol>

<ol start="5">
  <li>مرحله پنجم</li>
  <li>مرحله ششم</li>
</ol>

این attributeها کاربرد محدودی دارند و بیشتر برای موارد خاص مفیدند؛ برای اکثر لیست‌های روزمره، شماره‌گذاری پیش‌فرض کافی است.

یک لیست می‌تواند داخل یک <li> از لیست دیگری قرار بگیرد. این برای نمایش زیرمجموعه‌ها مفید است:

<ul>
  <li>فرانت‌اند
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>بک‌اند</li>
</ul>

نکته مهم: لیست داخلی باید داخل <li> والد قرار بگیرد، نه بعد از بسته‌شدن آن — در غیر این‌صورت رابطه تودرتو بودن از بین می‌رود.

هر وقت چند مورد مشابه و مرتبط را پشت سر هم می‌نویسید — مراحل، مزایا، گزینه‌ها، اجزای یک منو — به‌جای نوشتن آن‌ها در پاراگراف‌های جدا یا با <br>، از یک لیست استفاده کنید. این کار هم برای خواننده انسانی واضح‌تر است و هم صفحه‌خوان را قادر می‌سازد تعداد موارد را از قبل اعلام کند (مثلاً «لیستی با ۴ مورد»).

استفاده از br به‌جای لیست واقعی. اگر چند مورد مشابه دارید، لیست بسازید؛ چند خط پشت سر هم با <br> این رابطه را منتقل نمی‌کند.

قرار دادن متن مستقیم داخل ul یا ol، بدون li. تنها فرزند مجاز مستقیم <ul> و <ol>، عنصر <li> است.

لیست تودرتوی نادرست. لیست داخلی باید داخل یک <li> باشد، نه بین دو <li>.

استفاده از ol در جایی که ترتیب اهمیتی ندارد. اگر جابه‌جایی موارد معنا را تغییر نمی‌دهد، <ul> انتخاب درست‌تری است.