تگ ul در HTML + ویدیو آموزشی

تگ ul در html برای ایجاد لیست نامرتب به کار می رود. یعنی لیستی که ترتیب و شماره بندی خاصی ندارد. مثلا زمانی که می خواهیم یک فهرست برای سایت خود ایجاد کنیم از تگ ul در html استفاده می کنیم.

⭐ (پیشنهاد می کنم برای یادگیری بهتر، ابتدا ویدیو بالا که قسمتی از دوره رایگان آموزش HTML CSS به زبان ساده است را ببینید سپس ادامه متن را مطالعه نمایید.)⭐

تگ ul در html (توضیحات و شیوه استفاده)

• تگ <ul> یک لیست نامرتب ایجاد می کند
• تگ <ul> شامل یک تگ باز و یک تگ بسته است.
• برای ایجاد هر آیتم در لیست، از تگ <li> استفاده می شود.

نکته: می گوییم تگ <ul> یک لیست نامرتب ایجاد می کند، زیرا هیچگونه شماره بندی و ترتیب خاصی ندارد و فقط کنار هر کدام از آیتم ها یک دایره توپر ایجاد می کند که با استایل دهی می توانیم آن را حذف کنیم یا استایل خاصی به آن بدهیم.

نکته: برای لیست های مرتب شده، از تگ <ol> استفاده کنید. این تگ یک لیست ایجاد می کند که به ترتیب شماره گذاری شده اند.

مثال: ایجاد یک لیست نامرتب (بدون استایل)

 <ul>
<li> آموزش ورپرس </li>
<li> آموزش المنتور </li>
<li> آموزش طراحی قالب </li>
<li> آموزش php </li>
</ul>

خروجی:

کاربرد تگ ul و li در html

در هر جایی برای ایجاد یک لیست می توانیم از این تگ استفاده کنیم. البته مهمترین جایی که از تگ ul و استفاده می کنیم برای ایجاد منو و زیرمنو در سایت است. با این تگ می توانیم انواع منو افقی، عمودی و انواع زیر منو ایجاد کنیم.

مثال: ایجاد منو

<ul class="menu">
<li> <a href="">صفحه اصلی</a> </li>
<li> <a href="">درباره ما</a> </li>
<li> <a href="">تماس با ما</a> </li>
<li> <a href="">همکاری با ما</a> </li>
</ul>

خروجی:

نکته: از تگ a برای لینک دار کردن گزینه ها استفاده می کنیم. (برای آشنایی بیشتر با این تگ، به مقاله تگ a در html مراجعه کنید)

مثال: ایجاد منو افقی (با استایل دهی)

 <style>

.menu {
background:#34495e;
float: right;
width: 100%;
}

.menu li {
float: right;
list-style: none;
}

.menu li a {
color:#fff;
display: inline-block;
padding: 10px 20px;
text-decoration: none;
font-weight: bold;
}

</style>

خروجی:

مثال: ایجاد منو عمودی

<style>

.menu {
list-style: none;
margin: 0;
padding: 0;
width: 250px;
background-color: #256dff;
float: right;
}
.menu li a {
display: block;
color: #fff;
padding: 10px 16px;
text-decoration: none;
margin: 5px;
font-weight: bold;
}

</style>

خروجی:

ایجاد لیست های بسیار زیبا

تگ <ul> در برخی اوقات می تواند زیبایی های خاصی به سایت ما ببخشد. برای این کار فقط نیاز است که با استایل دهی در css آشنا باشید. برای یادگیری html و css به صورت کامل، می توانید از آموزش رایگان سایت وبسافت 3 استفاده نمایید که در ابتدای مطلب لینک آن را برای شما قرار دادیم.

جمع بندی

در این مطلب آموختید که چگونه با استفاده از تگ ul در html یک لیست در هر کجای وبسایت خود ایجاد کنید. همینطور شیوه ایجاد انواع منو در سایت با استفاده از این تگ را یاد گرفتید (برای ایجاد منو های زیبا در سایت خود آموزش ساخت منو در HTML را مشاهده کنید تا به صورت کامل با این مبحث آشنا شوید).

منبع: https://www.w3schools.com/tags/tag_ul.asp