لیست ها در HTML به توسعه دهندگان وب و طراحان سایت این امکان را می دهند که گروهی از آیتم های مرتبط را به صورت های مختلف مانند: افقی یا عمودی، ترتیبی یا بدون ترتیب و حتی به صورت تعریفی (با توضیحات) لیست کنند. در تصویر زیر دو نمونه از لیست ها را مشاهده می کنید.
لیست های نامرتب در HTML
یک لیست نامرتب یا بدون ترتیب با تگ < ul > شروع می شود و هر آیتم از لیست با تگ < li > شروع می شود. آیتم های لیست نامرتب به صورت پیش فرض با دایره های کوچک نشانه گذاری می شوند، اما شما می توانید این نشانه گذاری ها را تغییر دهید.
خروجی مثال بالا به شکل زیر است:
لیست های ترتیبی در HTML
یک لیست دارای ترتیب با تگ < ol > شروع می شود و هرکدام از آیتم های لیست با تگ < li > شروع می شود. به صورت پیش فرض آیتم های لیست ترتیبی با اعداد نشانه گذاری می شوند، اما شبیه لیست های نامرتب این امکان وجود دارد که نشانه گذاری آیتم های لیست را تغییر دهید.
خروجی کد بالا به شکل زیر است:
لیست توضیحات در HTML
یک لیست توضیحات، لیستی از عناوین با توضیحاتی مربوط به هر کدام از آیتم های لیست می باشد.
تگ < dl > لیست توضیحات را تعریف می کند، تگ < dt > عنوان هر آیتم را تعریف می کند، و تگ < dd > هر عنوان را توضیح می دهد:
خروجی مثال بالا به شکل زیر است:
لیست های بدون ترتیب در HTML – انتخاب کردن نشانه ی پشت آیتم ها
از خاصیت list-style-type برای مشخص کردن نوع نشانه های آیتم ها (دایره ، مربع و...) در لیست استفاده می شود.
همانطور که می بینید به صورت پیش فرض نشانه آیتم ها در لیست های نامرتب به صورت دایره های توپر است.
انواع نشانه های آیتم ها در لیست های نامرتب
disc: با انتخاب این مقدار، از دایره های توپر برای نشانه گذاری آیتم های لیست استفاده می شود.
Circle: با انتخاب این مقدار، از دایره های توخالی برای نشانه گذاری آیتم های لیست استفاده می شود.
Square: با انتخاب این مقدار، از مربع های توپر برای نشان دار کردن آیتم های لیست استفاده می شود.
None: از هیچ نشانه ای برای نشان دار کردن آیتم های لیست استفاده نمی شود.
لیست های Nested در HTML
در زبان HTML شما می توانید لیست های تو در تو داشته باشید. به عبارتی یکی از آیتم های لیست شما خود یک لیستی از آیتم ها داشته باشد.
خروجی مثال بالا به شکل زیر است.
لیست های افقی با CSS
لیست های HTML می توانند در حالت های بسیاری قرار بگیرند. یکی از روش های معروف، افقی حالت دادن لیست می باشد. حالت افقی در زمان هایی که شما می خواهید یک منو بسازید استفاده می شود. چرا که با استفاده از لیست ها شما خیلی راحت می توانید منوی سایت را طراحی کنید. دقت کنید که در مثال زیر برای افقی قرار دادن آیتم ها در صفحه از مشخصه float استفاده شده است
خروجی مثال بالا به شکل زیر است:
لیست های ترتیب دار در HTML
تگ < ol > در HTML یک لیست ترتیبی را تعریف می کند. یک لیست ترتیبی می تواند عددی یا با حروف الفبا باشد.
لیست ترتیب دار در زبان HTML با تگ < ol > شروع می شود و هر آیتم با یک تگ < li > مشخص می شود.
بصورت پیش فرض آیتم ها با اعداد نشانه گذاری می شوند:
خروجی مثال بالا به شکل زیر است:
خاصیت type در لیست های ترتیبی
ویژگی Type از تگ < ol >، نوع نشانه آیتم ها را تعریف می کند.
"Type="1: آیتم های لیست ترتیبی به ترتیب از مقدار 1 نشانه گذاری می شوند.
"Type="A: آیتم های لیست ترتیبی به ترتیب حروف الفبا از مقدار A (حروف بزرگ) شروع می شوند.
"Type="a: آیتم های لیست ترتیبی به ترتیب حروف الفبا از مقدار a (حروف کوچک) شروع می شوند.
"Type="I: آیتم های لیست ترتیبی به ترتیب اعداد یونانی از مقدار I (اعداد بزرگ) شروع می شوند.
"Type="i: آیتم های لیست ترتیبی به ترتیب اعداد یونانی از مقدار i (اعداد کوچک) شروع می شوند.
در تصویر زیر نمونه ای از این نوع نشانه گذاری ها را می بینید:
کنترل کردن شمارش لیست
به صورت پیش فرض، لیست ترتیب دار از 1 شروع به شمارش می کند. اما شما می توانید نقطه شروع شمارش را تغییر دهید و از یک عدد به خصوص شمارش را شروع کنید. برای این کار شما می توانید از ویژگی start استفاده کنید:
خروجی مثال بالا به شکل زیر است:
