زبان html نزدیک به 80 تگ را در اختیار ما قرار داده است.تگ هایی با کاربرد های متفاوت و ساختار های متفاوت,یکی از تگ های بسیار کاربردی که قطعا به آن بر میخوریم تگ لیست میباشد,تگ لیست که به سه نوع تعریف میشود وظیفه ایجاد لیست ها در html را دارا است.

لیست ها در html چیست ؟

بزارید سریع به اصل مطلب بریم,لیست‌ها در HTML برای نمایش مجموعه‌ای از آیتم‌ها به صورت مرتب یا نامرتب استفاده می‌شوند. سه نوع اصلی لیست در HTML وجود دارد.

1. لیست‌های نامرتب : آیتم‌ها به صورت بدون ترتیب نمایش داده می‌شوند و معمولاً با یک نماد (مثل دایره) مشخص می‌شوند.
2. لیست‌های مرتب : آیتم‌ها به صورت ترتیبی نمایش داده می‌شوند و معمولاً با اعداد یا حروف مشخص می‌شوند.
3. لیست‌های توصیفی : برای نمایش اصطلاح‌ها و تعاریف آن‌ها استفاده می‌شود. هر اصطلاح با تگ <dt> و تعریف آن با تگ <dd> مشخص می‌شود.

همین الان که شما دارید این مقاله را مطالعه میکنید.ما در بالا برای توصیف انواع لیست ها در html خود از لیست ها استفاده کرده ایم.اگر دقت کرده باشید متون بالا به صورت لیست بندی شده نمایش داده است و پشت هر آیتم یک نمادک آمده است,این نوع لیست را در html لیست های نامرتب مینامیم که در ادامه مقاله آن را به شما آموزش میدهیم.

	<ul>لیست‌های نامرتب : آیتم‌ها به صورت بدون ترتیب نمایش داده می‌شوند و معمولاً با یک نماد (مثل دایره) مشخص می‌شوند.</ul>
	<ul>لیست‌های مرتب : آیتم‌ها به صورت ترتیبی نمایش داده می‌شوند و معمولاً با اعداد یا حروف مشخص می‌شوند.</ul>
	<ul>لیست‌های توصیفی : برای نمایش اصطلاح‌ها و تعاریف آن‌ها استفاده می‌شود. هر اصطلاح با تگ <dt> و تعریف آن با تگ <dd> مشخص می‌شود.</ul>

درمثال بالا به شما نشان داده ایم که با استفاده از تگ ul لیستی شبی به لیست بالا را درست کنیم,اگر ساختار آن را متوجه نمیشوید نگران نباشید,در ادامه آن را به شما آموزش میدهیم,پس مقاله را تا آخر مطالعه فرمایید.

انواع لیست ها در html

در اینجا میخواهیم انواع ساختار های لیست را برای شما توضیح دهیم در زبان html برای ساختن لیست ها سه ساختار وجود دارد که آن ها را توضیح میدهیم.

لیست های ul/li در html

این نوع ساختار برای ایجاد لیست ها به صورت نامرتب میباشد.در این نوع لیست ها در پشت هر آیتم یک نمادک قرار میگیرد و شماره بندی خاصی را دارا نمیباشد.

<ul>
  <li>آیتم اول</li>
  <li>آیتم دوم</li>
  <li>آیتم سوم</li>
</ul>

در بالا مثالی را از این نوع لیست برای شما آورده ایم.

لیست های ol/li در html

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

<ol>
   <li>آیتم اول</li>
   <li>آیتم دوم</li>
   <li>آیتم سوم</li>
</ol>

در بالا مثالی را از این نوع لیست برای شما آورده ایم.

لیست های تعریفی dl/dt

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

برای ایجاد یک لیست توصیفی در HTML، از تگ‌های زیر استفاده می‌شود:

• <dl>: این تگ نشان‌دهنده شروع یک لیست توصیفی است.
• <dt>: این تگ برای تعریف یک اصطلاح یا عنوان استفاده می‌شود.
• <dd>: این تگ برای تعریف توصیف یا تعریف مربوط به اصطلاح قبلی استفاده می‌شود.

<dl>
  <dt>HTML</dt>
  <dd>زبان نشانه‌گذاری ابرمتن، زبان استاندارد برای ساخت صفحات وب است.</dd>
  <dt>CSS</dt>
  <dd>زبان طراحی صفحات وب است که برای تعیین ظاهر و چیدمان عناصر HTML استفاده می‌شود.</dd>
  <dt>JavaScript</dt>
  <dd>زبان برنامه‌نویسی سمت کلاینت است که برای ایجاد صفحات وب پویا و تعاملی استفاده می‌شود.</dd>
</dl>

در بالا مثالی را از این نوع لیست ها برای شما آورده ایم.

کاربرد اصلی لیست ها در html

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

لیست ها برای دسته بندی آیتم ها

همانطور که در بالا مثال هایی را برای شما آورده بودیم و توضیح دادیم از تگ لیست میتوان برای دسته بندی آیتم ها استفاده کرد که ساده ترین کاربرد این تگ در html میباشد.

<ol>
   <li>آیتم اول</li>
   <li>آیتم دوم</li>
   <li>آیتم سوم</li>
</ol>

در مثال بالا برای دسته بندی آیتم ها به صورت شماره بندی شده از تگ <ol> استفاده کرده ایم.

ایجاد منو در وب سایت

شما میتوانید با استفاده از تگ های لیست و کمی استایل دهی آن با استفاده از css و کمی استفاده از js برای تغییر رفتار لیست منو برای وب سایت خود ایجاد کنید که ما این را در یک مقاله جداگانه به شما آموزش میدهیم و الان فقط مثالی را برای شما آورده ایم.

<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>لیست ها در html</title>
	<style>
		nav ul {
			list-style: none;
			margin: 0;
			padding: 0;
			display: flex;
			justify-content: center;
              }

		nav li {
			margin: 0 10px;
			}

		nav a {
			text-decoration: none;
			color: #333;
			}
	</style>
</head>
<body>
	<nav>
  <ul>
    <li><a href="#">خانه</a></li>
    <li><a href="#">درباره ما</a></li>
    <li><a href="#">محصولات</a></li>
    <li><a href="#">تماس با ما</a></li>
  </ul>
</nav>
</body>
</html>

در بالا مثالی ساده ای را برای ایجاد منو با استفاده از تگ لیست برای شما آورده ایم.

لینک دهی به قسمت های مختلف مقالات

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

<!DOCTYPE html>
<html>
<head>
  <title>مقاله نمونه با منو</title>
</head>
<body>

<nav>
  <ul>
    <li><a href="#introduction">مقدمه</a></li>
    <li><a href="#section1">بخش اول</a></li>
    <li><a href="#section2">بخش دوم</a></li>
    <li><a href="#conclusion">نتیجه‌گیری</a></li>
  </ul>
</nav>

<h2 id="introduction">مقدمه</h2>
<p>این بخش مقدمه مقاله است...</p>

<h2 id="section1">بخش اول</h2>
<p>اینجا بخش اول مقاله قرار می‌گیرد...</p>

<h2 id="section2">بخش دوم</h2>
<p>اینجا بخش دوم مقاله قرار می‌گیرد...</p>

<h2 id="conclusion">نتیجه‌گیری</h2>
<p>اینجا نتیجه‌گیری مقاله قرار می‌گیرد...</p>

</body>
</html>

در مثال بالا از تگ لینک و تگ لیست به صورت ترکیبی برای لینک دادن به قسمت های مختلف مقاله استفاده کرده ایم.