آموزش و يادگيري تگ ul در HTML

در اين بخش از دوره آموزش HTML در آموزش دون ، با تگ <ul> آشنا مي‌شويم. اين تگ براي ايجاد **ليست‌هاي بدون ترتيب (unordered list)** استفاده مي‌شود و معمولاً همراه با تگ <li> براي هر آيتم ليست به کار مي‌رود.

تگ ul در HTML چيست؟

تگ <ul> ليستي از آيتم‌ها را بدون شماره يا ترتيب نمايش مي‌دهد. هر آيتم ليست داخل تگ <li> قرار مي‌گيرد و مرورگر معمولاً با بولت (•) نمايش مي‌دهد.

مثال ساده از تگ ul

<ul>
  <li>سيب</li>
  <li>موز</li>
  <li>پرتقال</li>
</ul>

نتيجه: يک ليست بدون ترتيب با سه آيتم سيب، موز و پرتقال نمايش داده مي‌شود.

ليست‌هاي تو در تو (Nested Lists)

<ul>
  <li>ميوه‌ها
    <ul>
      <li>سيب</li>
      <li>موز</li>
    </ul>
  </li>
  <li>سبزيجات</li>
</ul>

با استفاده از ليست تو در تو مي‌توانيد ساختارهاي پيچيده‌تر مانند دسته‌بندي‌ها يا منوهاي چند سطحي ايجاد کنيد.

استايل‌دهي به ul با CSS

<style>
ul {
  list-style-type: square; /* تغيير شکل بولت */
  padding-left: 20px;
}

ul li {
  margin-bottom: 5px; /* فاصله بين آيتم‌ها */
}
</style>

<ul>
  <li>سيب</li>
  <li>موز</li>
  <li>پرتقال</li>
</ul>

مي‌توان با CSS شکل بولت، فاصله و ساير ويژگي‌هاي ليست را تغيير داد تا ظاهر دلخواه ايجاد شود.