آموزش طراحی سایتآموزش HTML

تگ ul در HTML

تگ 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

نتیجه گیری

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

در رابطه با این تگ می‌توانید در وب سایت w3schools نیز بخوانید و اطلاعاتی را بدست آورید.

اگر نکته یا سوالی در رابطه با این تگ به نظرتون رسید، خوشحال میشیم که با ما هم آن را به اشتراک بگذارید.

 

برچسب ها

علی اسمعیلی

درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم...

نوشته های مشابه

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره رایگان سئو