لیست در HTML چیست؟ آموزش ul، ol و dl با مثال

لیست در HTML روشی برای گروه‌بندی آیتم‌های مرتبط و مشخص‌کردن رابطه معنایی میان آن‌هاست. اگر ترتیب موارد اهمیتی نداشته باشد از ul، اگر ترتیب بخشی از معنی باشد از ol و اگر محتوا از نام‌ها و توضیح یا مقدار مرتبط تشکیل شده باشد از dl استفاده می‌کنیم. در این آموزش، ساختار ul، ol و dl را با مثال یاد می‌گیرید، با نقش li، dt و dd آشنا می‌شوید و می‌بینید لیست‌های تو در تو چگونه به‌درستی ساخته می‌شوند. همچنین تفاوت ساختار HTML با ظاهر لیست در CSS، خطاهای رایج در جای‌گذاری آیتم‌ها و روش بررسی صحت Markup را مرور می‌کنیم. در پایان می‌توانید براساس معنای محتوا، نوع لیست مناسب را انتخاب کنید و ساختاری بسازید که هم خوانا باشد و هم از نظر HTML رابطه درست بین آیتم‌ها را حفظ کند.

برای ساخت یک لیست در HTML فقط کافی نیست چند آیتم را زیر هم قرار دهیم؛ باید مشخص کنیم رابطه بین این آیتم‌ها چیست. اگر ترتیب موارد اهمیتی نداشته باشد از ul، اگر ترتیب بخشی از معنی باشد از ol و اگر با مجموعه‌ای از نام‌ها و توضیح یا مقدار مربوط به آن‌ها سروکار داشته باشیم از dl استفاده می‌کنیم.

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

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

لیست در HTML چیست و چه انواعی دارد؟

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

برای کاربردهایی که در این مقاله بررسی می‌کنیم، سه ساختار اصلی را باید بشناسیم: ul برای لیست نامرتب، ol برای لیست مرتب و dl برای لیست توضیحی. تفاوت ul و ol به ظاهر بولت یا شماره محدود نمی‌شود؛ معیار اصلی این است که آیا تغییر ترتیب آیتم‌ها معنای فهرست را تغییر می‌دهد یا نه. اگر ترتیب اهمیتی نداشته باشد، ul انتخاب مناسبی است؛ اگر ترتیب بخشی از معنا باشد، باید از ol استفاده کنیم.

نوع لیست	چه زمانی مناسب است؟	مثال
ul	وقتی آیتم‌ها به هم مرتبط‌اند اما ترتیب آن‌ها معنای خاصی ندارد	فهرست وسایل موردنیاز یک پروژه
ol	وقتی ترتیب، اولویت یا توالی آیتم‌ها مهم است	مراحل ساخت و انتشار یک صفحه
dl	وقتی با مجموعه‌ای از نام‌ها یا اصطلاحات و توضیح مربوط به آن‌ها سروکار داریم	واژه‌نامه یا فهرست مشخصات

ساختار dl کمی متفاوت است. در این نوع لیست، معمولاً یک یا چند اصطلاح یا نام با dt مشخص می‌شوند و توضیح یا مقدار مربوط به آن‌ها در dd قرار می‌گیرد. به همین دلیل، dl برای ساختارهایی مثل واژه‌نامه، مشخصات یا مجموعه‌های «نام و توضیح» مناسب است.

یک روش ساده برای انتخاب نوع لیست این است که قبل از نوشتن کد از خودتان بپرسید: اگر جای آیتم‌ها را عوض کنم، معنی محتوا تغییر می‌کند؟ اگر پاسخ «نه» باشد، معمولاً ul مناسب است. اگر پاسخ «بله» باشد، احتمالاً به ol نیاز دارید. اگر اصلاً با مجموعه‌ای از «نام و توضیح» روبه‌رو هستید، dl گزینه مرتبط‌تری است.

نکته دیگر اینکه نباید نوع لیست را فقط براساس ظاهر آن انتخاب کنید. مرورگرها معمولاً ul را با نشانه‌های بولت و ol را با شماره نمایش می‌دهند، اما این ظاهر قابل تغییر است؛ معنای ساختار HTML باید مستقل از شکل نمایش انتخاب شود.

لیست‌ها یکی از ساختارهای پایه محتوایی HTML هستند. اگر برای درک جایگاه آن‌ها در ساختار یک سند به مرور بیشتری نیاز دارید، راهنمای HTML چیست و چه کاربردی دارد؟ مسیر کلی را توضیح می‌دهد.

در بخش بعدی، از این مدل ذهنی وارد اولین ساختار عملی می‌شویم و می‌بینیم لیست نامرتب با ul و li چگونه ساخته می‌شود.

ساخت لیست نامرتب در HTML با ul و li

وقتی چند مورد به یک موضوع تعلق دارند اما ترتیب قرارگرفتن آن‌ها بخشی از معنا نیست، از لیست نامرتب یا ul استفاده می‌کنیم. برای مثال، اگر بخواهیم ابزارهای موردنیاز یک پروژه را فهرست کنیم، جابه‌جایی «ویرایشگر کد» و «مرورگر» ماهیت فهرست را تغییر نمی‌دهد؛ بنابراین ul انتخاب مناسبی است. استاندارد HTML نیز ul را برای فهرستی تعریف می‌کند که ترتیب آیتم‌های آن اهمیت معنایی ندارد.

ساختار پایه یک لیست نامرتب از یک عنصر ul و تعدادی عنصر li تشکیل می‌شود. هر li یک آیتم مستقل از آن لیست را مشخص می‌کند.

مثال زیر را می‌توانید داخل body یک فایل HTML قرار دهید:

				
					<h3>ابزارهای موردنیاز برای شروع</h3>
<ul>
  <li>ویرایشگر کد</li>
  <li>مرورگر وب</li>
  <li>فایل HTML</li>
</ul>

در این ساختار، ul محدوده کل لیست را مشخص می‌کند و هر جفت تگ li محتوای یکی از آیتم‌ها را در خود نگه می‌دارد:

├── li → ویرایشگر کد

├── li → مرورگر وب

└── li → فایل HTML

در نمایش معمول مرورگر، سه آیتم جدا دیده می‌شوند و برای آن‌ها نشانگر لیست نمایش داده می‌شود. شکل این نشانگر بخشی از معنای ul نیست و ظاهر آن را می‌توان در مرحله طراحی با CSS تغییر داد.

هر آیتم لیست باید داخل li قرار بگیرد

در یک ul، مواردی که قرار است عضو لیست باشند با li مشخص می‌شوند. بنابراین نوشتن متن آیتم‌ها مستقیماً داخل ul، بدون li، ساختار صحیح یک لیست HTML را ایجاد نمی‌کند. مدل محتوایی فعلی ul نیز آیتم‌های لیست را به‌صورت عناصر li تعریف می‌کند.

برای مثال، این ساختار را ننویسید:

				
					<ul>
  HTML
  CSS
  JavaScript
</ul>

ساختار صحیح چنین است:

				
					<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

یک نکته فنی این است که استاندارد HTML در بعضی شرایط اجازه می‌دهد تگ پایانی li در کد HTML حذف شود؛ اما در مثال‌های آموزشی این مقاله آن را صریح می‌نویسیم تا مرز هر آیتم واضح بماند و خواندن و ویرایش ساختار ساده‌تر شود.

پس برای ساخت یک لیست نامرتب، این الگوی ساده را به خاطر بسپارید:

				
					<ul>
  <li>آیتم اول</li>
  <li>آیتم دوم</li>
  <li>آیتم سوم</li>
</ul>

در اینجا سؤال تعیین‌کننده همچنان همان سؤال بخش قبل است: آیا تغییر ترتیب آیتم‌ها معنای فهرست را عوض می‌کند؟ اگر نه، ul معمولاً ساختار مناسب است. اگر ترتیب واقعاً اهمیت داشته باشد، باید سراغ ol برویم؛ ساختاری که در بخش بعدی بررسی می‌کنیم.

ساخت لیست مرتب در HTML با ol و li

وقتی ترتیب آیتم‌ها بخشی از معنی محتواست، از لیست مرتب یا ol استفاده می‌کنیم. نمونه واضح آن مراحل انجام یک کار است: اگر مرحله سوم را قبل از مرحله اول قرار دهیم، دیگر همان فرایند را بیان نمی‌کنیم. استاندارد فعلی HTML نیز ol را برای فهرستی تعریف می‌کند که آیتم‌های آن عمداً مرتب شده‌اند و تغییر ترتیبشان می‌تواند معنای محتوا را تغییر دهد.

ساختار پایه ol شبیه ul است؛ تفاوت اصلی در رابطه معنایی بین آیتم‌هاست. خود لیست با ol مشخص می‌شود و هر مورد داخل یک li قرار می‌گیرد:

				
					<ol>
  <li>فایل index.html را ایجاد کنید.</li>
  <li>ساختار پایه HTML را بنویسید.</li>
  <li>فایل را در مرورگر باز کنید.</li>
</ol>

در نمایش معمول مرورگر، آیتم‌های ol با یک شمارنده مانند ۱، ۲ و ۳ دیده می‌شوند؛ اما دلیل انتخاب ol وجود شماره‌ها نیست، بلکه مهم بودن ترتیب آیتم‌هاست.

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

├── li → ایجاد فایل index.html

├── li → نوشتن ساختار پایه HTML

└── li → باز کردن فایل در مرورگر

اگر دو مرحله را جابه‌جا کنیم، ممکن است ترتیب منطقی انجام کار به هم بخورد. همین موضوع نشان می‌دهد که چرا در این مثال ol انتخاب مناسب‌تری از ul است.

تفاوت ol و ul را از روی معنا تشخیص دهید

فرض کنید می‌خواهیم سه فناوری موردنیاز یک پروژه را فهرست کنیم:

				
					<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

اگر در این مثال جای CSS و JavaScript را عوض کنیم، هنوز با همان مجموعه فناوری‌ها روبه‌رو هستیم. پس صرفاً برای نمایش یک فهرست، نیازی به ol نداریم.

اما اگر محتوا مراحل انتشار یک صفحه باشد:

				
					<ol>
  <li>کد را بررسی کنید.</li>
  <li>فایل را روی سرور قرار دهید.</li>
  <li>صفحه منتشرشده را بررسی کنید.</li>
</ol>

ترتیب این موارد اطلاعاتی درباره توالی انجام کار منتقل می‌کند. در چنین شرایطی استفاده از ol معنای ساختار را بهتر بیان می‌کند. MDN نیز پیشنهاد می‌کند برای تصمیم بین ol و ul تصور کنید جای آیتم‌ها عوض شده است؛ اگر معنی تغییر می‌کند، ol انتخاب مناسبی است.

عنصر ol ویژگی‌هایی مانند start، reversed و type هم دارد که می‌توانند نحوه شماره‌گذاری فهرست را کنترل کنند. بااین‌حال، این ویژگی‌ها معیار انتخاب بین ol و ul نیستند و وارد جزئیات آن‌ها نمی‌شویم؛ هدف این بخش یادگیری ساختار اصلی و انتخاب معنایی درست است.

پس هنگام انتخاب ol به ظاهر شماره‌دار آن تکیه نکنید. سؤال اصلی این است: آیا جای آیتم‌ها در انتقال معنی، ترتیب مراحل یا اولویت محتوا اهمیت دارد؟ اگر پاسخ مثبت است، احتمالاً با یک لیست مرتب سروکار دارید.

در بخش بعدی سراغ نوع متفاوتی از لیست می‌رویم؛ ساختاری که به‌جای «آیتم‌های مرتب یا نامرتب»، برای نمایش رابطه میان نام یا اصطلاح و توضیح مربوط به آن طراحی شده است.

ساخت لیست توضیحی با dl، dt و dd

نوع سوم لیست در HTML با dl ساخته می‌شود. این ساختار زمانی مناسب است که محتوا از گروه‌های «نام و مقدار/توضیح» تشکیل شده باشد؛ برای مثال اصطلاح و تعریف آن، مشخصه و مقدار آن یا سؤال و پاسخ مرتبط. استاندارد فعلی HTML، dl را فهرستی از گروه‌های نام–مقدار (Description List) توصیف می‌کند؛ بنابراین کاربرد آن فقط به ساخت واژه‌نامه محدود نیست.

در ساده‌ترین حالت، سه عنصر در این ساختار نقش اصلی دارند:

dl محدوده کل لیست توضیحی را مشخص می‌کند.
dt نام یا اصطلاح هر گروه را مشخص می‌کند.
dd توضیح، تعریف یا مقدار مرتبط با آن را دربر می‌گیرد.

برای مثال، اگر بخواهیم چند اصطلاح پایه HTML را همراه با توضیح آن‌ها نمایش دهیم، می‌توانیم چنین ساختاری بنویسیم:

				
					<dl>
  <dt>HTML</dt>
  <dd>زبانی برای ساختاردهی محتوای صفحات وب است.</dd>

  <dt>Element</dt>
  <dd>یکی از اجزای تشکیل‌دهنده ساختار یک سند HTML است.</dd>

  <dt>Attribute</dt>
  <dd>اطلاعات یا تنظیمات بیشتری درباره یک عنصر مشخص می‌کند.</dd>
</dl>

رابطه مهم در کد بالا را می‌توان به این شکل دید:

├── dt → HTML

│ └── dd → توضیح HTML

├── dt → Element

│ └── dd → توضیح Element

└── dt → Attribute

└── dd → توضیح Attribute

پس برخلاف ul و ol که هر مورد اصلی آن‌ها با li مشخص می‌شود، در dl با گروه‌هایی از نام و توضیح یا مقدار مرتبط سروکار داریم. به همین دلیل، نباید صرفاً برای ایجاد تورفتگی یا ظاهر دو ستونه از dl استفاده کنیم؛ ساختار HTML باید رابطه واقعی محتوا را بیان کند و ظاهر به CSS سپرده شود.

چه زمانی dl انتخاب مناسب‌تری است؟

فرض کنید می‌خواهیم مشخصات یک فایل را نمایش دهیم:

				
					<dl>
  <dt>نام فایل</dt>
  <dd>index.html</dd>

  <dt>نوع فایل</dt>
  <dd>HTML</dd>

  <dt>مسیر</dt>
  <dd>پوشه اصلی پروژه</dd>
</dl>

اینجا محتوا یک مجموعه ساده از آیتم‌های هم‌سطح نیست. «نام فایل» با index.html رابطه دارد، «نوع فایل» با HTML و «مسیر» با مقدار مربوط به خودش. در چنین حالتی مدل نام–مقدار dl معنای محتوا را بهتر از ul یا ol منتقل می‌کند.

ساختار dl به الگوی یک‌به‌یک محدود نیست. HTML اجازه می‌دهد یک گروه شامل یک یا چند dt و یک یا چند dd باشد؛ برای مثال چند نام می‌توانند به یک مقدار مشترک مربوط باشند یا یک نام چند مقدار یا توضیح داشته باشد.

برای شروع، همان الگوی ساده و خوانای dt → dd کافی است و بهتر است فقط زمانی سراغ گروه‌های پیچیده‌تر بروید که خود داده چنین رابطه‌ای داشته باشد.

اگر می‌خواهید درباره عنصر dd، ساختار مجاز آن و کاربردهای اختصاصی‌اش عمیق‌تر بخوانید، راهنمای تگ dd در HTML جزئیات بیشتری ارائه می‌دهد.

در نتیجه، انتخاب میان سه نوع لیست را می‌توان با یک سؤال سریع جمع‌بندی کرد: اگر با مجموعه‌ای از آیتم‌های بدون ترتیب معنایی روبه‌رو هستید ul، اگر ترتیب مهم است ol، و اگر محتوا از نام‌ها و توضیح‌ها یا مقادیر مرتبط با آن‌ها تشکیل شده است، dl را بررسی کنید.

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

چطور لیست تو در تو در HTML بسازیم؟

گاهی یک آیتم خودش شامل چند زیرمورد است. در چنین حالتی می‌توانیم یک لیست را داخل لیست دیگری قرار دهیم و یک لیست تو در تو (Nested List) بسازیم. نکته کلیدی این است که زیرلیست باید داخل همان li قرار بگیرد که از نظر معنایی به آن تعلق دارد؛ نه اینکه مستقیماً کنار liها داخل ul یا ol قرار داده شود. این ساختار با مدل محتوایی فعلی HTML و نمونه‌های مرجع MDN هم‌راستاست.

فرض کنید می‌خواهیم موضوعات یک مسیر یادگیری را همراه با زیرموضوع‌های هر بخش نمایش دهیم:

				
					
<ul>
  <li>HTML
    <ul>
      <li>ساختار سند</li>
      <li>لینک‌ها</li>
      <li>لیست‌ها</li>
    </ul>
  </li>

  <li>CSS</li>
  <li>JavaScript</li>
</ul>

ساختار آن را می‌توان به‌صورت ساده این‌طور دید:

├── li → HTML

│ └── ul

│ ├── li → ساختار سند

│ ├── li → لینک‌ها

│ └── li → لیست‌ها

├── li → CSS

└── li → JavaScript

در این مثال، سه مورد «ساختار سند»، «لینک‌ها» و «لیست‌ها» زیرمجموعه HTML هستند؛ بنابراین ul داخلی داخل همان li مربوط به HTML قرار گرفته است.

زیرلیست را مستقیماً داخل ul قرار ندهید

یکی از خطاهای ساختاری رایج در هنگام ساخت لیست تو در تو این است که زیرلیست را خارج از li مربوط به آن بنویسیم:

				
					<ul>
  <li>HTML</li>
  <ul>
    <li>ساختار سند</li>
    <li>لیست‌ها</li>
  </ul>
  <li>CSS</li>
</ul>

این ساختار برای یک ul صحیح نیست، چون محتوای مستقیم ul باید از آیتم‌های مجاز آن، از جمله li، تشکیل شود؛ خود زیرلیست باید درون آیتمی قرار بگیرد که به آن وابسته است.

نسخه درست چنین است:

				
					<ul>
  <li>
    HTML
    <ul>
      <li>ساختار سند</li>
      <li>لیست‌ها</li>
    </ul>
  </li>

  <li>CSS</li>
</ul>

می‌توان ul و ol را با هم ترکیب کرد

لیست تو در تو لازم نیست حتماً از همان نوع لیست والد باشد. اگر رابطه معنایی محتوا تغییر کند، می‌توان داخل ul یک ol قرار داد یا برعکس. MDN نیز ترکیب و تو‌در‌تو کردن ul و ol را در صورت تناسب با ساختار محتوا مجاز می‌داند.

برای مثال، ممکن است یک فهرست نامرتب از موضوعات داشته باشیم، اما داخل یکی از آن‌ها مراحلی قرار بگیرد که ترتیبشان مهم است:

				
					<ul>
  <li>راه‌اندازی پروژه
    <ol>
      <li>فایل index.html را بسازید.</li>
      <li>ساختار پایه را بنویسید.</li>
      <li>فایل را در مرورگر باز کنید.</li>
    </ol>
  </li>

  <li>یادگیری تگ‌های HTML</li>
</ul>

اینجا لیست اصلی ul است، چون ترتیب دو موضوع اصلی ضرورت معنایی ندارد؛ اما زیرلیست با ol ساخته شده، چون مراحل راه‌اندازی پروژه دارای توالی هستند.

پس هنگام ساخت لیست تو در تو دو تصمیم جدا دارید: اول، زیرلیست به کدام li تعلق دارد؟ دوم، ترتیب آیتم‌های همان زیرلیست مهم است یا نه؟ پاسخ سؤال اول جای صحیح زیرلیست را مشخص می‌کند و پاسخ سؤال دوم تعیین می‌کند که باید از ul یا ol استفاده کنید.

در بخش بعدی، یک مرز مهم را روشن می‌کنیم: ساختار و معنای لیست وظیفه HTML است، اما شکل نمایش بولت‌ها، شماره‌ها و فاصله‌ها عمدتاً به CSS مربوط می‌شود.

ساختار لیست با ظاهر لیست چه تفاوتی دارد؟

در HTML، انتخاب ul یا ol باید براساس معنای محتوا انجام شود، نه شکل ظاهری آن. ul برای مجموعه‌ای است که ترتیب آیتم‌هایش اهمیت معنایی ندارد و ol زمانی استفاده می‌شود که ترتیب آیتم‌ها مهم باشد. اینکه مرورگر یکی را معمولاً با بولت و دیگری را با شماره نمایش می‌دهد، نتیجه شیوه نمایش پیش‌فرض است و نباید معیار انتخاب تگ باشد.

به زبان ساده، وظایف را می‌توان این‌طور جدا کرد:

HTML	CSS
مشخص می‌کند محتوا یک لیست است	ظاهر لیست را کنترل می‌کند
رابطه و نوع لیست را تعیین می‌کند	نوع و شکل نشانگر را تغییر می‌دهد
مشخص می‌کند ترتیب آیتم‌ها معنا دارد یا نه	فاصله، موقعیت و شیوه نمایش را تنظیم می‌کند

برای مثال، فرض کنید این لیست را داریم:

				
					<ul class="tools">
  <li>ویرایشگر کد</li>
  <li>مرورگر</li>
  <li>DevTools</li>
</ul>

انتخاب ul به این دلیل است که جابه‌جایی این سه مورد، معنای فهرست را تغییر نمی‌دهد. اگر بخواهیم شکل نشانگرهای آن متفاوت باشد، لازم نیست ساختار HTML را عوض کنیم؛ می‌توانیم ظاهر را با CSS تغییر دهیم:

				
					.tools {
  list-style-type: square;
}

ویژگی list-style-type در CSS نوع نشانگر آیتم‌های لیست را تعیین می‌کند. این ویژگی به آیتم‌های لیست اعمال می‌شود و چون ارثی است، معمولاً می‌توان آن را روی ul یا ol تنظیم کرد تا آیتم‌های آن‌ها همان مقدار را دریافت کنند.

برای تغییر ظاهر، نوع لیست را عوض نکنید

فرض کنید مراحل انجام یک کار را با ol نوشته‌اید:

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

اگر طراحی صفحه ایجاب کند که شماره‌ها دیده نشوند یا شکل دیگری داشته باشند، این موضوع به‌تنهایی دلیلی برای تبدیل ol به ul نیست. ترتیب مراحل همچنان بخشی از معنای محتواست؛ بنابراین ساختار HTML باید ol باقی بماند و تغییر ظاهری در لایه CSS انجام شود.

همین قاعده درباره ul نیز برقرار است. نباید فقط برای اینکه «شماره می‌خواهیم» یک مجموعه نامرتب را به ol تبدیل کنیم. در HTML ابتدا باید رابطه درست میان داده‌ها را مشخص کنیم و بعد درباره ظاهر تصمیم بگیریم.

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

پس ترتیب تصمیم‌گیری بهتر است این باشد: ابتدا نوع لیست را از روی معنای محتوا انتخاب کنید؛ سپس ظاهر آن را با CSS تنظیم کنید. با این تفکیک، حتی اگر طراحی صفحه بعداً تغییر کند، ساختار HTML همچنان معنای درست محتوا را حفظ می‌کند.

در بخش بعدی، چند خطای مهم را کنار هم می‌گذاریم تا بتوانید ساختار یک لیست HTML را بررسی کنید و تشخیص دهید انتخاب تگ‌ها و رابطه بین آن‌ها درست است یا نه.

اشتباهات رایج در ساخت لیست‌های HTML و روش بررسی آن‌ها

بیشتر خطاهای ساختاری در لیست‌های HTML با چند بررسی ساده پیدا می‌شوند: آیا هر آیتم در جای درست قرار گرفته است؟ نوع لیست با معنای محتوا هماهنگ است؟ زیرلیست به li مربوط به خودش تعلق دارد؟ و در dl رابطه بین dt و dd درست شکل گرفته است؟ بررسی این موارد مهم‌تر از ظاهر نهایی لیست در مرورگر است.

۱. نوشتن آیتم‌ها مستقیماً داخل ul یا ol

در یک ul یا ol، آیتم‌های اصلی لیست باید با li مشخص شوند. استاندارد HTML نیز li را عنصر آیتم این لیست‌ها تعریف می‌کند.

برای مثال، این ساختار صحیح نیست:

				
					<ul>
  HTML
  CSS
  JavaScript
</ul>
هر مورد باید داخل li قرار بگیرد:
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

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

۲. انتخاب ul و ol فقط براساس بولت یا شماره

شماره‌دار بودن ظاهر یک لیست، به‌تنهایی دلیل استفاده از ol نیست. تفاوت معنایی این دو عنصر به اهمیت ترتیب آیتم‌ها مربوط است: در ol ترتیب معنادار است، اما در ul جابه‌جایی آیتم‌ها نباید معنای فهرست را به‌طور اساسی تغییر دهد.

برای تشخیص، آیتم‌ها را در ذهن جابه‌جا کنید:

اگر محتوا همچنان همان معنی را دارد، معمولاً ul مناسب است.
اگر ترتیب مراحل، رتبه یا توالی اطلاعات از بین می‌رود، ol انتخاب مناسب‌تری است.

ظاهر نشانگرها را بعداً می‌توان با CSS تنظیم کرد؛ بنابراین ساختار HTML را قربانی شکل ظاهری نکنید.

۳. قرار دادن زیرلیست بیرون از li مربوط به آن

در لیست‌های تو در تو، زیرلیست باید داخل آیتمی قرار بگیرد که از نظر معنایی زیرمجموعه آن است. MDN نیز نمونه‌های لیست تو در تو را با قرار دادن لیست داخلی درون li والد نشان می‌دهد.

این ساختار را در نظر بگیرید:

				
					<ul>
  <li>HTML</li>

  <ul>
    <li>لینک‌ها</li>
    <li>لیست‌ها</li>
  </ul>
</ul>

اگر «لینک‌ها» و «لیست‌ها» زیرمجموعه HTML هستند، باید زیرلیست را داخل همان li قرار دهیم:

				
					<ul>
  <li>
    HTML
    <ul>
      <li>لینک‌ها</li>
      <li>لیست‌ها</li>
    </ul>
  </li>
</ul>

هنگام بررسی لیست تو در تو فقط به تورفتگی کد اعتماد نکنید. تورفتگی برای خوانایی است؛ رابطه واقعی را باز و بسته شدن تگ‌ها تعیین می‌کند.

۴. استفاده از dl برای ایجاد ظاهر دو ستونه یا تورفتگی

dl زمانی مناسب است که واقعاً با گروه‌هایی از نام/اصطلاح و توضیح یا مقدار مرتبط روبه‌رو باشیم. ساختار آن از یک یا چند dt و توضیح‌های مرتبط در dd تشکیل می‌شود. استفاده از dl فقط برای رسیدن به یک ظاهر خاص یا ایجاد تورفتگی، معنای نادرستی به محتوا می‌دهد.

مثلاً این رابطه منطقی است:

				
					<dl>
  <dt>پسوند فایل</dt>
  <dd>.html</dd>

  <dt>نام فایل اصلی</dt>
  <dd>index.html</dd>
</dl>

اما اگر محتوا صرفاً چند آیتم مستقل مانند HTML، CSS و JavaScript باشد، باید ابتدا بررسی کنید که آیا ul یا ol ساختار مناسب‌تری نیست.

چطور صحت یک لیست HTML را بررسی کنیم؟

پس از نوشتن لیست، این چهار سؤال یک بررسی سریع و کاربردی به شما می‌دهند:

نوع لیست درست است؟ ترتیب مهم است، مهم نیست یا با رابطه نام–توضیح سروکار دارم؟
آیتم‌ها در عنصر مناسب قرار گرفته‌اند؟ در ul و ol، هر آیتم اصلی باید li باشد.
زیرلیست داخل li والد قرار دارد؟ صرفاً با تورفتگی ظاهری نمی‌توان رابطه والد و فرزند ساخت.
ساختار کد معتبر است؟ در صورت تردید، می‌توانید کد یا سند را با اعتبارسنج HTML بیت آموز یا با Nu Html Checker بررسی کنید؛ این ابزار خطاها و هشدارهای HTML را گزارش می‌کند.

البته عبور یک صفحه از بررسی ساختاری به این معنی نیست که انتخاب معنایی شما حتماً بهترین انتخاب بوده است. Validator می‌تواند بسیاری از خطاهای Markup را پیدا کند، اما تصمیم بین ul، ol و dl همچنان به معنای واقعی محتوا وابسته است.

اگر بعد از ساخت یک لیست بتوانید توضیح دهید چرا این داده باید ul، ol یا dl باشد، هر آیتم در چه عنصری قرار می‌گیرد و زیرلیست دقیقاً به کدام آیتم تعلق دارد، به هدف اصلی این آموزش رسیده‌اید.

جمع‌بندی

برای ساخت درست لیست‌ها در HTML، مهم‌ترین تصمیم قبل از نوشتن کد گرفته می‌شود: آیتم‌های شما چه رابطه‌ای با یکدیگر دارند؟

اگر جابه‌جایی آیتم‌ها معنای فهرست را تغییر نمی‌دهد، ul معمولاً انتخاب مناسبی است. اگر ترتیب، توالی یا اولویت اهمیت دارد، از ol استفاده کنید. برای داده‌هایی که از نام‌ها و توضیح‌ها یا مقادیر مرتبط تشکیل شده‌اند نیز dl ساختار مناسب‌تری است.

بعد از انتخاب نوع لیست، ساختار عناصر را هم بررسی کنید: آیتم‌های ul و ol داخل li قرار می‌گیرند، زیرلیست باید داخل li مربوط به خودش باشد و تغییر ظاهر لیست را بهتر است به CSS بسپارید. اگر درباره صحت Markup تردید داشتید، بررسی ساختار با Validator می‌تواند خطاهای نحوی را آشکار کند؛ هرچند انتخاب معنایی درست همچنان به نوع محتوای شما بستگی دارد.

حالا می‌توانید قبل از ساخت هر لیست سه سؤال بپرسید: آیا ترتیب مهم است؟ آیا با نام و توضیح سروکار دارم؟ هر آیتم به کدام والد تعلق دارد؟ پاسخ همین سه سؤال در بیشتر مواقع ساختار مناسب را مشخص می‌کند.

اگر می‌خواهید بعد از مباحث پایه، HTML را در یک مسیر آموزشی منظم‌تر ادامه دهید، می‌توانید به دوره مستر HTML بروید.

سوالات متداول

آیا داخل li فقط می‌توان متن قرار داد؟

خیر. عنصر li می‌تواند محتوای جریان (Flow content) را در خود قرار دهد؛ بنابراین بسته به نیاز محتوا، عناصری مانند لینک، پاراگراف یا حتی یک لیست دیگر نیز می‌توانند داخل آن قرار بگیرند. همین امکان است که ساخت لیست‌های تو در تو را ممکن می‌کند.

آیا می‌توان شماره‌گذاری ol را از عددی غیر از ۱ شروع کرد؟

بله. عنصر ol ویژگی start دارد که با یک عدد صحیح، مقدار شروع شماره‌گذاری لیست را مشخص می‌کند. برای مثال، start=”4″ باعث می‌شود شمارش لیست از مقدار ۴ آغاز شود. این ویژگی رفتار شماره‌گذاری را تغییر می‌دهد، اما دلیل انتخاب ol همچنان باید معنادار بودن ترتیب آیتم‌ها باشد.