کار با تگ های ایجاد کننده لیست در HTML

انواع لیست در HTML

لیست های HTML در دو دسته اصلی طبقه بندی می شوند:
- لیست های سفارشی و مرتب شده یا Ordered، یعنی لیست هایی که در ابتدای آیتم های آن شماره قرار می گیرد و رعایت ترتیب در آنها مهم است، شماره آیتم های این نوع لیست ها به صورت خودکار از بالاترین به پائین ترین سطح مرتب می شوند، مثال:

- لیست هایی بدون شماره و مرتب نشده یا Unordered، یعنی به جای نمایش شماره و مهم بودن ترتیب آیتم ها از علائم دیگری نظیر نقطه های مشکی تو پُر و تو خالی یا مربع استفاده می شود و رعایت ترتیب آیتم های لیست اهمیتی ندارد، مثال:

هر کدام از انواع مختلف لیست ها می توانند در جای خود با توجه به محتوایی که قصد نمایش آن را داریم کاربردی باشند، از نظر فنی علاوه بر تفاوت های ظاهری در نحوه نمایش لیست ها انتخاب هر کدام از روش ها می تواند در زمینه بهینه سازی صفحات وب برای موتورهای جستجو (SEO یا Search Engine Optimization) نیز حداقل در تئوری معنی و تاثیر متفاوت داشته باشد.

ایجاد لیست های مرتب شده با تگ ol و li

برای ایجاد لیست با آیتم های شماره بندی و مرتب شده از دو تگ ol و li استفاده می کنیم، ol تگ کلیدی در HTML برای ایجاد لیست با آیتم های سفارشی و دارای اولویت است و به مفسر مرورگر تفهیم می کند که منظور ما لیستی با آیتم های شماره دار و ترتیبی است، تگ li نیز محتوای هر آیتم را در خود جای می دهد، به طور مثال:

<ol>
<li>آموزش</li>
<li>مقدماتی</li>
<li>HTML</li>
<li>تگ ها</li>
</ol>

برای دیدن پیش نمایش آنلاین مثال ها لطفا به انتهای این مطلب مراجعه کنید.
در حالت پیش فرض مرورگر از اعداد برای مرتب سازی آیتم های لیست ol li استفاده می کند (به فرض از شماره 1، 2، 3 ...)، اما اگر بخواهیم نمایش عناوین آیتم ها سفارشی باشد می توانیم از چند مقدار متفاوت برای صفت type تگ ol استفاده کنیم، این مقادیر می توانند به صورت زیر باشند:
- لیست آیتم ها به صورت شماره ای (1، 2، 3 و...) با مقدار 1 برای صفت type تگ ol.
- لیست آیتم ها به صورت حروف کوچک (c، b، a و...) با مقدار a برای صفت type تگ ol.
- لیست آیتم ها به صورت حروف بزرگ (C، B، A و...) با مقدار A برای صفت type تگ ol.
- لیست آیتم ها به صورت شماره های رومی کوچک (iii، ii، i و...) با مقدار i برای صفت type تگ ol.
- لیست آیتم ها به صورت شماره های رومی بزرگ (III، II، I و...) با مقدار I برای صفت type تگ ol.
به طور مثال در نمونه کد زیر از شماره های رومی بزرگ برای آیتم های لیست استفاده شده است:

<ol type="I">
<li>آموزش</li>
<li>مقدماتی</li>
<li>HTML</li>
<li>تگ ها</li>
</ol>

تگ li حالت عمومی دارد و برای تعریف آیتم های انواع مختلف لیست قابل استفاده است.

ایجاد لیست های مرتب نشده با تگ ul و li

برای ایجاد لیست با آیتم های فاقد شماره و بدون اولویت در صفحات وب از تگ ul و li استفاده می شود، در اینجا ul تگ کلیدی است که به مرورگر می گوید آیتم های لیست را بدون شماره و مرتب نشده نمایش دهد و از تگ li نیز برای ایجاد و مدیریت محتوای آیتم ها استفاده می شود، به طور مثال:

<ul>
<li>تگ ol</li>
<li>تگ ul</li>
<li>تگ li</li>
<li>تگ dl</li>
</ul>

برای دیدن پیش نمایش آنلاین مثال ها لطفا به انتهای این مطلب مراجعه کنید.
در حالت پیش فرض مرورگر برای نمایش آیتم های لیست ul li از علامت پیش فرض (معمولا نقطه های تو پُر) استفاده می کند، برای اینکه این رفتار مرورگر را کنترل کرده و نحوه نمایش آیتم های لیست مرتب نشده را سفارشی کنیم می توانیم همانند تگ ol از صفت type استفاده کنیم، با این تفاوت که در اینجا تنها سه مقدار زیر برای این صفت قابل تعیین است:
- ایجاد نقطه های تو خالی با مقدار circle برای صفت type تگ ul.
- ایجاد نقطه های تو پُر با مقدار disc برای صفت type تگ ul.
- ایجاد نقطه های مربعی با مقدار square برای صفت type تگ ul.
به طور مثال در نمونه کد زیر از نقطه های مربعی برای آیتم های لیست استفاده شده است:

<ul type="square">
<li>تگ ol</li>
<li>تگ ul</li>
<li>تگ li</li>
<li>تگ dl</li>
</ul>

خوشبختانه علاوه بر صفت ها و مقادیر فوق، کنترل عناصر تگ های ul و li در HTML با زبان استایل نویسی CSS نیز کاملا مقدور است، علاوه بر این CSS امکانات خیلی بیشتری برای سفارشی سازی لیست های وب در اختیارمان قرار می دهد که در آموزش های مقدماتی این زبان و در مطلب زیر به طور مفصل در این رابطه گفته ایم:
نحوه تنظیم لیست با تگ ul li در CSS
نکته: طبق توصیه W3C (کنسرسیوم جهانی وب) بهتر است برای جلوهای ظاهری عناصر HTML در حد امکان از CSS استفاده کنیم لذا در پروژه های کاربردی شاید استفاده از صفت type خیلی بهینه نباشد.

ایجاد لیست های تو در تو با تگ ol، ul و li

کاربرد لیست در وب به موارد ساده محدود نمی شود، با پیروی از اصول تگ های HTML می توانیم لیست های تو در تو و دارای چند سطح یا به اصطلاح آشیانه ای (Nested) ایجاد کنیم، اینگونه لیست ها می توانند برای مواردی که به صورت زیر مجموعه ای و طبقه بندی شده هستند مانند منوهای صفحات وب کاربرد داشته باشند، ساختار کلی منوی زیر مجموعه ای و تو در تو در مثال زیر مشخص است:

<ul>
<li>لیست اصلی بدون زیر مجموعه</li>
<li>
لیست اصلی با زیر مجموعه
<ul><li>لیست فرعی و زیر مجموعه اول
<ul><li>لیست فرعی و زیر مجموعه دوم</li></ul></li></ul>
</li>
</ul>

و همین لیست با تگ ol و li:

<ol>
<li>لیست اصلی بدون زیر مجموعه</li>
<li>
لیست اصلی با زیر مجموعه
<ol><li>لیست فرعی و زیر مجموعه اول
<ol><li>لیست فرعی و زیر مجموعه دوم</li></ol></li></ol>
</li>
</ol>

ساخت لیست های توصیفی با تگ dl، dt و dd

در HTML با استفاده از تگ های dl، dt و dd می توانیم لیست توصیفی ایجاد کنیم که کاربردهای خاص خود را دارد، در این شیوه تگ dl به عنوان تگ کلیدی، تگ dt برای ایجاد آیتم های لیست و تگ dd برای توصیف هر آیتم کاربرد دارد، به طور مثال:

<dl>
<dt>آموزش</dt>
<dd>برنامه نویسی</dd>
<dt>سطح</dt>
<dd>مقدماتی</dd>
<dt>مبحث</dt>
<dd>تگ های HTML</dd>
<dt>تمرین</dt>
<dd>تگ های لیست</dd>
</dl>

برای دیدن پیش نمایش آنلاین مثال ها لطفا به انتهای این مطلب مراجعه کنید.

مثال و پیش نمایش آنلاین

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

<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ایجاد لیست در صفحات وب</title>
<!-- Webgoo.ir -->
<style>
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
</style>
</head>
<body>
<b>لیست های شماره ای مرتب شده:</b><br>
<!-- شروع لیست -->
<ol type="I">
<li>آموزش</li>
<li>مقدماتی</li>
<li>HTML</li>
<li>تگ ها</li>
</ol>
<!-- پایان لیست -->
<hr>
<b>لیست های عادی مرتب نشده:</b><br />
<!-- شروع لیست -->
<ul type="square">
<li>تگ ol</li>
<li>تگ ul</li>
<li>تگ li</li>
<li>تگ dl</li>
</ul>
<!-- پایان لیست -->
<hr>
<b>لیست های تو در تو:</b><br>
<!-- شروع لیست -->
<ul>
<li>لیست اصلی بدون زیر مجموعه</li>
<li>
لیست اصلی با زیر مجموعه
<ul><li>لیست فرعی و زیر مجموعه اول
<ul><li>لیست فرعی و زیر مجموعه دوم</li></ul></li></ul>
</li>
</ul>
<!-- پایان لیست -->
<!-- شروع لیست -->
<ol>
<li>لیست اصلی بدون زیر مجموعه</li>
<li>
لیست اصلی با زیر مجموعه
<ol><li>لیست فرعی و زیر مجموعه اول
<ol><li>لیست فرعی و زیر مجموعه دوم</li></ol></li></ol>
</li>
</ol>
<!-- پایان لیست -->
<hr>
<b>لیست های توصیفی:</b><br>
<!-- شروع لیست -->
<dl>
<dt>آموزش</dt>
<dd>برنامه نویسی</dd>
<dt>سطح</dt>
<dd>مقدماتی</dd>
<dt>مبحث</dt>
<dd>تگ های HTML</dd>
<dt>تمرین</dt>
<dd>تگ های لیست</dd>
</dl>
<!-- پایان لیست -->
</body>
</html>

پیش نمایش آنلاین