لیست ها در HTML

یک نمونه از لیست ها در HTML

لیست مرتب نشده (Unordered List)

  • آیتم
  • آیتم
  • آیتم
  • آیتم

لیست مرتب شده (Ordered)

  1. آیتم اول
  2. آیتم دوم
  3. آیتم سوم
  4. آیتم چهارم

برای تمرین لیست های بدون ترتیب (بالت) یا مرتب شده (شماره گذاری)، کد زیر را در یک ویرایشگر متن مثل نوت پد کپی کرده و با پسوند html ذخیره و سپس با مرورگر خود باز کنید:

<!DOCTYPE html>
<html>
<body>
<h2>An Unordered HTML List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An Ordered HTML List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>

لیست بدون ترتیب در HTML

لیست مرتب نشده یا بدون ترتیب با تگ <ul> شروع می شود. هر آیتم لیست نیز با تگ <li> خاتمه می یابد.

به طور پیش فرض این نوع لیست ها توسط یک بالت (دایره مشکی توپر کوچک) مشخص می گردد:

مثل قطعه کد زیر در مثال بالا:

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

طریقه انتخاب نشانه لیست در لیست های مرتب نشده HTML

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

مقدار خصیصه

شرح

دیسک (disc)

نشانه آیتم لیست را به بالت ست می کند (پیش فرض)

دایره (circle)

نشانگر آیتم های لیست را به یک دایره تو خالی ست می کند

مربع (square)

نشانگر آیتم های لیست را به یک مربع توپر ست می کند

هیچکدام (none)

لیست را بدون نشانه نمایش می دهد

در ادامه مثال هر یک از این انواع نشانگر لیست بدون ترتیب در HTML آمده است.

مثال – دیسک

<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

مثال – دایره

<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

مثال – مربع

<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

مثال – هیچکدام

<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

برای تمرین لیست مرتب نشده با نشانه های مختلف دیسک، دایره، مربع و بدون نشانه؛ کد زیر را در یک ویرایشگر متن کپی کرده و سپس با پسوند html ذخیره کنید و با مرورگر مورد علاقه خود باز کنید:

<!DOCTYPE html>
<html>
<body>

<h2>Unordered List with Disc Bullets</h2>
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<h2>Unordered List with Circle Bullets</h2>
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>Unordered List with Square Bullets</h2>
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<h2>Unordered List without Bullets</h2>
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>

نتیجه اجرای این قطعه کد در مرورگر به شکل زیر خواهد بود:

برای تمرین لیست مرتب نشده با نشانه های مختلف دیسک، دایره، مربع و بدون نشانه؛ کد زیر را در یک ویرایشگر متن کپی کرده و سپس با پسوند html ذخیره کنید و با مرورگر مورد علاقه خود باز کنید

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

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

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

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

لیست HTML مرتب شده – خصیصه نوع

لیست مرتب شده دارای خصیصه type است که در تگ <ol> استفاده می شود و نوع نشانگر لیست را تعیین می کند:

خصیصه Type

شرح

type="1"

در این لیست اقلام با عدد گذاری مرتب می شوند و از یک شروع می شود (پیش فرض)

type="A"

لیست اقلام با استفاده از حروف بزرگ انگلیسی شماره گذاری می شوند

type="a"

لیست اقلام با استفاده از حروف کوچک انگلیسی شماره گذاری می شوند

type="I"

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

type="i"

لیست اقلام با استفاده از اعداد لاتین حروف کوچک شماره گذاری می شوند

در اینجا مثالی از انواع لیست مرتب شده آمده است:

اعداد:

<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

الفبای حروف بزرگ:

<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

الفبای حروف کوچک:

<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

عدد لاتین حروف بزرگ:

<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

عدد لاتین حروف کوچک:

<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

برای تمرین انواع لیست های مرتب شده در HTML کد زیر را در یک ویرایشگر متن کپی کرده و سپس با پسوند html ذخیره کنید و با مرورگر مورد علاقه خود باز کنید:

<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Numbers</h2>
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<h2>Ordered List with Letters</h2>
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<h2>Ordered List with Lowercase Letters</h2>
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<h2>Ordered List with Roman Numbers</h2>
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<h2>Ordered List with Lowercase Roman Numbers</h2>
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>

خروجی اجرای کد فوق به صورت زیر خواهد بود:

برای تمرین انواع لیست های مرتب شده در HTML کد زیر را در یک ویرایشگر متن کپی کرده و سپس با پسوند html ذخیره کنید و با مرورگر مورد علاقه خود باز کنید

لیست های تشریحی در HTML

در زبان HTML5 از لیست های تشریحی نیز پشتیبانی می شود.

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

برای تعریف لیست تشریحی از تگ <dl> استفاده می شود، عبارات یا اصطلاحات لیست (اسامی) با تگ <dt> و شرح هر یک از اصطلاحات یا اسامی با تگ <dd> مشخص می شود. مثال:

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

برای تست این نوع لیست تشریحی در HTML کد زیر را در یک ویرایشگر متن کپی کرده و سپس با پسوند html ذخیره کنید و با مرورگر مورد علاقه خود باز کنید:

<!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>

نتیجه اجرای این کد به صورت زیر خواهد بود:

برای تست این نوع لیست تشریحی در HTML کد زیر را در یک ویرایشگر متن کپی کرده و سپس با پسوند html ذخیره کنید و با مرورگر مورد علاقه خود باز کنید

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

در HTML می توان لیست های تو در تو ایجاد کرد. لیست تودرتو به معنی چند لیست داخل هم است. مثل:

<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

نتیجه اجرای کد فوق به صورت زیر خواهد بود:

با استفاده از CSS می توان لیست های HTML را به شیوه های مختلفی استیل بندی کرد. یکی از معروف ترین و پر مصرف ترین لیست ها، لیست افقی (Horizontal Lists) در HTML است، که بخصوص برای ایجاد منو در وبسایت استفاده می شود. مثل

توجه: اقلام یک لیست تو در تو می تواند یک لیست جدید یا هر عنصر دیگری از HTML مثل تصاویر، لینک ها و غیره باشد.

لیست های افقی

با استفاده از CSS می توان لیست های HTML را به شیوه های مختلفی استیل بندی کرد. یکی از معروف ترین و پر مصرف ترین لیست ها، لیست افقی (Horizontal Lists) در HTML است، که بخصوص برای ایجاد منو در وبسایت استفاده می شود. مثل:

<!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>

حاصل اجرای کد فوق به صورت زیر خواهد بود:

با استفاده از CSS می توان لیست های HTML را به شیوه های مختلفی استیل بندی کرد. یکی از معروف ترین و پر مصرف ترین لیست ها، لیست افقی (Horizontal Lists) در HTML است، که بخصوص برای ایجاد منو در وبسایت استفاده می شود.

خلاصه لیست های در HTML

  • برای تعریف لیست بدون ترتیب در HTML از تگ <ul> استفاده می شود
  • می توان خصیصه list-style-type از CSS را برای سفارشی سازی نوع بالت لیست مرتب نشده استفاده کرد
  • برای تعریف لیست مرتب شده در HTML از تگ <ol> استفاده می شود
  • می توان خصیصه type از CSS را برای سفارشی سازی نوع عدد گذاری لیست مرتب شده استفاده کرد
  • برای تعیین اقلام هر لیست از تگ <li> استفاده می شود
  • در HTML می توان با استفاده از تگ <dl> لیست تشریحی ایجاد کرد
  • برای تعریف عبارت یا اصطلاح لیست تشریحی از تگ <dt> استفاده می شود
  • برای تعیین شرح هر یک از اقلام لیست تشریحی از تگ <dd> استفاده می شود
  • در HTML می توان لیست داخل هم یا لیست تو در تو ایجاد کرد.
  • اقلام لیست می تواند سایر عناصر HTML مثل تصویر یا لینک یا پاراگرافی از متن باشد
  • با استفاده از خصیصه های CSS مثل float:left یا display:inline لیست افقی تعریف کرد، مثلا برای ساخت منو در HTML

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

در جدول زیر تگ های مورد استفاده برای تعریف لیست در HTML آمده است:

<ul>

تعریف لیست بدون ترتیب در HTML

<ol>

تعریف لیست مرتب شده در HTML

<li>

تعریف اقلام لیست در HTML

<dl>

تعریف یک لیست تشریحی (توصیفی)

<dt>

تعریف عبارات یا اصطلاحات یک لیست تشریحی

<dd>

تعریف شرح عبارات یا اصطلاحات یک لیست تشریحی

توجه: در اینجا اساس نوشتن کد لیست در HTML آمده است. می توان با استفاده از کلاس های CSS لیست ها را قالب بندی کرده و بجای بالت یا عدد از هر نشانه دیگری استفاده کرد، مثل تصویر یا متن بجای بالت و شماره گذاری.

اگر در اجرای این راهنما به مشکل برخورد کردید و سایر سئوالات و پیشنهادات خود را در بخش سئوالات عمومی انجمن پلکسا مطرح نمایید. گروه توسعه وب پلکسا به سئوالات شما پاسخ خواهند داد.

عضویت در خبرنامه پلکسا

در صورت تمایل ایمیل خود را وارد کنید و تازه های پلکسا را از طریق ایمیل دریافت کنید. خبرنامه الکسا هفته نامه بوده و حاوی جدیدترین مطالب و نشریات پلکسا است.

با ما شریک شوید

با ما باشید

قابل توجه وبمسترها

وبمستر گرامی

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