وبلاگ

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

انواع فهرست

لیست‌ها بر سه دسته طبقه‌بندی می‌شوند :

• لیست‌های شمارشی (ترتیبی) : فهرستی از مطالب و محتواست که با روشی مثل شماره‌گذاری یا با حروف، اجزای آن دسته‌بندی و مرتب شده‌اند.
• لیست‌های غیر شمارشی (غیر ترتیبی) : این لیست‌ها حاوی محتوایی است که بدون در نظر گرفتن شمارنده یا حروف، به صورت مرتب و دسته‌بندی شده تعریف شده است.
• لیست‌های توصیفی : نوعی از فهرست‌های غیر شمارشی هستند با این تفاوت که می‌توان برای هر آیتم از لیست، یک عنوان تعریف کرده و برای هر عنوان نیز، زیرمجموعه توصیفی تعریف کرد.

برای ایجاد هر کدام از موارد بالا تگ‌های فهرست مناسب وجود دارد که شرح داده می‌شود :

لیست‌های شمارشی (Ordered List)

تگ ol

این برچسب، به طور پیش‌فرض لیستی با اعداد نمایش ایجاد می‌کند و در مقابل هر آیتم فهرست عددی قرار می‌گیرد. اولین مقدار شمارنده عدد یک است و به صورت افزایشی ادامه می‌یابد. پس نیازی نیست شما عددی تعریف کنید.

هر چند می‌توان اولین مقدار شمارنده و نوع ردیف‌گذاری این فهرست را تغییر داد. مثلا به جای عدد صحیح، از اعداد رومی، حروف و … استفاده کرد.

این برچسب به صورت زوج است و آیتم‌ها داخل تگ آغاز و پایان نوشته می‌شوند.

تگ li

از این تگ برای درج آیتم‌های لیست چه در نوع شمارشی و چه نوع غیر شمارشی استفاده می‌شود. هر آیتم درون تگ آغاز و پایان li نوشته می‌شود.

<ol>
  <li>Item #1</li>
  <li>Item #2</li>
  <li>Item #3</li>
</ol>

برای اینکه بخواهیم حالت شمارنده را از اعداد صحیح به حروف یا اعداد رومی تبدیل کنیم از صفت type استفاده می‌کنیم. این صفت به طور پیش‌فرض عدد 1 دریافت می‌کند که همان لیست با شمارنده عدد صحیح است. اما می‌تواند این مقادیر را هم دریافت کند :

نکته : برای دریافت اطلاعات در خصوص صفت‌ها این مقاله‌ها را بخوانید.

صفت دیگری که این تگ قبول می‌کند صفت start است که آغاز شمارنده را تعریف می‌کند و به صورت پیش‌فرض 1 است. با تغییر آن به اعداد دیگر، شمارنده از آن رقم شروع به افزایش می‌نماید.

<ol start="5" type="A">
  <li>Item #1</li>
  <li>Item #2</li>
  <li>Item #3</li>
</ol>

لیست‌های غیر شمارشی (Unorderd List)

تگ ul

این تگ یک لیست غیر شمارشی تعریف می‌کند. در این حالت، به جای درج اعداد شمارشی پیش از هر آیتم فهرست، از توپ‌های کوچکی که به آنها Bullet می‌گویند استفاده می‌شود. همانند تگ ol، برای تعریف هر آیتم باید از تگ li استفاده کرد.

<ul>
  <li>Item #1</li>
  <li>Item #2</li>
  <li>Item #3</li>
</ul>

برای این نوع از فهرست هم صفت type تعریف می‌شود. با این تفاوت که نحوه نمایش Bullet هر آیتم را تغییر می‌دهد. جدول زیر مقادیر قابل قبول این صفت را بیان کرده است :

نکته : در هر دو نوع فهرست بالا، برای اینکه بتوانیم تنوع بیشتری از شمارنده‌ها یا Bullet را داشته باشیم بهتر است از تنظیمات CSS استفاده کنیم.

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

<ol start="5" type="A">
  <li>
    <ol>
      <li>Item #1 - Subitem #1</li>
      <li>Item #1 - Subitem #2</li>
    </ol>
  </li>
  <li>Item #2</li>
</ol>

لیست‌های توصیفی (Description List)

تگ dl

نوع دیگری از تگ‌های فهرست است و برای تعریف یک لیست توصیفی، می‌توان از این تگ استفاده کرد. این تگ به صورت عادی، دارای دو سطح است. سطح اول که یک عنوان را در خود دارد و سطح دوم که توصیفی برای عنوان سطح اول را می‌تواند داشته باشد. برای هر آیتم سطح اول (عنوان) باید از تگ dt استفاده کرد و برای هر زیرمجموعه (سطح دوم) که توصیفی از عنوان است از تگ dd باید بهره برد.

تگ dt به معنای Description List Title و dd به معنای Description List Descibe است.

<dl>
  <dt>Title #1</dt>
  <dd>Description of Title #1</dd>
  <dt>Title #2</dt>
  <dd>Description of Title #2</dd>
</dl>