آموزش لیست ها در HTML

نویسنده پوریا ستایش پوریا ستایش
1399/05/06
0
69
زمان مطالعه 5 دقیقه
آموزش لیست ها در HTML

لیست ها از اهمیت بالایی در HTML برخوردار هستند به گونه‌ای که هیچ سایتی را پیدا نمی‌کنید که از لیست در HTML استفاده نکرده باشد.

سه نوع لیست وجود دارد:

  • لیست مرتب «Ordered List»
  • لیست نامرتب «Unordered List»
  • لیست توصیفی «Description List»

لیست‌های مرتب در HTML

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

زمانی که نیاز به نمایش لیستی به همراه شماره در کنارش هستید از این لیست استفاده نمایید. در واقع زمانی که ترتیب آیتم‌ها برای شما اهمیت دارد. به‌عنوان مثال می‌توانید مراحل مختلف یک عمل را شرح دهید. فرض کنید می‌خواهید به کاربری نحوه بوکمارک کردن یک مقاله را آموزش دهید. مراحل کار چگونه خواهد بود؟ قطعاً مراحل دارای ترتیب است. و نمی‌توان مرحله پنجم را به‌جای مرحله سوم انجام داد!

برای پیاده سازی یک لیست مرتب در HTML باید دو تگ را بشناسید:

  • تگ ol
  • تگ li

تگ li در لیست‌های HTML

تگ <li> مخفف عبارت «List item» است. برای نمایش گزینه‌ها یا آیتم‌های لیست از این تگ استفاده می‌شود.

تگ ol در لیست‌های HTML

تگ <ol> مخفف عبارت «Ordered List» است. و تمامی گزینه‌ها یا آیتم‌های شما بیت دو تگ شروع و پایان این تگ قرار می‌گیرد.

مثال:

شما می‌توانید با استفاده از تگ <ol> ، لیست مرتب شده را ایجاد کنید و سپس آیتم‌های موردنظر را به‌وسیله تگ <li> به لیست اضافه کنید.

<ol>
    <li>ابتدا در سایت ثبت نام نمایید.</li>
    <li>وارد حساب خود شوید.</li>
    <li>سپس مقاله‌ای را نشانه گذاری کنید.</li>
    <li>به‌حساب خود بازگردید.</li>
    <li>در قسمت سمت راست موارد نشانه گذاری شده را ببینید.</li>
</ol>

خروجی به شکل زیر خواهد بود:

آموزش تگ ol در HTML

لیست‌های نامرتب در HTML

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

<ul>
    <li>Limes</li>
    <li>Tortillas</li>
    <li>Chicken</li>
</ul>

در مثال بالا ، لیست با استفاده از تگ <ul> ایجاد شده و کلیه آیتم‌های لیست با استفاده از تگ <li> اضافه شده است.

خروجی به شرح زیر خواهد بود:

لیست نا مرتب در HTML

لیست تو در تو در HTML

گاهی لازم است برای یک گزینه از لیست، لیست مجزایی در نظر گرفته شود. برای این منظور مفهوم هیچ‌کدام از تگ‌ها تغییری نمی‌کند. لیست OL و لیست UL سر جای خودشان باقی می‌مانند. پس نحوه افزودن یک لیست به یک آیتم چگونه است؟ برای این منظور می‌بایست پس از قرار دادن متن موردنظر در یک li لیست جدید را در همان li تعریف کنید. به مثال زیر توجه بفرمایید:

<ul>
    <li>
        Item One
    </li>
    <li>
        Item Two
    </li>
    <li>
        Item Three
        <ul>
            <li>
                Description One
            </li>
            <li>
                Description Two
            </li>
            <li>
                Description Three
            </li>
        </ul>
    </li>
</ul>

خروجی مثل تصویر زیر است:

لیست تو در تو در HTML

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

<ol>
    <li>
        Item One
    </li>
    <li>
        Item Two
    </li>
    <li>
        Item Three
        <ol>
            <li>
                Description One
            </li>
            <li>
                Description Two
            </li>
            <li>
                Description Three
            </li>
        </ol>
    </li>
</ol>

خروجی مثل تصویر زیر است:

آموزش لیست تو در تو در HTML

نکته: استفاده از تگ لیست مرتب یعنی ol در لیست نامرتب یعنی ul یا بالعکس منعی ندارد و به شکل صحیح کار می‌کند.  به مثال زیر توجه بفرمایید:

<ul>
    <li>
        Item One
    </li>
    <li>
        Item Two
    </li>
    <li>
        Item Three
        <ol>
            <li>
                Description One
            </li>
            <li>
                Description Two
            </li>
            <li>
                Description Three
            </li>
        </ol>
    </li>
</ul>

خروجی به شکل زیر خواهد بود:

تگ لیست تو در تو تگ ol

استفاده از تگ دیگر در لیست HTML

استفاده از تگ‌های دیگر مثل div و p و حتی img در گزینه‌های یک لیست منعی ندارد. ولی استفاده از تگی غیر از تگ li در لیست‌ها غیرمجاز است. به مثال زیر توجه بفرمایید:

<ul>
    <li>
        <img src="imageOne.jpg" alt="image one" />
    </li>
    <li>
        <img src="imageTwo.jpg" alt="image two" />
    </li>
</ul>

لیست‌های توصیفی در HTML

این لیست با دو لیست بالا، کاملاً متفاوت است. به این لیست اصطلاحاً «Description List» گفته می‌شود. لیست توصیفی یا توضیحی، مجموعه‌ای از گزینه‌ها را نمایش می‌دهد، سپس برای هر کدام توضیحی را در نظر می‌گیرد.

برای این منظور باید با سه تگ دیگر آشنا شوید:

  • تگ dl که مخفف عبارت description list است. تمامی گزینه‌ها یا آیتم‌ها بین دو تگ شروع و پایان این تگ قرار می‌گیرد.
  • تگ dt که برای مشخص کردن عبارت یا «Term» مورد نظر استفاده می‌شود.
  • تگ dd که توصیف عبارت نوشته شده در dt است.

به مثال زیر توجه کنید. دو نوشیدنی «قهوه» و «شیر» در لیست به همراه توضیح نوشته شده‌اند.

<dl>
    <dt>قهوه</dt>
    <dd>نوشیدنی سیاه و داغ</dd>
    <dt>شیر</dt>
    <dd>نوشیدنی سفید و سرد</dd>
</dl>

عبارت «نوشیدنی سیاه و داغ» توصیفی برای عبارت «قهوه» است. و عبارت «نوشیدنی سفید و سرد» توصیفی برای عبارت «شیر» است.

خروجی شبیه تصویر زیر است:

لیست توضیحی توصیفی در HTML

در نهایت  باید به سوال های زیر پاسخ دهید:

  • تگ های UL و OL و DL به چه منظور استفاده می‌شوند؟
  • تفاوت هر کدام از تگ ها با تگ‌های دیگر در چیست؟
  • آیا استفاده از تگ های دیگر در li مشکلی دارد؟
  • تگ dt و dd به چه منظور استفاده می‌شود؟