در حال بارگذاری...

فهرست‌ها در HTML

منوی مواد، روتین صبح، bullet ویژگی‌ها و چک‌لیست بسته‌بندی با فهرست راحت‌تر اسکن می‌شوند. HTML دو ساختار روزمره می‌دهد: فهرست نامرتب و فهرست مرتب. بعد از احتیاط plug-inها (تاریخچه، بدون نمونه کد)، این جلسه به نشانه‌گذاری عملی برمی‌گردد که تقریباً در هر صفحهٔ محتوا دوباره استفاده می‌کنید. فهرست‌ها را معنای گروه و توالی بدانید — نه میان‌بر برای layout چندستونه.

فهرست‌ها به چه کار می‌آیند

فهرست گروهی از آیتم‌های مرتبط را به‌عنوان یک گروه علامت می‌زند. مرورگرها و فناوری‌های کمکی می‌توانند تعداد آیتم‌ها را اعلام کنند و یکی‌یکی جابه‌جا شوند. این ساختار به اسکن سریع، outline و دستور پخت کمک می‌کند. معنا از بین می‌رود اگر bullet را با خط تیرهٔ تصادفی در پاراگراف جعلی کنید، یا ul را فقط برای هل دادن متن به ستون‌های بصری کش بدهید. وقتی محتوا واقعاً مجموعه یا توالی است از نشانه‌گذاری فهرست استفاده کنید. فاصلهٔ تزئینی و grid را برای CSS بعداً نگه دارید.

پاسخ مستقیم

ul — فهرست نامرتب (پیش‌فرض مرورگر: bullet)
ol — فهرست مرتب (پیش‌فرض: عدد)
li — هر آیتم فهرست
وقتی زیرآیتم لازم است، ul یا ol دیگر را داخل یک li تو در تو کنید. li را بیرون فهرست والد رها نکنید. تگ‌های بسته باید به ترتیب معکوس باز شدن بسته شوند، به‌ویژه وقتی زیر یک گام زیرفهرست اضافه می‌کنید.

چه زمانی کدام فهرست

عنصری را انتخاب کنید که با ایده‌ای که می‌نویسید جور باشد، نه با شکلی که امید دارید CSS بعداً بدهد. bullet و عدد نمایش پیش‌فرض‌اند؛ تصمیم HTML این است که آیا ترتیب بخشی از معناست.

📊 ul در برابر ol برای مبتدیان

Need	Prefer	Why
آیتم‌های مرتبط بدون توالی الزامی	ul	ترتیب بخشی از معنا نیست
گام‌ها، رتبه‌بندی یا دستور به ترتیب	ol	توالی بخشی از معناست
زیرنکته‌ها زیر یک آیتم	nest ul/ol داخل همان li	سلسله‌مراتب صادق می‌ماند
ستون صفحه یا layout سایدبار	نه فقط فهرست	بعداً CSS و layout ساختاری

فهرست نامرتب

فهرست خرید با bullet نمونهٔ کلاسیک ul است. هر آیتم یک li است. از اینجا شروع کنید وقتی آیتم‌ها هم‌سطح‌اند — نام میوه، برچسب hobby، یا highlight ویژگی که بدون خراب کردن درس جابه‌جا می‌شوند.

Unordered list

html

HTML Code

<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>

خواندن نمونهٔ نامرتب

ul ظرف فهرست نامرتب را باز می‌کند
هر li یک آیتم در آن گروه است
تگ‌های بسته باید درست تو در تو شوند: هر li را قبل از بستن ul تمام کنید
bullet پیش‌فرض استایل مرورگر است؛ بعداً CSS می‌تواند نشانگر را عوض کند، اما معنای HTML «مجموعهٔ نامرتب» می‌ماند
li خالی و بستن ناقص اشتباهات رایج‌اند — صفحه را زود ببینید تا گیرشان بیاورید

فهرست مرتب با زیرفهرست تو در تو

گام‌های شماره‌دار اغلب زیر یک گام به یک گروه bullet کوچک نیاز دارند — فایل‌هایی برای ساخت، ابزارهایی برای باز کردن، یا مواد همان گام. فهرست درونی را داخل همان li گام بگذارید، نه به‌عنوان sibling کنار کل ol. اعداد بیرونی خوانا می‌مانند و bullet درونی جزئیات را روشن می‌کند.

Ordered list with a nested list

html

HTML Code

<ol>
<li>Open the editor</li>
<li>
Create files
<ul>
<li>index.html</li>
<li>styles.css</li>
</ul>
</li>
<li>Save and refresh</li>
</ol>

خواندن نمونهٔ تو در تو

ol بیرونی گام‌های اصلی را به ترتیب شماره می‌زند
دومین li متن معرفی به‌علاوهٔ یک ul فرزند دارد
liهای درونی به ul تو در تو تعلق دارند؛ آن ul قبل از بسته شدن li والد بسته می‌شود
گام سوم بعد از پایان بلوک تو در تو، توالی مرتب بیرونی را ادامه می‌دهد
این الگو به تو در توی عمیق‌تر هم می‌رسد، اما درخت مبتدیان را کم‌عمق نگه دارید تا ترتیب باز/بسته واضح بماند
اگر اعداد «غلط» به‌نظر می‌رسند، بررسی کنید آیا li خیلی زود بسته شده و فهرست تو در تو را بیرون هل داده

اول معنا، بعد استایل

مرورگرها بدون CSS اضافه برای شما bullet و عدد می‌کشند. این راحتی وسوسه می‌کند فهرست را ماشین indent یا sidebar جعلی کنید. اینجا مقاومت کنید. اگر محتوا مجموعه یا توالی است، نشانه‌گذاری فهرست حتی قبل از تغییر نشانگرها انتخاب معنایی درست است. اگر کارت کنار هم، grid نوار nav یا ستون مجله می‌خواهید، منتظر درس‌های CSS و layout ساختاری بمانید — ul را فقط چون منوها گاهی بعداً با استایل دقیق فهرست می‌شوند به چارچوب صفحه تبدیل نکنید.

دسترسی‌پذیری و عادت اسکن

فهرست‌ها به اسکن کمک می‌کنند و به فناوری کمکی عباراتی مثل «فهرست سه آیتمی» می‌دهند. تا می‌توانید هر li را روی یک ایده متمرکز کنید. پاراگراف‌های بزرگ نامرتبط را در هر آیتم نچپانید مگر واقعاً لازم باشد. فقط وقتی سلسله‌مراتب واقعی است تو در تو کنید — تو در توی جعلی فقط برای indent هم انسان و هم ابزار را گیج می‌کند. یک heading کوتاه بالای فهرست اغلب قبل از اولین bullet روشن می‌کند گروه دربارهٔ چیست.

تمرین در ویرایشگر

یک ul از سه hobby بسازید (یا سه غذا — آیتم‌ها را کوتاه نگه دارید).
یک ol از سه گام صبح به ترتیبی که واقعاً انجام می‌دهید بسازید.
یک ul کوچک زیر یکی از آن liها تو در تو کنید (مثلاً فایل برای باز کردن یا ابزار برای برداشتن).
ذهنی اعتبارسنجی کنید: هر li داخل ul یا ol است؛ فهرست‌های تو در تو داخل یک liاند.
نوع یکی از فهرست‌ها را عوض کنید (ul ↔ ol) و بپرسید آیا معنا هنوز با محتوا جور است.
صفحه را در مرورگر ببینید و تأیید کنید بدون نوشتن CSS هنوز bullet/عدد ظاهر می‌شوند.
یک‌بار عمداً تو در تو را خراب کنید، ببینید outline چقدر غلط به‌نظر می‌رسد، بعد بسته‌ها را درست کنید.

اشتباهات آسان

نوشتن li بیرون هر ul/ol (آیتم یتیم)
استفاده از فهرست فقط برای indent پاراگراف تصادفی یا ستون جعلی
فراموش کردن بستن فهرست‌های تو در تو به ترتیب درست
گذاشتن ul تو در تو به‌عنوان siblingِ li به‌جای داخل یک li
انتخاب ol برای آیتم بدون توالی (یا ul برای شمارهٔ گام سخت) بدون فکر به معنا
کپی نشانه‌گذاری فهرست از آموزش‌های فقط-layout که ul را grid منو می‌دانند بدون آموزش معنا
نبستن فهرست بیرونی بعد از بلوک تو در توی بلند

خلاصه

ul + li برای مجموعه‌های نامرتب (پیش‌فرض bullet)
ol + li برای توالی‌های مرتب (پیش‌فرض عدد)
زیرفهرست را داخل li تو در تو کنید، نه کنار فهرست والد
نوعی را انتخاب کنید که با معنا جور باشد
فهرست را جایگزین ستون‌های layout در CSS نکنید
بعد از یادداشت تاریخی plug-in، فهرست‌ها شما را به HTML ساختاری روزمره برمی‌گردانند که مدام استفاده می‌کنید

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

هر سوال را با دقت بخوانید
بهترین پاسخ را برای هر سوال انتخاب کنید
می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
پیشرفت شما در بالا نمایش داده می‌شود

زبان