قسمت ۱۱ – لیست‌ها در HTML؛ ul، ol و dl

لیست در html با سه المان اصلی ساخته می‌شود: <ul> برای لیست نامرتب (ترتیب مهم نیست)، <ol> برای لیست مرتب (ترتیب مهم است) و <dl> برای لیست توضیحی (اصطلاح و توضیح). هر آیتم در ul و ol داخل یک تگ <li> قرار می‌گیرد.

نویسنده: تیم siloow (سیلو سولوشن) — آخرین به‌روزرسانی: آبان ۱۴۰۵

در این قسمت یاد می‌گیرید کی از تگ ul در html و کی از تگ ol استفاده کنید، اتریبیوت‌های start، reversed و type چه می‌کنند، لیست تو در تو را بدون خطا بسازید، با dl واژه‌نامه و جدول مشخصات بنویسید و شماره‌گذاری فارسی (۱، ۲، ۳) را با CSS فعال کنید. قسمت قبل، قسمت ۱۰: تصاویر ریسپانسیو با picture، srcset و lazy loading بود.

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

لیست در html گروهی از آیتم‌های مرتبط است که مرورگر و صفحه‌خوان آن را به‌عنوان یک مجموعه می‌شناسند؛ صفحه‌خوان مثلاً اعلام می‌کند «لیست با ۵ آیتم». HTML سه نوع لیست دارد: نامرتب (ul)، مرتب (ol) و توضیحی (dl).

شاید وسوسه شوید آیتم‌ها را با خط تیره و <br> در یک پاراگراف بنویسید؛ ظاهر شبیه است، اما معنا از بین می‌رود. لیست واقعی برای کاربران صفحه‌خوان قابل پیمایش است، تعداد آیتم‌ها را اعلام می‌کند و موتورهای جستجو هم گاهی لیست‌های مرتب را مستقیم در نتایج (مثل Featured Snippet) نمایش می‌دهند. به همین دلیل در چک‌لیست سئو داخلی هم استفاده از لیست‌های واقعی برای مراحل و ویژگی‌ها توصیه شده است.

تگ ul در html چه زمانی استفاده می‌شود؟

تگ ul در html (Unordered List) برای آیتم‌هایی است که ترتیبشان معنا را عوض نمی‌کند؛ مثل فهرست امکانات، مواد لازم یا لینک‌های منو. مرورگر به‌طور پیش‌فرض کنار هر آیتم یک دایره توپر (bullet) نمایش می‌دهد.

<h2>امکانات قالب فروشگاهی</h2>
<ul>
  <li>سبد خرید سریع</li>
  <li>فیلتر محصولات بر اساس قیمت</li>
  <li>پرداخت با درگاه بانکی</li>
</ul>

در صفحه‌ای با dir="rtl"، علامت‌های لیست و تورفتگی به‌طور خودکار سمت راست قرار می‌گیرند. دلیلش این است که مرورگر برای تورفتگی لیست از خاصیت منطقی padding-inline-start استفاده می‌کند که در صفحه راست‌چین یعنی سمت راست. این رفتار را در قسمت ۳ (ساختار HTML و راست‌چین کردن) با تنظیم dir فعال کرده بودیم.

تگ ol و اتریبیوت‌های آن چه کاری می‌کنند؟

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

<h2>مراحل ثبت سفارش</h2>
<ol>
  <li>محصول را به سبد خرید اضافه کنید.</li>
  <li>آدرس و زمان تحویل را وارد کنید.</li>
  <li>پرداخت را انجام دهید.</li>
</ol>

یک آزمون ساده برای انتخاب بین ul و ol: اگر جای دو آیتم را عوض کنید، آیا معنا تغییر می‌کند؟ اگر بله، ol؛ اگر نه، ul.

start، reversed و value

طبق مستندات MDN درباره تگ ol، اتریبیوت start عدد شروع شمارش را تعیین می‌کند، reversed شمارش را معکوس می‌کند و اتریبیوت value روی یک li شماره همان آیتم را به‌طور دستی تنظیم می‌کند و آیتم‌های بعدی از آن ادامه می‌دهند:

<!-- شروع از ۴ (ادامه یک لیست قبلی) -->
<ol start="4">
  <li>بسته‌بندی سفارش</li>
  <li>ارسال با پیک</li>
</ol>

<!-- شمارش معکوس: ۳، ۲، ۱ -->
<ol reversed>
  <li>رتبه سوم</li>
  <li>رتبه دوم</li>
  <li>رتبه اول</li>
</ol>

<!-- مقدار دستی برای یک آیتم -->
<ol>
  <li>مقدمه</li>
  <li value="10">فصل دهم</li>
  <li>فصل یازدهم</li>
</ol>

اتریبیوت type هم سبک شماره‌گذاری را تعیین می‌کند (1، a، A، i، I). MDN توصیه می‌کند برای تغییر ظاهر شماره‌ها از CSS استفاده کنید و type را فقط وقتی بنویسید که نوع شماره بخشی از معنای محتواست؛ مثلاً در یک متن حقوقی که به «بند ب» ارجاع داده می‌شود.

تگ / اتریبیوت	روی	کار	مثال
<ul>	–	لیست نامرتب	امکانات، مواد لازم، منو
<ol>	–	لیست مرتب	مراحل، رتبه‌بندی
<li>	ul و ol	یک آیتم لیست	تنها فرزند مجاز ul و ol
start	ol	عدد شروع شمارش	start="4"
reversed	ol	شمارش معکوس	رتبه‌بندی از آخر به اول
type	ol و li	نوع شماره	1، a، A، i، I
value	li داخل ol	شماره دستی همان آیتم	value="10"
<dl>	–	لیست توضیحی	واژه‌نامه، مشخصات
<dt> / <dd>	dl	اصطلاح / توضیح	نام ویژگی / مقدار

لیست تو در تو چطور ساخته می‌شود؟

لیست تو در تو (Nested List) یعنی یک لیست کامل داخل یک آیتم لیست دیگر؛ لیست فرزند باید داخل یک <li> قرار بگیرد، نه مستقیم داخل ul یا ol. این ساختار برای منوهای چندسطحی، فهرست مطالب و دسته‌بندی‌ها کاربرد دارد.

<ul>
  <li>نوشیدنی‌های گرم
    <ul>
      <li>اسپرسو</li>
      <li>لاته</li>
    </ul>
  </li>
  <li>نوشیدنی‌های سرد
    <ul>
      <li>آیس‌لاته</li>
      <li>لیموناد</li>
    </ul>
  </li>
</ul>

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

اشتباه رایج در ساختار لیست

تنها فرزند مستقیم مجاز ul و ol، تگ li است (به‌علاوه script و template). پس متن آزاد، پاراگراف یا یک ul دیگر نباید مستقیم داخل ul قرار بگیرد؛ مرورگر آن را نمایش می‌دهد، اما HTML نامعتبر است و صفحه‌خوان تعداد آیتم‌ها را اشتباه اعلام می‌کند:

<!-- اشتباه: ul مستقیم داخل ul -->
<ul>
  <li>نوشیدنی‌های گرم</li>
  <ul>
    <li>اسپرسو</li>
  </ul>
</ul>

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

نکته: داخل li می‌توانید تقریباً هر محتوایی بگذارید؛ پاراگراف، تصویر، لینک، تیتر یا حتی یک لیست دیگر. محدودیت فقط روی فرزندان مستقیم ul و ol است، نه روی محتوای li.

لیست توضیحی dl برای چه کاری است؟

لیست توضیحی dl گروه‌هایی از اصطلاح (<dt>) و توضیح (<dd>) را نمایش می‌دهد؛ مثل واژه‌نامه، سوال و جواب کوتاه، یا مشخصات یک محصول به‌صورت «ویژگی: مقدار». مرورگر به‌طور پیش‌فرض dd را با تورفتگی زیر dt نمایش می‌دهد.

<dl>
  <dt>HTML</dt>
  <dd>زبان نشانه‌گذاری برای ساختار و معنای محتوای صفحه.</dd>

  <dt>CSS</dt>
  <dd>زبان استایل‌دهی برای ظاهر و چیدمان صفحه.</dd>

  <dt>زمان آماده‌سازی</dt>
  <dd>۱۵ دقیقه</dd>
</dl>

طبق مستندات MDN درباره dl، یک dt می‌تواند چند dd داشته باشد و چند dt هم می‌توانند یک dd مشترک داشته باشند. برای استایل‌دهی راحت‌تر، استاندارد زنده HTML اجازه می‌دهد هر گروه dt و dd را داخل یک <div> قرار دهید؛ اما در یک dl یا همه گروه‌ها را با div بپوشانید یا هیچ‌کدام را.

شماره گذاری فارسی در لیست ol چطور انجام می‌شود؟

برای شماره‌گذاری با رقم‌های فارسی (۱، ۲، ۳) در یک ol، از خاصیت CSS list-style-type: persian استفاده کنید. این مقدار در فهرست مقدارهای رسمی list-style-type در MDN آمده است.

ol.fa {
  list-style-type: persian;
}

ul.check {
  list-style-type: "✓ ";
}

ul, ol {
  padding-inline-start: 1.5rem;
}

در مثال بالا سه کار انجام داده‌ایم: شماره‌گذاری فارسی برای ol، علامت سفارشی تیک برای یک ul (مقدار رشته‌ای در list-style-type) و تنظیم تورفتگی با خاصیت منطقی padding-inline-start که در صفحه راست‌چین سمت راست است. پشتیبانی مقدارهای خاص مثل persian را قبل از استفاده در جدول سازگاری MDN بررسی کنید؛ اگر مرورگری آن را نشناسد، به شماره‌گذاری عادی برمی‌گردد و محتوا آسیبی نمی‌بیند. استایل‌دهی کامل لیست‌ها را در بخش CSS دوره می‌بینید.

مقدار list-style-type	نمایش	کاربرد
disc	دایره توپر	پیش‌فرض ul
circle / square	دایره توخالی / مربع	سطح‌های دوم و سوم لیست تو در تو
decimal	۱، ۲، ۳	پیش‌فرض ol
persian	۱، ۲، ۳	لیست مرتب در محتوای فارسی
arabic-indic	۱، ۲، ۳	محتوای عربی
"✓ "	رشته دلخواه	علامت سفارشی
none	بدون علامت	منوها و کارت‌ها

منوی سایت چرا با لیست ساخته می‌شود؟

منوی ناوبری سایت معمولاً با یک ul داخل تگ <nav> ساخته می‌شود، چون منو در واقع فهرستی از لینک‌هاست و صفحه‌خوان تعداد آیتم‌های منو را به کاربر اعلام می‌کند. ظاهر افقی و حذف bullet کار CSS است.

<nav aria-label="منوی اصلی">
  <ul class="menu" role="list">
    <li><a href="/">خانه</a></li>
    <li><a href="/services/">خدمات</a></li>
    <li><a href="/codepress/">کدپرس</a></li>
  </ul>
</nav>
<style>
  .menu { list-style: none; padding: 0; display: flex; gap: 1rem; }
</style>

یک نکته کمتر شناخته‌شده: در برخی نسخه‌های Safari، وقتی list-style: none روی لیست بگذارید، VoiceOver ممکن است دیگر آن را لیست اعلام نکند. به همین دلیل در مثال بالا role="list" را صریحاً اضافه کرده‌ایم؛ این کار ضرری ندارد و معنای لیست را حفظ می‌کند. ساختار کامل nav را در قسمت ۱۸ (تگ‌های معنایی) می‌بینید.

از تجربه تیم siloow: لیست‌ها در منو و جدول مشخصات

در قالب‌های فروشگاهی و آموزشی (LMS) که تیم siloow ساخته است، دو جا بیشترین استفاده از لیست را داریم: منوهای چندسطحی و بخش «مشخصات محصول» یا «سرفصل‌های دوره». در نسخه‌های اولیه، مشخصات محصول با div‌های پشت سر هم ساخته شده بود و هیچ معنایی برای صفحه‌خوان نداشت. وقتی آن را به dl با جفت‌های dt و dd تبدیل کردیم، هم کد کوتاه‌تر شد و هم ساختار «ویژگی: مقدار» برای ابزارهای کمکی قابل فهم شد. در سرفصل‌های دوره هم از ol تو در تو استفاده می‌کنیم، چون ترتیب جلسه‌ها معنا دارد. تجربه ما این است که انتخاب درست نوع لیست، بعداً استایل‌دهی و نگهداری را هم ساده‌تر می‌کند.

اشتباهات رایج در ساخت لیست در html

• نوشتن آیتم‌ها با خط تیره و br به‌جای لیست واقعی.
• استفاده از ul برای مراحلی که ترتیبشان مهم است.
• قرار دادن ul یا متن آزاد مستقیم داخل ul به‌جای داخل li.
• تایپ دستی شماره‌ها داخل li (مثل «۱.») در حالی که ol خودش شماره می‌گذارد.
• استفاده از dl برای هر جفت متنی که رابطه اصطلاح و توضیح ندارد.
• تنظیم تورفتگی با padding-left در صفحه راست‌چین به‌جای padding-inline-start.

تمرین این قسمت

1. فهرست مواد لازم یک کیک را با ul و مراحل پخت آن را با ol بنویسید.
2. یک منوی دوسطحی برای یک کافه (نوشیدنی گرم، نوشیدنی سرد، کیک) با لیست تو در تو بسازید.
3. مشخصات یک گوشی (برند، حافظه، رنگ، وزن) را با dl نمایش دهید.
4. یک لیست «۵ کتاب برتر سال» با ol reversed بسازید که از ۵ تا ۱ شمارش کند.
5. با CSS شماره‌گذاری فارسی را روی ol فعال کنید و نتیجه را در دو مرورگر مقایسه کنید.

جمع‌بندی و خلاصه

• لیست در html سه نوع دارد: ul نامرتب، ol مرتب و dl توضیحی.
• تگ ul در html برای آیتم‌های بدون ترتیب و ol برای مراحل و رتبه‌بندی است.
• تنها فرزند مستقیم ul و ol تگ li است و لیست تو در تو داخل li قرار می‌گیرد.
• start، reversed و value شماره‌گذاری ol را کنترل می‌کنند.
• شماره‌گذاری فارسی با list-style-type: persian در CSS فعال می‌شود.

فهرست همه قسمت‌ها در صفحه کدپرس است. اگر می‌خواهید ببینید یک سایت حرفه‌ای از نظر ساختار محتوا چه ویژگی‌هایی دارد، ۲۰ معیار طراحی سایت حرفه‌ای را بخوانید. در قسمت بعد، «قسمت ۱۲ – ساخت جدول در HTML»، داده‌های چندستونی را با table نمایش می‌دهیم.

منابع

• MDN: The Ordered List element (ol)
• MDN: The Description List element (dl)
• MDN: list-style-type
• WHATWG HTML Living Standard: Grouping content

سوالات متداول درباره لیست در html