تگ لیست در html

شغل:طراحی وب

درآمد:۱۳۰ هزار دلار سالانه

مکان:هر کشوری دوست داری

مسیر: ۷ دوره آموزشی

منتور ۲ :جلسه آنلاین با استاد

منتور ۱ : کافه گپ و گفت

بزن بریم

در این مطلب از آموزش html و css می خواهیم به معرفی لیست در HTML بپردازیم. لیست ها (list) این قابلیت را به شما می دهند که به کمک آن ها بتوانید محتوای صفحات سایت خود را به درستی دسته بندی و مرتب کرده و نمایش دهید. بنابراین لازم است که با ساختار و نحوه کدنویسی انواع لیست در HTML آشنا شوید. بنابراین تا انتهای مطلب با ما همراه باشید تا تسلط کافی نسبت به این موضوع پیدا کنید.

آنچه در این مقاله می آموزید:

تگ لیست در html چیست؟

در HTML برای ایجاد هر خاصیتی از تگ های استانداردی که بنا بر نیازسنجی، توسط کنسرسیوم جهانی وب (w3c) تعریف شده اند، استفاده می شود. یکی از این نیازها، امکان ایجاد مطالب و محتوا به صورت لیست شده و زیرمجموعه ای است که w3c برای آن تگ های استاندارد ul li ol dl dd و dt را در نظر گرفته است. این تگ ها همه از یک خانواده هستند که برای ایجاد و مدیریت لیست در صفحات وب کاربرد دارند.

انواع لیست در html

لیست ها در HTML به توسعه دهندگان وب و طراحان سایت این امکان را می دهند که گروهی از آیتم های مرتبط را به صورت های مختلف افقی یا عمودی، ترتیبی یا بدون ترتیب و حتی به صورت تعریفی (با توضیحات) لیست کنند. به طور کلی می توان گفت در HTML ما ۳ نوع لیست داریم:

لیست نامرتب (Unordered list)
لیست مرتب (Ordered List)
لیست دارای توضیحات (Description List)

لیست های نامرتب در HTML

لیست های نامرتب لیست هایی هستند که ترتیب قرار گرفتن آیتم ها در آنها مهم نیست. یعنی مهم نیست که کدام مقدار اولش نوشته شود و کدام آخر. در کنار هر یک از آیتم ها یک گلوله توپُر مشکی ایجاد می شود. (لیست های نامرتب کلا به صورت پیش فرض کنار آیتم هایشان یک گلوله توپُر مشکی قرار می گیرد.) شما در HTML با استفاده از تگ <ul> می توانید یک لیست نامرتب و با استفاده از تگ <li> آیتم های یک لیست نامرتب را ایجاد نمایید.

مثال شماره ۱ : ایجاد یک لیست نامرتب

<body>

<ul>
<li>html</li>
<li>css</li>
<li>bootstrap</li>
</ul>

</body>

خروجی این کد به شکل زیر می باشد:

نوع علامت گذاری لیست های نامرتب در HTML

همانطور که در مثال قبلی مشاهده کردید در حالت پیش فرض آیتم های لیست های نامرتب به صورت دایره توپُر مشکی در مرورگرها نمایش داده می شوند. حال شما میتوانید نوع علامت گذاری را با استفاده از روش های زیر تغییر دهید.

استفاده از صفت Type در تگ UL
استفاده از ویژگی List-Style-Type از طریق زبان CSS

استفاده از صفت Type در تگ UL

این صفت در HTML5 منسوخ شده و پشتیبانی نمی شود. یعنی اگر الان شما ازش استفاده کنید، مشکلی ندارد و نشان داده می شود. اما اینکه میگوییم پشتیبانی نمی شود بدین معنی است که ممکن است همین فردا مرورگرها به کل این صفت را حذف کنند. به همین دلیل شما نیز سعی کنید از این صفت استفاده نکنید و از CSS به جای این صفت استفاده کنید. شکل کلی برای استفاده از صفت type در تگ <ul> بصورت زیر می باشد:

<ul type="Value">
<li>...</li>
<li>...</li>
</ul>

به جای Value میتوانید از مقادیر زیر استفاده کنید:

مقدار	توضیح
disc	گزینه پیش فرض
circle	علامت آیتم ها بصورت دایره توخالی می شود
square	علامت آیتم ها بصورت مربع توپُر می شود
none	این گزینه باعث می شود آیتم ها هیچگونه علامت گذاری نداشه باشند

<body>
 <ul type=square> 
<li>html</li> 
<li>css</li> 
<li>bootstrap</li>
 </ul>
 </body>

با قرار دادن square در type خروجی مانند تصویر زیر می شود:

لیست های مرتب در HTML

لیست های مرتب لیست هایی هستند که آیتم ها یا مقادیر آنها دارای ترتیب می باشند. در HTML برای ایجاد یک لیست مرتب باید از تگ <ol> و برای ایجاد آیتم های لیست از تگ <li> استفاده نمایید.

مثال شماره ۱ : ایجاد یک لیست مرتب شده

<body>

<ol>
<li>html</li>
<li>css</li>
<li>bootstrap</li>
</ol>

</body>

خروجی این کد به شکل زیر می باشد:

ویژگی یا attribute های لیست مرتب در html

برخلاف تگ <ul>، تگ <ol> دارای چندین ویژگی مهم هستند که مهم‌ ترین آن‌ ها شامل موارد زیر است:

ویژگی type
خاصیت start
خاصیت reserved

attribute یا ویژگی type در لیست‌های مرتب

attribute یا ویژگی type بر اساس نوع شماره‌گذاری که در زیر آورده شده است از کاراکترها یا اعداد مختلفی برای نشانگر هر آیتم در لیست استفاده می‌ کند. در این نوع لیست ها نیز همانند لیست های نامرتب ما می توانید نحوه شماره گذاری آیتم ها را به دلخواه با استفاده از مقادیر زیر در صفت type تنظیم نمایید. ( ولی همانطور که گفتیم صفت Type منسوخ شده است و از آن استفاده نکنید، به جایش از CSS مثال های کمی پایین تر استفاده کنید.)

مقدار	توضیح
۱	گزینه پیش فرض
A	شماره گذاری با حروف بزرگ انگلیسی
a	شماره گذاری با حروف کوچک انگلیسی
I	شماره گذاری با حروف بزرگ رومانی
i	شماره گذاری با حروف کوچک رومانی

تنظیم ویژگی start در لیست‌ های مرتب در html

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

<h3>OL start ="3" type="1"</h3>
<ol start="3">
    <li>HTML</li>
    <li>CSS</li>
    <li>bootstrap</li>
</ol>

<h3>OL start ="3" type="i"</h3>
<ol start="3" type="i">
    <li>HTML</li>
    <li>CSS</li>
    <li>bootstrap</li>
</ol>

<h3>OL start ="3" type="a"</h3>
<ol start="3" type="a">
    <li>HTML</li>
    <li>CSS</li>
    <li>bootstrap</li>
</ol>

attribute reserved در لیست‌های مرتب در html

این ویژگی دو مقدار true و false را می‌ گیرد. به‌ صورت پیش‌ فرض آن false می‌ باشد. در حالت پیش‌فرض ترتیب آیتم‌ های هر لیست به همان صورتی که در کد html آورده شده است، می‌ باشد. در حالتی که reserved مقدار true داشته باشد، ترتیب آیتم‌ ها به صورت برعکس در خروجی نمایش داده می‌ شود. به کد زیر توجه کنید.

<h3>OL reversed = "false" (Default)</h3>
<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>bootstrap</li>
</ol>

<h3>OL reversed = "true"</h3>
<ol reversed="true">
    <li>HTML</li>
    <li>CSS</li>
    <li>bootstrap</li>
</ol>

بررسی تگ <ol> در HTML 4.01 و HTML5

تگ <ol> در هر دو نسخه HTML 4.01 و HTML5 پشتیبانی می شود.
خصوصیت های ویژه start ،type و compact در HTML5 پشتیبانی نمی شوند.
خصوصیت ویژه reversed درون تگ <ol>
به عنوان یک خصوصیت ویژه تگ <ol> در HTML5 جدید است.

استفاده از دستورات CSS برای تنظیمات لیست‌ ها

با استفاده از دستورات CSS می‌ توانید تنظیمات زیر را برای لیست‌ ها انجام دهید:

تنظیم و انتخاب نوع marker در لیست‌های نامرتب
تنظیم و انتخاب نوع marker در لیست‌های مرتب
نتخاب یک تصویر به عنوان marker در لیست نامرتب
مشخص کردن محل قرارگیری marker در لیست مشخص

نحوه علامت گذاری لیست ها با استفاده از صفت Style

۱- list-style-type در CSS

ویژگی list-style-type در CSS برای تگ <ul> در لیست‌ های نامرتب به‌ کار برده می‌ شود. در مواقعی که بخواهید استایل هر آیتم را تنظیم کنید، استفاده می‌ شود و مقادیر زیر را می‌ تواند داشته باشد:

dist
circle
square
none

<h3>list-style-type: dist (Default)</h3>
<ul style="list-style-type: dist;">
    <li>HTML</li>
    <li>CSS</li>
    <li>bootstrap</li>
</ul>

<h3>list-style-type: circle</h3>
<ul style="list-style-type: circle;">
    <li>HTML</li>
    <li>CSS</li>
    <li>bootstrap</li>
</ul>

<h3>list-style-type: square</h3>
<ul style="list-style-type: square;">
    <li>HTML</li>
    <li>CSS</li>
    <li>bootstrap</li>
</ul>

<h3>list-style-type: none</h3>
<ul style="list-style-type: none;">
    <li>HTML</li>
    <li>CSS</li>
    <li>bootstrap</li>
</ul>

ویژگی list-style-type در CSS برای تگ <ul> لیست‌های مرتب، مقادیر زیر را می‌ تواند داشته باشد:

none
disc
circle
square
armenian
decim
cjk-ideographic
decimal-leading-zero
georgian
hebrew
hiragana
hiragana-iroha
katakana
katakana-iroha
lower-alpha
lower-greek
lower-latin
lower-roman
upper-alpha
upper-greek
upper-latin
upper-roman

۲- CSS list-style-image

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

<ul style="list-style-image: URL('../right-arrow-16.png')">
    <li>HTML</li>
    <li>CSS</li>
    <li>bootstrap</li>
</ul>

توجه: دستور list-style-image نسبت به دستور list-style-type اولویت دارد. در صورتی که تصویری توسط دستور list-style-image مشخص نشده باشد از مقداری که با توجه به دستور list-style-type مشخص شده است، نمایش داده می‌ شود.

۳- CSS list-style-position

ویژگی list-style-position برای تگ‌ های <ul> و <li> استفاده می‌ شود و برای تنظیم موقعیت marker هر کدام از آیتم‌ هاست. این ویژگی مقادیر زیر را می‌ تواند داشته باشد:

outside: در این حالت marker بیرون از هر آیتم لیست قرار می‌گیرد.
inside: در این حالت marker درون هر آیتم لیست قرار می‌گیرد.
initial
linherit

لیست های توضیحی در HTML

لیست های توضیحی لیستی از واژگان (اصطلاحات) هستند که در آن برای هر واژه توضیحی در نظر گرفته شده است. HTML از لیست های توضیحی پشتیبانی می کند. با استفاده از تگ <dl> می توان یک لیست توضیحی را تعریف کرد. برای ایجاد یک لیست با توضیحات در HTML باید از تگ <dl> و برای ایجاد آیتم ها از تگ <dt> و برای ایجاد توضیحات از تگ <dd> استفاده کرد.

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

خروجی لیست های توضیحی به شکل زیر می باشد:

لیست های تو در تو (Nested) در HTML

در زبان HTML شما می توانید لیست های تو در تو (ٔNested list) داشته باشید. به عبارتی یکی از آیتم های لیست شما خود یک لیستی از آیتم ها داشته باشد.

<html>
<body>
<h2>A Nested List</h2>
<p>Lists can be nested (list inside list):</p>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>

خروجی لیست های nested یا تو در تو به شکل زیر می باشد:

لیست های افقی با CSS

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

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

خروجی لیست افقی در html به شکل زیر می باشد:

مثال های بیشتر از لیست ها در HTML

مثال شماره ۱ : استفاده از عکس برای آیتم های یک لیست

<body>
 
<ul>
 <li><img src="images/cat.gif"></li>
 <li><img src="images/cat.gif"></li>
 <li><img src="images/cat.gif"></li>
</ul>
 
</body>

مثال شماره ۲ : ایجاد یک لیست تودرتو

<body>
 
<ul>
<li>ONE</li>
 <li>TWO
  <ul>
    <li>Three</li>
    <li>Four
     <ul>
      <li>Five</li>
      <li>Six</li>
     </ul>
    </li>
  </ul>
 </li>
<li>Seven</li>
<li>Eight</li>
</ul>
 
</body>

مثال شماره ۳ : استفاده از CSS برای خوشکل کردن لیست

<style>
 
body{
 direction:rtl;
}
 
ul.MyList{
 margin:0;
 padding:0;
 list-style-type:none;
}
 
ul.MyList li{
 background-color:#f2f2f2;
 margin:5px 0;
 padding:5px 10px;
 border-radius:25px;
}
 
ul.MyList li a{
 text-decoration:none;
 color:#000;
}
 
ul.MyList li:hover{
 background-color:#123456;
 color:#fff;
}
 
ul.MyList li:hover a{
 color:#fff;
}
 
</style>

سخن پایانی

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

برای دریافت پاسخ سوالات خود و بهره مند شدن از تجربه اساتید خبره و دیگر دوستانتان در کمپین آموزشی بی لرن می توانید سوالات خود را در کافه گپ و گفت مطرح نمایید و در سریعترین زمان، پاسخ سوال خود را دریافت نمایید. همچنین می توانید با عضویت در کمپین آموزشی بی لرن، از دوره های آموزشی رایگان و کاربردی در زمینه های مختلف به صورت تخصصی و حرفه ای بهره مند شوید.

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