آشنایی با لیست ها در HTML

لیست در HTML چیست؟ لیست ها در HTML چه وظایفی دارند؟ استفاده از لیست چه مزایایی دارد؟ لیست ها چند نوع هستند ؟‌ در این مقاله قصد داریم تا به صورت کامل با لیست ها آشنا شویم.

لیست ها در HTML

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

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

مزایای عمده استفاده از لیست

• انعطاف‌پذیری: اگر شما بخواهید ترتیب آیتم‌های داخل یک لیست را در یک لیست ترتیبی عوض کنید کافیست آیتم داخل لیست را به اطراف حرکت دهید. در هنگام نمایش مرورگر آن‌ها را به ترتیب نشان می‌دهد.
• ظاهر: استفاده از لیست‌های HTML به شما اجازه می‌دهد تا از کد‌های CSS برای ظاهر لیست استفاده کنید آیتم‌های تگ <li> از سایر تگ‌ها متفاوت هستند شما می‌توانید به صورت مستقیم در CSS برای آن‌ها قوانین خاصی تعیین کنید.
• نمایش: لیست ها محتوای خود را به شکل یک ساختار معنا دار نمایش می‌دهند. به عنوان مثال به صفحه‌خوان‌ها اجازه می‌دهد تا به جای متن‌ها و اعداد گیج کننده، محتوا را به شکل ساختار یافته ای نمایش دهند.

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

انواع لیست

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

• لیست بدون ترتیب: برای گردآوری گروهی مرتبط از آیتم‌ها بدون ترتیب استفاده می‌شود.
• لیست ترتیبی : برای گردآوری گروهی مرتبط از آیتم‌ها در یک ترتیب خاص استفاده می‌شود.
• لیست توضیحی: یک لیست متشکل از نام/مقدار برای شرح بخش هایی مانند اصطلاحات و تعاریف

لیست های بدون ترتیب (Unordered HTML List)

لیست‌های بدون ترتیب(یا گلوله ای) برای نمایش تعداد آیتم بدون در نظر گرفتن هیچ ترتیب خاصی مورد استفاده قرار می‌گیرند. مثالی از یک لیست خرید:

• شیر
• نان
• کره
• مربا

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

شما می‌توانید با استفاده از CSS، گلوله‌های کنار آیتم‌ها را از بین چندین استایل پیشفرض تغییر دهید یا حتی از تصویر دلخواه خودتان استفاده کنید، در صورت نیاز می‌توانید گلوله کنار آیتم ها را حذف کنید.

برای تعریف یک لیست بدون ترتیب از تگ های <ul></ul> برای ایجاد لیست و از تگ‌های <li></li> برای آیتم‌های داخل لیست استفاده کنید.

<ul>
<li>bread</li>
<li>coffee beans</li>
<li>milk</li>
<li>butter</li>
</ul>

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

لیست های ترتیبی (Ordered HTML List)

لیست‌های ترتیبی (شماره‌دار) برای نمایش آیتم‌ها در یک ترتیب خاص مورد استفاده قرار می‌گیرند. به عنوان مثال دستورالعمل پخت یک نیمرو :

1. ریختن روغن داخل ماهیتابه
2. گرم کردن روغن
3. شکستن تخم مرغ ها و مخلوط کردن
4. اضافه کردن تخم مرغ به روغن
5. سرو کردن

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

لیست‌های ترتیبی با چندین نوع ترتیب قابل نمایش هستند. که حالت پیشفرض در اکثر مرورگر ها حالت اعداد صحیح است. انواع ترتیب در لیست‌های ترتیبی به شرح ذیل هستند:

1. حروف
   • حروف کوچک ascii (a,b,c)
   • حروف بزرگ ascii (A, B, C)
   • حروف کلاسیک یونانی (έ, ή, ί)

2. اعداد
   • اعداد صحیح (1, 2, 3)
   • اعداد صحیح با همراهی صفر (01, 02, 03)
   • اعداد یونانی کوچک (i, ii, iii)
   • اعداد یونانی بزرگ (I, II, III)

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

برای ایجاد لیست‌های ترتیبی باید از تگ <ol></ol> و برای محتوای آن باید از تگ <li></li> استفاده کنیم.

<ol>
<li>Gather ingredients</li>
<li>Mix ingredients together</li>
<li>Place ingredients in a baking dish</li>
<li>Bake in oven for an hour</li>
<li>Remove from oven</li>
<li>Allow to stand for ten minutes</li>
<li>Serve</li>
</ol>

شروع لیست ترتیبی با عددی جز 1

یکی از نیاز‌های رایج در استفاده از لیست‌های ترتیبی، تغییر عدد شروع لیست است، به عنوان مثال به جای شروع از عدد 1 از یک عدد دیگر شروع شود. برای انجام این کار باید از خاصیت start استفاده کنیم، این خاصیت یک مقدار عددی قبول می‌کند (حتی اگر از CSS برای تغییر عدد شمارنده استفاده کنید).

<ol>
<li>Gather ingredients</li>
<li>Mix ingredients together</li>
<li>Place ingredients in a baking dish</li>
</ol>
<p>Before you place the ingredients in the baking dish, preheat the oven to180 degrees centigrade/350 degrees fahrenheit in readiness for the next step.</p>
<ol start="4">
<li>Bake in oven for an hour</li>
<li>Remove from oven</li>
<li>Allow to stand for ten minutes</li>
<li>Serve</li>
</ol>

به یاد داشته باشید خاصیت start در نسخه HTML 4 منقضی شده است، بنابراین استفاده از آن در یک صفحه HTML با نسخه 4 باعث رد اعتبار صفحه شما خواهد شد. برای نسخه 4 می توانید توسط شمارنده های موجود در CSS آن را به انجام برسانید. خوشبختانه این خاصیت در نسخه HTML5 بازگشته است.

با لیست‌های ترتیبی در مقاله‌ای جدا بیشتر آشنا می‌شویم.

لیست توضیحی

این لیست قبلا به عنوان لیست تعریفی شناخته می شد اما در نسخه HTML5 تغییر نام پیدا کرد.

در این لیست نام ها و مقدار آن ها داخل لیست قرار می‌گیرند.

به عنوان نمونه نویسنده مقاله و توضیح مختصر از نویسنده یا برندگان یک مسابقه و سال مسابقه. شما می‌توانید به تعداد دلخواه گروه‌های شامل نام/مقدار اضافه کنید، اما باید در نظر بگیرید حداقل باید یک نام و یک مقدار در هر گروه وجود داشته باشد.

لیست‌های توضیحی بسیار انعطاف پذیر هستند. شما می‌توانید چندین مقدار را به یک نام نسبت دهید یا بلعکس. به عنوان مثال قهوه می‌تواند چندین تعریف داشته باشد :

یک لیوان قهوه

یک مایع قهوه‌ای رو به سیاه

لیست‌های توضیحی از تگ‌های </dl><dl> استفاده می‌کنند که برای تعریف نام در گروه از تگ <dt></dt> و برای مقدار از تگ <dd></dd> استفاده می‌شود. به یاد داشته باشید تگ نام همیشه باید در ابتدای لیست استفاده شود.

<dl>
<dt>Name</dt>
<dd>Value</dd>
<dt>Name</dt>
<dd>Value</dd>
<dt>Name</dt>
<dd>Value</dd>
</dl>

مثال دو:

<dl>
<dt>Name1</dt>
<dd>Value that applies to Name1</dd>
<dt>Name2</dt>
<dt>Name3</dt>
<dd>Value that applies to both Name2 and Name3</dd>
<dt>Name4</dt>
<dd>One value that applies to Name4</dd>
<dd>Another value that applies to Name4</dd>
</dl>

در مثال بالا چند نام به همراه یک مقدار تعریف شده است.

با لیست‌های توضیحی در مقاله‌ای جدا بیشتر آشنا می‌شویم.

لیست های تو در تو

یک آیتم لیست می‌تواند یک لیست دیگر در خود جای دهد. این حرکت لیست تو در تو نامیده می‌شود.

<ol>
<li>Chapter One
<ol style="list-style-type: lower-alpha;">
<li>Section One</li>
<li>Section Two </li>
<li>Section Three </li>
</ol>
</li>
<li>Chapter Two</li>
<li>Chapter Three </li>
</ol>

در مثال بالا ما از کد CSS برای تنظیم ترتیب لیست براساس حروف الفبا به جای اعداد صحیح استفاده کردیم.

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

انعطاف پذیری این لیست‌ها به وبسایت اجازه می‌دهد تا یک ساختار سلسله مراتبی را تعریف نمود. همچنین می‌توان از لیست بدون ترتیب در لیست‌های ترتیبی به صورت تو در تو استفاده کرد.

پایانترم

سوال:

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

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

نتیجه گیری

در این مقاله با لیست‌ها آشنا شدیم. لیست ها از عناصر Block Level هستند که ما می‌توانیم از آن‌ها با این عنوان استفاده کنیم و گروهی از اطلاعات را دسته‌بندی کنیم.

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

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