لیست ها در html به دو صورت مرتب و نا مرتب می باشند.
لیست های نامرتب
لیست های نا مرتب با تگ Ul ایجاد گردیده و هر آیتم در این لیست بین دو تگ باز و بسته li قرار میگیرد.
<!DOCTYPE html> <html> <body> <h2>یک لیست نا مرتب</h2> <ul> <li>coffee</li> <li>tea</li> <li>milk</li> </ul> </body> </html>
خروجی کد بالا:
یک لیست نا مرتب
- coffee
- tea
- milk
در لیست های نا مرتب می توان علامت هر آیتم لیست را به اشکال دیگری نیز درآورد:
به شکل دایره تو خالی:
<!DOCTYPE html> <html> <body> <h2>Unordered List with Circle Bullets</h2> <ul style="list-style-type:circle"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html>
خروجی کد بالا:
به شکل مربعی:
<!DOCTYPE html> <html> <body> <h2>Unordered List with Square Bullets</h2> <ul style="list-style-type:square"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html>
خروجی کد بالا:
بدون علامت:
<!DOCTYPE html> <html> <body> <h2>Unordered List without Bullets</h2> <ul style="list-style-type:none"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html>
خروجی کد بالا:
لیست های مرتب
لیست های مرتب با تگ ol ایجاد شده و هر آیتم از این لیست باید بین تگ باز و بسته li قرار گیرد، بصورت پیشفرض آیتم های این لیست با اعداد شماره گذاری می شوند اما به کمک اتریبیوت type در تگ ol میتوان حروف انگلیسی بزرگ و کوچک و همچنین حروف رومی بزرگ و کوچک را برای علامت گزاری در این لیست تعیین نمود. در زیر تمامی موارد گفته شده را با کد و خروجی مشاهده فرمایید:
<!DOCTYPE html> <html> <body> <h2>یک لیست مرتب </h2> <ol type="1"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html>
خروجی کد بالا:
یک لیست مرتب
- coffee
- tea
- milk
استفاده از type=A برای به کار بردن از حروف بزرگ انگلیسی
<!DOCTYPE html> <html> <body> <h2>Ordered List with Letters</h2> <ol type="A"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html>
خروجی کد بالا:
اگر در کد بالا بجای A از a استفاده نماییم حروف کوچک انگلیسی بجای حروف بزرگ در لیست ظاهر می گردد.
استفاده از type=I وبه کار بردن از حروف بزرگ رومی
<!DOCTYPE html> <html> <body> <h2>Ordered List with Roman Numbers</h2> <ol type="I"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html>
خروجی کد بالا:
اگر در کد بالا بجای I از i استفاده نماییم حروف کوچک رومی بجای حروف بزرگ در لیست ظاهر می گردد.
لیست توضیح در HTML
این لیست با تگ dl ایجاد می شود. در این تگ هر کدام از ایتم ها یک توضیحی را نیز در بر میگیرند که محتوای هر آیتم باید بین تگ باز و بسته dt و محتوای توضیح هر آیتم باید بین تگ باز و بسته dd قرار گیرد. برای درک بهتر این نوع لیست به کد و خروجی آن در زیر توجه فرمایید:
<!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 زیر یک لیست تو در تو را ایجاد می نماید:
<!DOCTYPE html> <html> <body> <h2>A Nested List</h2> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul> </body> </html>
خروجی کد بالا: