فصل ۶: لیست‌ها (فهرست‌ها)

فصل ۶: لیست‌ها (فهرست‌ها) – نظم‌دهی به اطلاعات! 📝

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

لیست‌ها فقط برای مرتب کردن متن نیستن، بلکه به سئو (SEO) و دسترسی‌پذیری (Accessibility) وب‌سایت هم کمک زیادی می‌کنن.

۱. لیست‌های نامرتب (Unordered Lists –

): نقطه‌های رنگی! 🔵

لیست‌های نامرتب برای مواقعی استفاده می‌شن که ترتیب آیتم‌ها اهمیتی نداره. معمولاً با نقطه‌های سیاه (Bullets) نمایش داده می‌شن، اما با CSS می‌شه ظاهرشون رو کاملاً تغییر داد.

ساختار:

• تگ اصلی: <ul> (Unordered List)
• هر آیتم لیست: <li> (List Item)

<h3>میوه‌های مورد علاقه من:</h3>
<ul>
  <li>سیب</li>
  <li>موز</li>
  <li>پرتقال</li>
  <li>هندوانه</li>
</ul>

نتیجه (به صورت کلی):

• سیب 🍎
• موز 🍌
• پرتقال 🍊
• هندوانه 🍉

۲. لیست‌های مرتب (Ordered Lists –

): شماره‌گذاری شده! 🔢

لیست‌های مرتب برای مواقعی هستن که ترتیب آیتم‌ها مهمه. مثلاً دستور پخت غذا، مراحل انجام یک کار، یا رتبه‌بندی‌ها.

ساختار:

• تگ اصلی: <ol> (Ordered List)
• هر آیتم لیست: <li> (List Item)

<h3>مراحل درست کردن چای:</h3>
<ol>
  <li>کتری را پر از آب کنید و روی حرارت قرار دهید.</li>
  <li>وقتی آب به جوش آمد، چای کیسه‌ای یا خشک را در فنجان قرار دهید.</li>
  <li>آب جوش را روی چای بریزید و اجازه دهید دم بکشد.</li>
  <li>در صورت تمایل، شکر یا عسل اضافه کنید.</li>
</ol>

نتیجه (به صورت کلی):

1. کتری را پر از آب کنید و روی حرارت قرار دهید. 💧
2. وقتی آب به جوش آمد، چای کیسه‌ای یا خشک را در فنجان قرار دهید. ☕
3. آب جوش را روی چای بریزید و اجازه دهید دم بکشد.
4. در صورت تمایل، شکر یا عسل اضافه کنید. 🍯

خصوصیات تگ <ol>:

با خصوصیات تگ <ol> می‌تونیم نوع شماره‌گذاری رو تغییر بدیم:

• type:
  • '1' (پیش‌فرض): اعداد معمولی (1, 2, 3…)
  • 'a': حروف کوچک انگلیسی (a, b, c…)
  • 'A': حروف بزرگ انگلیسی (A, B, C…)
  • 'i': اعداد رومی کوچک (i, ii, iii…)
  • 'I': اعداد رومی بزرگ (I, II, III…)
• start: شماره شروع لیست رو مشخص می‌کنه (مثلاً اگر بخواهید لیست از عدد ۵ شروع بشه).

<h4>لیست با حروف لاتین:</h4>
<ol type="a" start="3">
  <li>قدم اول</li>
  <li>قدم دوم</li>
  <li>قدم سوم</li>
</ol>

نتیجه:

3. قدم اول
4. قدم دوم
5. قدم سوم

۳. لیست‌های توضیحی (Description Lists –

): وقتی نیاز به تعریف داریم! 📖

این نوع لیست برای تعریف واژگان، اصطلاحات، یا جفت‌های “نام-مقدار” استفاده می‌شه. هر آیتم دو بخش داره: یک عنوان (Term) و یک توضیح (Description).

ساختار:

• تگ اصلی: <dl> (Description List)
• عنوان یا واژه: <dt> (Description Term)
• توضیح یا معنی: <dd> (Description Details)

<h3>واژگان HTML:</h3>
<dl>
  <dt>تگ</dt>
  <dd>یک قطعه کد در HTML که وظیفه خاصی را بر عهده دارد و با &lt; و &gt; احاطه شده است.</dd>

  <dt>خصوصیت</dt>
  <dd>اطلاعات اضافی درباره یک تگ که درون تگ بازکننده قرار می‌گیرد (مثلاً src در تگ img).</dd>

  <dt>عنصر</dt>
  <dd>شامل تگ بازکننده، تگ بسته‌کننده و محتوای بین آن‌ها می‌شود.</dd>
</dl>

نتیجه (به صورت کلی):

تگ

یک قطعه کد در HTML که وظیفه خاصی را بر عهده دارد و با < و > احاطه شده است.

خصوصیت

اطلاعات اضافی درباره یک تگ که درون تگ بازکننده قرار می‌گیرد (مثلاً src در تگ img).

عنصر

شامل تگ بازکننده، تگ بسته‌کننده و محتوای بین آن‌ها می‌شود.

لیست‌های تو در تو (Nested Lists) هم خیلی رایج هستن. یعنی می‌تونید یه لیست <li> رو درون یه لیست دیگه (<ul> یا <ol>) قرار بدید تا ساختارهای پیچیده‌تری بسازید.

استفاده درست از انواع لیست‌ها، صفحه وب شما رو هم برای انسان‌ها و هم برای موتورهای جستجو، خیلی منظم‌تر و قابل فهم‌تر می‌کنه. پس حسابی ازشون استفاده کنید! 😉