جلسه هفتم: لیست‌ها در HTML

با استفاده از لیست‌ها در HTML، می‌توانید اطلاعات را به صورت ساختارمند و قابل فهم برای کاربرانتان ارائه دهید. در این مقاله، به بهترین روش‌های استفاده از لیست‌ها در HTML می‌پردازیم و با مثال‌های کاربردی هر نوع لیست آشنا می‌شویم.

انواع لیست‌ها در HTML

هر نوع لیست در HTML با تگ‌های مخصوص خود تعریف می‌شود، به‌طوری‌که ol برای لیست‌های مرتب، ul برای لیست‌های نامرتب، و dl برای لیست‌های توضیحی استفاده می‌شود.

لیست‌های مرتب (Ordered Lists)

لیست‌های مرتب برای نمایش عناصر به ترتیب خاصی از اعداد یا حروف استفاده می‌شوند. برای ساخت یک لیست مرتب در HTML از تگ <ol> استفاده می‌کنیم و هر عنصر لیست با تگ <li> تعیین می‌شود.

مثال:

<ol>
 <li> آیتم اول </li>
 <li> آیتم دوم </li>
 <li> آیتم سوم </li>
</ol>

نتیجه کد بالا به این صورت نمایش داده می‌شود

اتریبیوت start در لیست‌های مرتب

با استفاده از این اتریبیوت، می‌توانید شماره‌گذاری لیست را از عدد دلخواهی شروع کنید. این مفید است زمانی که می‌خواهید شماره‌گذاری لیست را از عددی غیر از یک شروع کنید.

<ol start="3">
 <li> آیتم اول </li>
 <li> آیتم دوم </li>
 <li> آیتم سوم </li>
</ol>

نتیجه کد بالا به این صورت نمایش داده می‌شود

همانطور که مشاهده می‌کنید با استفاده از اتریبیوت start ترتیب اعداد از شماره 3 آغاز شد و ادامه پیدا کرد.

همچنین می‌توانید یک عنصر خاص از لیست را به یک عدد خاص تنظیم کنید. عناصر لیست بعد از عنصری با مقدار مشخص شده، از آن مقدار به بالا ادامه می‌یابند و از مکانی که لیست والد در آن بود، چشم‌پوشی می‌شود.

مثال:

<ol>
 <li> آیتم اول </li>
 <li value="5"> آیتم دوم </li>
 <li> آیتم سوم </li>
</ol>

نتیجه کد بالا به این صورت نمایش داده می‌شود

اتریبیوت reversed در لیست‌های مرتب

این اتریبیوت به شما امکان می‌دهد تا ترتیب شماره‌گذاری لیست را برعکس کنید، به این معنا که عناصر لیست از انتها به ابتدا شماره‌گذاری می‌شوند.

مثال:

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

نتیجه کد بالا به این صورت نمایش داده می‌شود

اتریبیوت type در لیست‌های مرتب

با استفاده از این اتریبیوت، می‌توانید نوع شماره‌گذاری لیست را تعیین کنید. این اتریبیوت مقادیری مانند “1” (شماره‌گذاری اعداد به صورت اعداد عادی)، “a” (شماره‌گذاری به صورت حروف الفبا)، “A” (شماره‌گذاری به صورت حروف الفبای بزرگ) و “i” (شماره‌گذاری به صورت اعداد رومی کوچک) را قبول می‌کند.

مثال:

<ol type="a">
  <li>آیتم اول</li>
  <li>آیتم دوم</li>
  <li>آیتم سوم</li>
</ol>

در این مثال نوع تایپ را حروف کوچک قرار دادیم که نتیجه کد بالا به این صورت نمایش داده می‌شود، می‌توانید به عنوان تمرین نمونه‌های دیگر تایپ را خودتان تمرین کنید.

لیست‌های نامرتب (Unordered Lists)

در لیست‌های نامرتب، عناصر بدون ترتیب خاصی نمایش داده می‌شوند و معمولاً به جای اعداد یا حروف از نمادهایی مانند دایره‌ها یا مربع‌ها نمایش داده می‌شوند. برای ساخت یک لیست نامرتب در HTML از تگ <ul> استفاده می‌کنیم و هر عنصر لیست با تگ <li> مشخص می‌شود.

مثال:

<ul>
  <li>آیتم اول</li>
  <li>آیتم دوم</li>
  <li>آیتم سوم</li>
</ul>

نتیجه کد بالا به این صورت نمایش داده می‌شود

لیست‌های توضیحی (Description Lists)

لیست‌های توضیحی برای نمایش عناصر همراه با توضیحات کوتاه استفاده می‌شوند. برای ساخت یک لیست توضیحی در HTML از تگ <dl> استفاده می‌کنیم در این نوع لیست، هر عنصر با تگ <dt> برای عنوان و همراه با تگ <dd> برای توضیح نمایش داده می‌شود.

مثال:

<dl>
  <dt>عنوان اول</dt>
  <dd>توضیح عنوان اول</dd>
  <dt>عنوان دوم</dt>
  <dd>توضیح عنوان دوم</dd>
</dl>

چند نکته مهم

می‌توانید لیست‌ها را به صورت تودرتو نیز استفاده کنید تا زیرآیتم‌های یک عنصر لیست را نمایش دهید.

<ul>
  <li> آیتم اول </li>
  <li> آیتم دوم 
   <ul>
    <li> زیر آیتم اول </li>
    <li> زیر آیتم دوم </li>
    <li> زیر آیتم سوم </li>
  </ul>
 </li>
 <li> آیتم سوم </li>
</ul>

در مثال بالا از لیست‌های تودرتو استفاده شده، بسته به نیاز شما می‌توانید هر نوع لیستی را در لیست‌های تودرتو انتخاب کنید.

در تگ‌های لیست نمی‌توانید به صورت مستقیم از تگ دیگری استفاده کنید مثلا نمی‌توانید از تگ a داخل تگ ul استفاده کنید ولی در تگ های عنصر آنها می‌توانید بنا به نیاز خود استفاه کنید. مثلا می‌توانید از تگ a داخل تگ li استقاده کنید.

شهرام نجفی

همیشه آرزو داشتم که هنگام جستجوی اطلاعات، به سراغ یک منبع جامع و به روز برم، اما اینکه چنین منابعی را بیابم همیشه چالش بوده است. برای همین ایده راه اندازی سایت آوای وب به ذهنم رسید و الان در خدمت شما هستم.