تگ ul در HTML

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

تگ ul چیست؟

تگ ul که اشاره به عبارت Unordered List دارد برای ایجاد لیست های نامرتب به کار می رود.

تگ ul برخلاف تگ ol (تگ ایجاد لیست مرتب) داده های درون لیست را بر اساس اعداد، حروف و ... مرتب سازی نمی کند و از علامت های مربع، دایره و ... برای مرتب سازی داده ها استفاده می کند.

برای افزودن داده به لیست نامرتب از تگ li استفاده می کنیم.

این تگ با <ul> شروع شده و با </ul> پایان می یابد.

<ul></ul>

استایل تگ ul

برای تغییر استایل یا علامت کنار داده ها باید از صفت style در HTML و ویژگی list-style-type در CSS کمک بگیریم.

دایره توپر (پیش فرض):

<ul style="list-style-type: disc;">
  <li>سفید</li>
  <li>سبز</li>
</ul>

اجرا

دایره توخالی:

<ul style="list-style-type: circle;">
  <li>سفید</li>
  <li>سبز</li>
</ul>

اجرا

مربع:

<ul style="list-style-type: square;">
  <li>سفید</li>
  <li>سبز</li>
</ul>

اجرا

مثال تگ ul

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

کد:

<ul>
  <li>میوه ها</li>
  <li>رنگ ها
    <ul>
      <li>سفید</li>
      <li>قرمز</li>
      <li>آبی</li>
      <li>سبز</li>
      <li>زرد</li>
    </ul>
  </li>
</ul>

اجرا

تنظیمات پیش فرض CSS

تنظیمات پیش فرض CSS تگ ul در اکثر مرورگرها به صورت زیر است:

ul {
  display: block;
  list-style-type: disk;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

سازگاری با مرورگرها

تگ ul با مرورگرهای زیر سازگار است:

• گوگل کروم
• فایرفاکس
• اج
• اپرا
• سافاری
• گوگل کروم اندروید
• فایرفاکس اندروید
• اپرا اندروید
• سافاری iOS