تگ ul چیست؟ در چه مواردی از تگ ul استفاده می‌شود؟ چگونه یک لیست بدون شماره یا بدون ترتیب یا Unordered List در HTML بسازیم؟ در این مقاله به صورت کامل به لیست‌های بدون ترتیب می‌پردازیم و خاصیت‌ها و تگ‌های زیرمجموعه این تگ را مورد بررسی قرار می‌دهیم.
سرفصل‌های پست
تگ ul یا لیست بدون ترتیب در HTML
برای ساخت لیستی از داده‌ها و محتوا از تگ‌های مختلفی در HTML استفاده می‌شود. یکی از این تگ‌ها تگ ul یا unordered list می‌باشد که به لیست بدون ترتیب معروف است. اگر علاقمند به دریافت اطلاعات کامل در مورد تمامی لیست‌ها هستید پیشنهاد می‌کنیم، مقاله آموزشی میزفا در خصوص آشنایی با لیست‌ها را مطالعه کنید.
تگ <ul> برای ساخت لیست‌هایی با آیتم‌های بدون ترتیب ساخته می‌شود و آیتم‌های هر لیست به صورت دایره‌هایی تو پر در می‌آید. (البته با ویژگی‌هایی از سی اس اس «CSS» می‌توانیم این آیتم‌ها را به صورت دایره تو خالی ویا مربع تو پر نیز نمایش دهیم که در این پست به آن نیز می‌پردازیم).
این تگ از نسخه سوم HTML توسط W3C به وب اضافه شده است و برای قرار دادن لیست‌ها از یک تگ زیرمجموعه به نام تگ <li> استفاده میکند و هیچ محدودیتی در تعداد آیتم‌های لیست وجود ندارد.
تگ زیرمجموعه li
همانطور که گفته شد برای ایجاد یک لیست بدون ترتیب با استفاده از تگ ul می‌بایست از یک تگ زیرمجموعه به نام <li> استفاده کنیم. این تگ که یک تگ از نوع block-level می‌باشد، امکان سفارشی سازی و زیبا‌سازی بسیاری در CSS دارد و بسیاری از کاربران با سفارشی سازی مخصوص خود از این تگ استفاده می‌کنند.
نمونه کد لیست‌های بدون ترتیب
نمونه‌ای از کد ساخت لیست‌های بدون ترتیب را می‌توانید در زیر مشاهده کنید. همانطور که گفته شد، شما می‌توانید به تعداد نامحدودی لیست و عضو داشته باشید.
<ul> <li>bread</li> <li>coffee beans</li> <li>milk</li> <li>butter</li> </ul>
استایلدهی لیست ها
همانطور که در بخش‌های قبل گفتم، ۳ استایل متفاوت برای لیست ها به صورت پیش‌فرض در HTML ایجاد شده است که می‌توانید از آنها استفاده کنید.
نمونه استایلدهی لیست‌ها را در زیر می‌توانید مشاهده کنید. همچنین پیشنهاد میکنم برای شخصی سازی لیست‌ها کمی در اینترنت جست و جو کنید تا لیست‌ها آنگونه که می‌خواهید بررسی شود.
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
نمونه کد تو در تو لیست‌های بدون ترتیب
با ایجاد کردن چند تگ <ul> درون هم می‌توانیم لیست‌هایی تو در تو بسازیم.
در حالت لیست‌های تو در تو لیست‌ها از سه استایل دایره توپر، مربع تو پر و دایره تو خاله استفاده می‌کنند.
نمونه‌ی یک لیست بدون ترتیب تو در تو را در زیر می‌توانید مشاهده کنید:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Mizfa tag sample</title> </head> <!-- This Sample Page is Completely --> <!-- For Mizfa Blog --> <body> <ul> <li>first item</li> <li>second item <!-- Look, the closing </li> tag is not placed here! --> <ul> <li>second item first subitem</li> <li>second item second subitem <!-- Same for the second nested unordered list! --> <ul> <li>second item second subitem first sub-subitem</li> <li>second item second subitem second sub-subitem</li> <li>second item second subitem third sub-subitem</li> </ul> </li> <!-- Closing </li> tag for the li that contains the third unordered list --> <li>second item third subitem</li> </ul> <!-- Here is the closing </li> tag --> </li> <li>third item</li> </ul> </body> </html>
خاصیت‌های تگ ul
در جدول زیر خاصیت‌های تگ ul را مشاهده می‌کنید. این تگ از تمامی خاصیت‌های عمومی پشتیبانی میکند ولی خاصیت‌های منحصر به فرد آن با توجه به اضافه شدن امکان استایلدهی از HTML5 حذف شده است و پشتیبانی نمی‌شود، بنابر‌این جدول زیر تنها برای آشنایی شما با این خاصیت‌ها تهیه شده است و هیچ کاربردی در HTML5 که امروزه استفاده می‌شود ندارد.
| خاصیت | مقدار | توضیحات |
| compact | compact | این خاصیت در HTML5 پشتیبانی نمی‌شود.
با این خاصیت لیست کوچکتر از حالت عادی نمایش داده می‌شود. |
| type | disc square circle |
این خاصیت در HTML5 پشتیبانی نمی‌شود.
این خاصیت برای مشخص کردن نوع نشان لیست استفاده می‌شود. |
36873
پایانترم
[box type=”info” class=”question-from-users” width=””]سوال:
یک لیست بدون ترتیب به شکل دایره های تو پر بسازید و کد آن را برایمان ارسال کنید.
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)
[/box]نتیجه گیری
در این مقاله با تگ ul، خاصیت‌های آن و تگ‌های زیرمجموعه آن آشنا شدیم و یاد گرفتید که چگونه یک لیست بدون ترتیب بسازید.
در رابطه با این تگ می‌توانید در وب سایت w3schools نیز بخوانید و اطلاعاتی را بدست آورید.
اگر نکته یا سوالی در رابطه با این تگ به نظرتون رسید، خوشحال میشیم که با ما هم آن را به اشتراک بگذارید.
6 پاسخ
جواب:
عالی علی اکبر، ممنونم ازت🙂 صحیحه
پاسخ سوال :
سلام محمد، ممنون درست گفتی.
سلام. چجوری این در منو های کشویی در سایت ها کاراکتر یک مثلث این شکلی را قرار می دهند؟ شکل یک سر نیزه. می دانم سوالم به این صفحه مربوط نیست ولی آموزش ساخت منو های کشویی را نزاشته اید.
سلام سینا،
چرا این آموزش رو گذاشتیم، نحوه ساخت منو Dropdown در CSS رو نوید نوشته.
روی عنوان که بالا نوشتم کلیک کنی پیداش می‌کنی.
موفق باشی.