لیست در HTML چیست؟ آموزش ul، ol و li و ساخت لیست‌های تو در تو

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

لیست‌ها برای نمایش مجموعه‌ای از موارد مرتبط استفاده می‌شوند؛ مثل فهرست ویژگی‌های یک محصول، مراحل انجام یک کار، منوی ساده، سرفصل‌های آموزشی یا مجموعه‌ای از گزینه‌ها.

در HTML سه عنصر اصلی برای ساخت لیست‌های معمولی داریم: ul، ol و li.

لیست در HTML چیست؟

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

در این مثال ul ظرف اصلی لیست است و هر li یک مورد از لیست را نمایش می‌دهد.

تگ ul در HTML چیست؟

ul مخفف Unordered List است و برای لیستی استفاده می‌شود که ترتیب موارد در آن اهمیت خاصی ندارد.

<ul>
    <li>طراحی سایت</li>
    <li>برنامه‌نویسی</li>
    <li>سئو</li>
</ul>

تگ ol در HTML چیست؟

ol مخفف Ordered List است و برای لیستی استفاده می‌شود که ترتیب موارد در آن اهمیت دارد.

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

تگ li چیست؟

li مخفف List Item است و هر مورد داخل یک لیست را مشخص می‌کند.

تفاوت ul و ol چیست؟

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

گاهی یک مورد از لیست خودش چند زیرمجموعه دارد. در این حالت یک لیست را داخل یک li قرار می‌دهیم.

<ul>
    <li>
        طراحی فرانت‌اند
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
</ul>

ترکیب ul و ol

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

ویژگی start در ol

<ol start="5">
    <li>مرحله پنجم</li>
    <li>مرحله ششم</li>
</ol>

با start می‌توان شماره شروع لیست را تغییر داد.

ویژگی reversed در ol

<ol reversed>
    <li>رتبه سوم</li>
    <li>رتبه دوم</li>
    <li>رتبه اول</li>
</ol>

ویژگی value روی li

<ol>
    <li>مرحله اول</li>
    <li value="5">مرحله پنجم</li>
    <li>مرحله ششم</li>
</ol>

کنترل ظاهر لیست با CSS

HTML ساختار را مشخص می‌کند و ظاهر بولت، شماره، فاصله و رنگ بهتر است با CSS کنترل شود.

ul {
    list-style-type: square;
}

استفاده از لیست برای منو

<nav>
    <ul>
        <li><a href="/">صفحه اصلی</a></li>
        <li><a href="/courses/">دوره‌ها</a></li>
        <li><a href="/contact/">ارتباط با ما</a></li>
    </ul>
</nav>

لیست‌ها و دسترس‌پذیری

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

اشتباهات رایج

• نوشتن بولت دستی به‌جای استفاده از لیست واقعی
• قرار دادن li خارج از ul یا ol
• استفاده از ol وقتی ترتیب معنایی ندارد
• استفاده از HTML برای ظاهر به‌جای CSS

تمرین‌ها

یک لیست بدون ترتیب از ابزارهای طراحی وب، یک لیست شماره‌دار از مراحل ساخت فایل HTML و یک Nested List برای دسته‌بندی Front-end و Back-end بسازید.

جمع‌بندی

لیست در HTML یکی از ساده‌ترین و پرکاربردترین ساختارهای محتواست. اگر ترتیب موارد اهمیت ندارد از ul، اگر ترتیب مهم است از ol و برای هر مورد از li استفاده می‌کنیم.