لیست ها در زبان HTML

با سلام و عرض ادب خدمت شما همراهان گرامی روکسو، در این قسمت قصد داریم در رابطه با انواع لیست ها (Unordered List و Ordered List و ...) در زبان HTML صحبت کنیم. بیایید بدون مقدمه به سراغ اصل مطلب برویم.

لیست های غیر ترتیبی

لیست های غیر ترتیبی (در انگلیسی: unordered list) با استفاده از تگ <ul> مشخص شده و سپس درون این تگ از تگ های <li> برای مشخص کردن هر گزینه استفاده می کنیم. در حالت پیش فرض این نوع از لیست ها با bullet مشخص می شوند. bullet در لغت به معنی «گلوله» است اما منظور از آن در لیست ها همان دایره های سیاه رنگ کنار هر گزینه هستند.

در لیست های غیر ترتیبی (همانطور که از نامشان مشخص است) ترتیب گزینه ها اهمیتی ندارد. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<body>

<h2>An unordered HTML list</h2>

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

</body>
</html>

مشاهده ی خروجی در JSBin

دایره های سیاه کنار هر مورد را به سادگی می توان دید. همچنین به راحتی متوجه می شویم که بین Coffee (قهوه)، Tea (چای) و Milk (شیر) ترتیبی وجود ندارد؛ چه شیر را اول بیاوریم و چه قهوه را، هیچ تفاوتی به حال ما و یا بحث اصلی ندارد (قبل از نتیجه گیری، قسمت لیست های ترتیبی را نیز ببینید).

سوال: چطور می توانیم شکل bullet ها را تغییر دهیم؟

پاسخ: همانطور که دیگر اجزای HTML را تغییر می دهیم! با استفاده از CSS. به جدول زیر نگاه کنید:

مقدار	توضیحات
disc	این حالت همان bullet های پیش فرض و سیاه رنگ است
circle	این حالت دایره ها را به صورت توخالی نمایش می دهد
square	این حالت به جای دایره از مربع استفاده می کند
none	در این حالت، موارد یک لیست بدون شکل خواهند بود

بیایید تک تک این موارد را بررسی کنیم.

حالت اول: تنظیم روی مقدار disc

<!DOCTYPE html>
<html>
<body>

<h2>Unordered List with Disc Bullets</h2>

<ul style="list-style-type:disc;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

</body>
</html>

مشاهده ی خروجی در JSBin

حالت دوم: تنظیم روی مقدار Circle

<!DOCTYPE html>
<html>
<body>

<h2>Unordered List with Disc Bullets</h2>

<ul style="list-style-type:disc;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

</body>
</html>

مشاهده ی خروجی در JSBin

حالت سوم: تنظیم روی مقدار Square

<!DOCTYPE html>
<html>
<body>

<h2>Unordered List with Square Bullets</h2>

<ul style="list-style-type:square;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>

مشاهده ی خروجی در JSBin

حالت چهارم: تنظیم روی مقدار none

<!DOCTYPE html>
<html>
<body>

<h2>Unordered List without Bullets</h2>

<ul style="list-style-type:none;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

</body>
</html>

مشاهده ی خروجی در JSBin

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

لیست های ترتیبی (به انگلیسی: ordered list) با تگ <ol> مشخص می شود و برای اضافه کردن هر مورد جدید به لیست باید از همان <li> استفاده کنید. در این نوع از لیست ها، ترتیب اهمیت دارد.

به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<body>

<h2>An ordered HTML list</h2>

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

</body>
</html>

مشاهده ی خروجی در JSBin

سوال: مگر در قسمت قبل همین مثال را به صورت غیر ترتیبی نیاوردیم و نگفتیم که ترتیب موارد آن اهمیتی ندارد؟

پاسخ: بله! در واقع اهمیت داشتن یا نداشتن ترتیب به دو مورد اصلی بستگی دارد:

سلیقه ی شما به عنوان نویسنده
زمینه و موضوع بحث

از نظر زمینه و موضوع بحث: بگذارید با مثال برایتان توضیح دهم؛ اگر بحث شما در مورد مقدار پروتئین و میزان کالری شیر، قهوه و چای باشد، ترتیب اهمیت پیدا می کند! تصور کنید می خواهید لیستی به مخاطب ارائه کنید که در آن نوشیدنی ها بر اساس میزان کالری شان لیست شده اند. در این حالت ترتیب اهمیت دارد اما زمانی که می خواهید چند مورد از نوشیدنی های محبوب جهان را نام ببرید آیا باز هم مهم است کدام را اول بیاوریم؟ خیر!

از نظر سلیقه ی نویسنده: سلیقه ی شما ممکن است چنین چیزی را قبول نکند! به طور مثال برای شما (به هر دلیل شخصی که دارید) مهم است ابتدا شیر بیاید یا قهوه یا چای! در این حالت این لیست تغییر می کند. مسئله ی عکس آن نیز صادق است.

بنابراین می توان به عنوان قانونی کلی گفت: زیاد در مورد جزئیات لیست ها، فنی رفتار نکنید چرا که تعیین ترتیب داشتن یا نداشتن موارد یک لیست به این سادگی ها نیست. علاوه بر آن اهمیت آنچنانی نیز ندارد و مسئله ای بین شما و کاربرانتان محسوب می شود.

لیست های ترتیبی انواع مختلفی دارند. به جدول زیر نگاه کنید:

نوع	توضیحات
type="1"	موارد لیست با عدد شماره گذاری می شوند (حالت پیش فرض)
type="A"	موارد لیست با حروف بزرگ انگلیسی علامت گذاری می شوند (A و B و C و ...)
type="a"	موارد لیست با حروف کوچک انگلیسی علامت گذاری می شوند (a و b و c و ...)
type="I"	موارد لیست با اعداد بزرگ رومی علامت گذاری می شوند (I و II و III و ...)
type="i"	موارد لیست با اعداد کوچک رومی علامت گذاری می شوند (i و ii و iii و ...)

بیایید هر کدام را بررسی کنیم:

حالت اول: تنظیم روی مقدار Numbers

<!DOCTYPE html>
<html>
<body>

<h2>Unordered List without Bullets</h2>

<ul style="list-style-type:none;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

</body>
</html>

مشاهده ی خروجی در JSBin

حالت دوم: تنظیم روی حروف بزرگ

<!DOCTYPE html>
<html>
<body>

<h2>Ordered List with Letters</h2>

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  

</body>
</html>

مشاهده ی خروجی در JSBin

حالت سوم: تنظیم روی حروف کوچک

<!DOCTYPE html>
<html>
<body>

<h2>Ordered List with Lowercase Letters</h2>

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  

</body>
</html>

مشاهده ی خروجی در JSBin

حالت چهارم: تنظیم روی حروف رومی بزرگ

<!DOCTYPE html>
<html>
<body>

<h2>Ordered List with Roman Numbers</h2>

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  

</body>
</html>

مشاهده ی خروجی در JSBin

حالت پنجم: تنظیم روی حروف رومی کوچک

<!DOCTYPE html>
<html>
<body>

<h2>Ordered List with Lowercase Roman Numbers</h2>

<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  

</body>
</html>

مشاهده ی خروجی در JSBin

سوال: اگر بخواهیم شمارش لیست از عدد خاصی شروع شود باید چه کار کنیم؟

پاسخ: برای این کار از attribute ای به نام start شروع می کنیم. به طور مثال کد زیر را طوری نوشته ایم که شمارش در آن ها از عدد 50 شروع شود:

<!DOCTYPE html>
<html>
<body>

<h2>The start attribute</h2>
<p>شمارش به صورت پیش فرض از عدد 1 شروع می شود اما میتوانیم کاری کنیم که شمارش از عدد دلخواه ما شروع شود:</p>

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol type="I" start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

</body>
</html>

مشاهده ی خروجی در JSBin

لیست توضیحات

انواع دیگری از لیست ها در زبان HTML لیست های توضیحات (به انگلیسی: description list) هستند. این لیست ها مجموعه ای از اصطلاحات هستند که به صورت جداگانه توضیح داده شده اند.

این نوع از لیست ها با تگ <dl> تعریف شده و برای اضافه کردن هر مورد به آن باید از تگ های زیر استفاده کرد:

تگ های <dt> اصطلاح را مشخص می کنند.
تگ های <dd> نیز شامل تعریف فنی آن هستند.

به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<body>

<h2>A Description List</h2>

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

</body>
</html>

مشاهده ی خروجی در JSBin

نکته: شما می توانید لیست های HTML را به صورت تو در تو (nested) بنویسید:

<!DOCTYPE html>
<html>
<body>

<h2>A Nested List</h2>
<p>List can be nested (lists inside lists):</p>

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>

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

شاید بخواهید بدانید که ایجاد لیست های افقی مانند navigation menu (منو های بالای سایت) چطور انجام می شود. این مورد بر عهده ی HTML نیست بلکه توسط CSS انجام می شود بنابراین در دوره آموزش رایگان CSS (مقدماتی تا پیشرفته) با آن آشنا خواهید شد.

امیدوارم از این قسمت لذت برده باشید.