در این فصل چه می‌سازی#
آخر این فصل یک صفحه داری که چند فهرست واقعی دارد: یک فهرست کارهای امروز، یک دستور پخت مرحله‌به‌مرحله، و یک منوی تودرتو. و مهم‌تر از شکلشان، یاد می‌گیری مرورگر از کجا می‌فهمد ترتیب یک فهرست مهم است یا نه.
آخر این فصل می‌توانی:
- فرق فهرستی که ترتیبش مهم است و فهرستی را که نیست تشخیص بدهی و درست را انتخاب کنی
- یک فهرست نقطه‌ای و یک فهرست شماره‌دار بسازی
- فهرست تودرتو بسازی (فهرست داخل فهرست)
- بگویی چرا
<li>همیشه باید داخل<ul>یا<ol>باشد
قبل از شروع#
فقط چیزهایی که تا حالا بلدی: از فصل ۲ متن و پاراگراف، و از فصل ۱ اسکلت صفحه. همین کافی است.
۱. دو جور فهرست، و فرقشان معنایی است نه ظاهری#
به این دو چیز فکر کن:
- کارهای امروز: نان بخر، به مامان زنگ بزن، تکلیف ریاضی. — ترتیبش مهم نیست. اول به مامان زنگ بزنی یا اول نان بخری، فرقی نمی‌کند.
- دستور پختِ املت: اول تخم‌مرغ را بشکن، بعد هم بزن، بعد در تابه بریز. — اینجا ترتیب همه‌چیز است. اگر اول در تابه بریزی، املت نداری.
HTML برای این دو حالت دو ابزار جدا دارد، و انتخاب درست فقط یک تصمیم ظاهری نیست — تو داری به مرورگر و به screen reader می‌گویی «ترتیب این‌ها مهم هست یا نیست».
- فهرستی که ترتیبش مهم نیست:
<ul>(بعداً می‌بینی این حروف از کجا آمده‌اند). - فهرستی که ترتیبش مهم است:
<ol>.
هر آیتم فهرست، چه در این یکی چه در آن یکی، داخل یک <li> می‌رود.
۲. اولین فهرست: فهرست بدون ترتیب#
بیا فهرست کارهای امروز را بسازیم. در آزمایشگاه این را بنویس:
<h2>کارهای امروز</h2>
<ul>
<li>نان بخر</li>
<li>به مامان زنگ بزن</li>
<li>تکلیف ریاضی</li>
</ul>
<ul> کل فهرست را دربر می‌گیرد، و هر <li> یک آیتم است. حالا آن حروف معنا پیدا می‌کنند: <ul> مخفف «unordered list» است — فهرستِ بی‌ترتیب — و <li> مخفف «list item»، همان «آیتم فهرست».
✅ چک کن: باید سه خط ببینی که جلوی هرکدام یک نقطه (•) هست. آن نقطه‌ها را تو نگذاشتی — مرورگر خودش برای هر <li> داخل <ul> یک نقطه می‌گذارد.
و باز همان درسِ همیشگی این خودآموز: هیچ‌جا نگفتیم «نقطه بگذار». فقط گفتیم «این‌ها یک فهرست بی‌ترتیب‌اند». نقطه، تصمیم پیش‌فرض مرورگر بود. بعداً در ترم ۲ با CSS می‌توانی آن نقطه را عوض کنی یا برداری — ولی معنای فهرست بودن سرِ جایش می‌ماند.
💡 نکته: «بی‌ترتیب» یعنی ترتیبش برای معنا مهم نیست، نه اینکه آیتم‌ها به‌هم‌ریخته‌اند. تو باز هم خودت تصمیم می‌گیری چه چیزی اول بیاید؛ فقط به مرورگر می‌گویی «اگر جایشان عوض شود، معنا خراب نمی‌شود.»
۳. فهرست باترتیب: وقتی شماره معنا دارد#
حالا دستور پخت. فقط <ul> را به <ol> عوض کن:
<h2>املت</h2>
<ol>
<li>تخم‌مرغ را بشکن</li>
<li>خوب هم بزن</li>
<li>در تابه بریز</li>
</ol>
<ol> مخفف «ordered list» است — فهرست باترتیب.
✅ چک کن: حالا به‌جای نقطه، عدد می‌بینی: ۱، ۲، ۳. باز هم تو عددها را تایپ نکردی! مرورگر خودش شمارید. این خیلی مهم است: اگر بعداً یک مرحله را وسط اضافه کنی، همهٔ شماره‌ها خودشان درست می‌شوند و لازم نیست دستی عوضشان کنی.
⚠️ مواظب باش: وسوسه نشو که خودت عددها را داخل متن
<li>تایپ کنی، مثل<li>۱. تخم‌مرغ را بشکن</li>. اگر این کار را بکنی، دو تا عدد می‌بینی — یکی مالِ تو، یکی مالِ مرورگر. بگذار شمردن کارِ مرورگر باشد.
چالش: کدام فهرست برای فهرست بازیکن‌های تیم؟
اول خودت فکر کن یا امتحان کن — بعد اینجا را باز کن.
۴. فهرست داخل فهرست: تودرتو#
فهرست‌ها می‌توانند تودرتو باشند. یک <ul> کامل می‌تواند داخل یک <li> برود. بیا یک منوی رستوران بسازیم:
<!-- index.html -->
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<title>منوی رستوران</title>
</head>
<body>
<h1>منو</h1>
<ul>
<li>پیش‌غذا
<ul>
<li>سوپ جو</li>
<li>سالاد</li>
</ul>
</li>
<li>غذای اصلی
<ul>
<li>چلوکباب</li>
<li>قرمه‌سبزی</li>
</ul>
</li>
</ul>
</body>
</html>
با دقت نگاه کن به جایی که <ul> دوم قرار گرفته: داخل <li>ی «پیش‌غذا»، قبل از بسته شدنش </li>. تورفتگی اینجا واقعاً کمکت می‌کند ببینی چه چیزی داخل چه چیزی است.
✅ چک کن: باید «پیش‌غذا» و «غذای اصلی» را ببینی، و کمی تورفته‌تر و ریزتر، آیتم‌های هرکدام را زیرشان.
🔧 اگر کار نکرد: آیتم‌های داخلی به‌جای اینکه زیر «پیش‌غذا» بروند، هم‌ردیف بقیه شدند؟ احتمالاً
<ul>داخلی را بعد از</li>گذاشته‌ای، نه قبلش.<li>باید اول متن خودش را داشته باشد، بعد فهرست تودرتو، و بعد بسته شود.
۵. یک قانون ساده ولی مهم#
<li> تنها جایی زندگی می‌کند که داخل یک <ul> یا <ol> باشد. یک <li> وسط <body> بدون فهرست دور و برش، بی‌معناست — مثل یک آیتم فهرست که فهرستی ندارد.
بیا این را عمداً خراب کنیم تا ببینی. در آزمایشگاه یک <li> تنها بنویس، بیرون از هر فهرستی، و درست زیرش یک فهرستِ درست بگذار تا بشود مقایسه کرد:
<li>من داخل هیچ فهرستی نیستم</li>
<ul>
<li>من داخل یک فهرستم</li>
</ul>
نتیجه را نگاه کن. هر دو خط یک نقطه دارند — چون نقطه را خودِ <li> می‌آورد، نه <ul>. ولی به جای آن دو نقطه دقت کن: نقطهٔ خطِ دوم کمی تورفته نشسته و نقطهٔ خطِ اول چسبیده به لبهٔ صفحه است. آن تورفتگی مالِ <ul> بود؛ <li>ی تنها فهرستی ندارد که تویش بنشیند.
و مهم‌تر از این تفاوتِ ریزِ ظاهری، چیزی است که اصلاً دیده نمی‌شود: یک screen reader وقتی به <ul> می‌رسد اعلام می‌کند که اینجا یک فهرست است و چند مورد دارد، پس کاربر از همان اول می‌داند چه چیزی پیشِ رویش است. <li>ی تنها فهرستی ندارد که اعلام شود، و آن اطلاعات کاملاً گم می‌شود. باز هم مرورگر خطا نداد، فقط کارِ نیم‌بند کرد. این دقیقاً همان رفتار موذی HTML است که از فصل ۱ می‌شناسی.
✅ چک کن: حالا آن <li>ی تنها را هم داخلِ همان <ul> ببر. هر دو آیتم هم‌تراز و تورفته می‌شوند و با هم یک فهرستِ واقعی می‌سازند.
🤖 با AI: یک فهرست بنویس و از دستیار AI ات بپرس «آیا این فهرست باید
<ul>باشد یا<ol>؟». جوابش را با معیار خودمان بسنج: «اگر جای آیتم‌ها عوض شود، معنا عوض می‌شود؟» گاهی AI فقط به ظاهر نگاه می‌کند و اشتباه می‌گوید. یادت باشد اول خودت، بعد AI — اول با معیار خودت تصمیم بگیر، بعد نظر AI را به‌عنوان نظر دوم بشنو، نه به‌عنوان جواب نهایی.
واژه‌های تازهٔ این فصل#
| کلمه | تلفظ به حروف فارسی | یعنی چه |
|---|---|---|
| list | لیست | فهرست |
| unordered list | آن‌اوردِرد لیست | فهرستی که ترتیبش مهم نیست (<ul>) |
| ordered list | اوردِرد لیست | فهرستی که ترتیبش مهم است (<ol>) |
| list item | لیست آیتم | یک آیتم فهرست (<li>) |
| nested | نِستِد | تودرتو؛ چیزی داخل چیز دیگر |
تمرین‌ها
اول خودت فکر کن یا امتحان کن — بعد اینجا را باز کن.
در فصل بعد#
الان می‌توانی متن، پیوند، تصویر و فهرست بسازی — یعنی همهٔ تکه‌های یک صفحه را داری. ولی هنوز همه‌شان یک تودهٔ درهم‌اند. فصل بعد یاد می‌گیری چطور به صفحه یک اسکلت معنادار بدهی: کجایش سرصفحه است، کجایش منوی اصلی، کجایش محتوای اصلی — با tag هایی که دقیقاً همین را می‌گویند.
به آخر این فصل رسیدی!
اگر ساختی و جواب داد، این دکمه مال توست.