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

ul، ol و li: وقتی محتوات شکل فهرست داره

خیلی از محتواهایی که تو وب می‌نویسیم، ماهیت فهرستی دارن؛ مثل مواد لازم یه دستور پخت، مراحل انجام یه کار، یا لیست مزایای یه محصول. HTML5 برای این نوع محتوا دو تگ اصلی داره: لیست نامرتب (ul) و لیست مرتب (ol). تو این درس کامل می‌بینیم هرکدوم کجا کاربرد دارن و چطور باید درست ازشون استفاده کرد.

لیست نامرتب: ul

<ul>
  <li>سیب‌زمینی</li>
  <li>پیاز</li>
  <li>گوجه‌فرنگی</li>
</ul>

تگ ul مخفف Unordered List هست و برای فهرست‌هایی استفاده می‌شه که ترتیب موادش اهمیت نداره؛ یعنی اگه جای دو تا آیتم رو عوض کنی، معنای کلی فهرست تغییری نمی‌کنه. هر آیتم داخل یه ul باید داخل تگ li (مخفف List Item) نوشته بشه. مرورگر به‌صورت پیش‌فرض جلوی هر li یه علامت گلوله (Bullet Point) می‌ذاره.

لیست مرتب: ol

<ol>
  <li>آب را در قابلمه بریزید.</li>
  <li>پاستا را اضافه کنید.</li>
  <li>پس از ده دقیقه، آب را صاف کنید.</li>
</ol>

تگ ol مخفف Ordered List هست و برعکس ul، برای فهرست‌هایی استفاده می‌شه که ترتیب موادش اهمیت داره؛ مثل مراحل یه دستورالعمل که باید دقیقاً به همون ترتیب انجام بشن. مرورگر به‌صورت پیش‌فرض جلوی هر li یه عدد (۱، ۲، ۳ و...) قرار می‌ده.

چطور تصمیم بگیریم از ul استفاده کنیم یا ol؟

سؤال کلیدی که باید از خودت بپرسی اینه: «اگه ترتیب این موارد رو به‌هم بریزم، معنا از بین می‌ره یا نه؟» اگه جواب بله بود، از ol استفاده کن؛ اگه جواب نه بود، از ul. مثلاً لیست خرید یه فروشگاه (نون، شیر، تخم‌مرغ) اهمیتی نداره کدوم اول بیاد، پس ul مناسبه. اما مراحل نصب یه نرم‌افزار حتماً باید به ترتیب مشخصی طی بشن، پس ol درسته.

ویژگی‌های تگ ol

تگ ol چند ویژگی خاص هم داره که ul نداره:

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

ویژگی start مشخص می‌کنه شماره‌گذاری از کدوم عدد شروع بشه؛ تو این مثال، شماره‌گذاری از ۵ شروع می‌شه، نه از ۱.

<ol reversed>
  <li>سوم</li>
  <li>دوم</li>
  <li>اول</li>
</ol>

ویژگی reversed باعث می‌شه شماره‌گذاری به‌صورت نزولی نمایش داده بشه (مثلاً از ۳ به ۱)، در حالی که ترتیب فیزیکی نوشتن آیتم‌ها تو کد همچنان از بالا به پایینه.

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

ویژگی type نوع نمادِ شماره‌گذاری رو تغییر می‌ده. مقادیر رایج شامل 1 (عدد، پیش‌فرض)، A (حروف بزرگ انگلیسی)، a (حروف کوچک انگلیسی)، I (اعداد رومی بزرگ) و i (اعداد رومی کوچک) هستن.

لیست‌های تودرتو (Nested Lists)

<ul>
  <li>میوه‌ها
    <ul>
      <li>سیب</li>
      <li>موز</li>
    </ul>
  </li>
  <li>سبزیجات
    <ul>
      <li>هویج</li>
      <li>کاهو</li>
    </ul>
  </li>
</ul>

یه نکته‌ی مهم درباره‌ی لیست‌های تودرتو اینه که لیست داخلی (ul یا ol دوم) باید داخل تگ li والدش قرار بگیره، نه بیرون از اون. تو این مثال، لیست میوه‌ها داخل همون li که کلمه‌ی «میوه‌ها» رو داره نوشته شده. این ساختار باعث می‌شه مرورگر و صفحه‌خوان درست بفهمن که سیب و موز زیرمجموعه‌ی میوه‌ها هستن.

خروجی لیست تودرتو چیه؟

اگه این کد رو تو مرورگر باز کنی، «میوه‌ها» و «سبزیجات» با یه گلوله‌ی معمولی نمایش داده می‌شن، و زیرشون، «سیب»، «موز»، «هویج» و «کاهو» با یه تورفتگی بیشتر و معمولاً با شکل گلوله‌ی متفاوت (مثلاً یه دایره‌ی توخالی به‌جای توپر) نشون داده می‌شن؛ این تغییر شکل گلوله برای این هست که سطح تودرتویی رو از نظر بصری هم مشخص کنه.

محدودیت مهم: چه چیزی مستقیماً داخل ul یا ol مجازه؟

طبق استاندارد HTML5، تنها فرزند مستقیم مجاز برای ul و ol، تگ li هست. یعنی نمی‌شه مستقیم یه p یا div رو بین ul و li گذاشت:

<!-- اشتباه -->
<ul>
  <p>این اشتباه است</p>
  <li>آیتم اول</li>
</ul>

چند اشتباه رایج

• استفاده از ol برای فهرست‌هایی که ترتیبشون اهمیتی نداره (مثل لیست خرید).
• گذاشتن لیست تودرتو بیرون از تگ li والد، به‌جای داخل اون.
• استفاده از شماره یا خط تیره‌ی دستی داخل متن li به‌جای اعتماد به شماره‌گذاری خودکار مرورگر، مثلاً نوشتن <li>۱. سیب‌زمینی</li>.
• قراردادن تگ‌هایی غیر از li مستقیماً داخل ul یا ol.

بهترین روش‌ها

• همیشه بین ul (وقتی ترتیب مهم نیست) و ol (وقتی ترتیب مهمه) بر اساس معنای واقعی محتوا انتخاب کن.
• هیچ‌وقت شماره یا گلوله رو دستی داخل متن li ننویس؛ بذار مرورگر خودش این کار رو انجام بده.
• لیست‌های تودرتو رو همیشه داخل تگ li والد بنویس.

نکته‌ی سئو

فهرست‌بندی محتوا با ul و ol خوانایی صفحه را برای کاربر و همچنین برای موتورهای جستجو بهبود می‌دهد؛ گوگل معمولاً به ساختار منظم لیست‌ها توجه دارد و گاهی محتوای این فهرست‌ها را به‌صورت مستقیم در نتایج جستجو (مثل قطعه‌ی برجسته یا Featured Snippet) نمایش می‌دهد.

نکته‌ی دسترسی‌پذیری

صفحه‌خوان‌ها هنگام رسیدن به یک لیست، معمولاً تعداد آیتم‌ها را هم اعلام می‌کنند (مثلاً «فهرستی با سه مورد»)، که به کاربر کم‌بینا کمک می‌کند حجم و ساختار محتوا را از قبل درک کند. این قابلیت فقط زمانی درست کار می‌کند که از تگ‌های استاندارد ul، ol و li استفاده شده باشد، نه شبیه‌سازی دستی لیست با p و br.

جمع‌بندی

تگ ul برای فهرست‌های نامرتب و تگ ol برای فهرست‌های مرتب استفاده می‌شود، و هر دو باید فرزندانشان را در قالب تگ li داشته باشند. انتخاب صحیح بین این دو بر اساس معنای واقعی محتوا (اهمیت‌داشتن یا نداشتن ترتیب) صورت می‌گیرد و لیست‌های تودرتو باید همیشه داخل تگ li والد نوشته شوند.