🎓 جلسه هشتم: تگ‌های لیست در HTML

به دوره حرفه‌ای آموزش HTML در آوای وب خوش اومدی! اینجا قراره تگ‌های لیست در HTML رو مثل یه حرفه‌ای بترکونی و اطلاعاتت رو تو طراحی وب مرتب و خفن کنی. تگ‌های <dt> ،<dl> ،<li> ،<ul> ،<ol> و <dd> ساده‌ن، ولی اگه بلدشون باشی، سایتت غوغا می‌کنه! تو این مقاله، از صفر تا صد لیست‌سازی رو با مثالای باحال، پروژه عملی، و نکات سئو یاد می‌گیری آماده‌ای ؟ بزن بریم!

🧩 تگ‌های لیست در HTML چیه و چرا باید استفاده کرد؟

تگ‌های لیست تو HTML مثل یه جعبه ابزارن برای مرتب کردن اطلاعاتت. می‌خوای یه فهرست بسازی؟ یه منو؟ یا یه لیست خرید؟ با <ul> ،<ol> و <li> همه‌چیزو می‌ترکونی! اینا نه تنها صفحه‌ات رو قشنگ‌تر می‌کنن، بلکه گوگل رو هم عاشق سایتت می‌کنن چون ساختارمندن و کاربرا راحت پیداشون می‌کنن. آماده‌ای باهاشون غوغا راه بندازی؟

🧩 انواع لیست‌ها: سه تفنگدار HTML

تو HTML سه نوع لیست داریم که هر کدوم یه کار خفن می‌کنن:

• ✨ لیست مرتب (<ol>): برای وقتی که ترتیب مهمه مثل دستور پخت کیک!
• ✨ لیست نامرتب (<ul>): بدون ترتیب، فقط بولت مثل لیست خریدت!
• ✨ لیست توضیحی (<dl>): عنوان و توضیح مثل یه دیکشنری باحال!

حالا بیایم هر کدوم رو بشکافیم و بترکونیمشون!

🧩 لیست مرتب: تگ ol مخفف (Ordered Lists)

با تگ <ol> و <li> یه لیست مرتب می‌سازی که شماره داره. این برای وقتیه که می‌خوای بگی چی اوله، چی دومه:

🔸تگ li یا (List Item)

تگ <li> برای ساخت آیتم داخل لیست‌های مرتب و نامرتب اسفاده می‌شه.

مثال:

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

📌 نتیجه کد بالا به این صورت نمایش داده می‌شه

🌟 اتریبیوت‌های لیست مرتب: جادو رو شروع کن

✏️ start : از هر جا شروع کن!

می‌خوای شماره‌ها از یه عدد خاص شروع بشن؟ start رو بذار:

<ol start="3">
 <li> آیتم اول </li>
 <li> آیتم دوم </li>
 <li> آیتم سوم </li>
</ol>

📌 نتیجه کد بالا به این صورت نمایش داده می‌شه

✏️ reversed: برعکس بشمار!

با reversed شماره‌ها رو از آخر به اول می‌ری مثل شمارش معکوس:

مثال:

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

📌 نتیجه کد بالا به این صورت نمایش داده می‌شود

✏️ type: شماره‌ها رو خفن کن!

با type نوع شماره‌گذاری رو عوض کن عدد، حرف، یا رومی: مقدارهای که می‌گیره i ،A ،a و 1. به صورت حروف کوچک، حروف بزرگ، اعداد رومی و اعداد.

مثال:

<ol type="a">
  <li>آیتم اول</li>
  <li>آیتم دوم</li>
  <li>آیتم سوم</li>
</ol>

در این مثال نوع تایپ را حروف کوچک قرار دادیم که نتیجه کد بالا به این صورت نمایش داده می‌شه، بقیه مدل‌ها (1، A، i) رو خودت تست کن، بترکون!

✏️ value: وسط کار شماره عوض کن!

می‌خوای یه آیتم خاص یه شماره خاص داشته باشه؟ value رو تو <li> بذار:

<ol>
 <li>آیتم اول</li>
 <li value="5">آیتم دوم</li>
 <li>آیتم سوم</li> 
</ol>

📌 نتیجه کد بالا به این صورت نمایش داده می‌شود

📌 نتیجه: 1. آیتم اول، 5. آیتم دوم، 6. آیتم سوم. شماره‌ها از 5 پریدن بالا، خفن شد!

🧩 لیست‌ نامرتب تگ ul مخفف (Unordered Lists)

با تگ <ul> و <li> یه لیست بدون ترتیب می‌سازی که بولت ( دایره ) داره ترتیب مهم نیست، فقط می‌خوای چیزا رو نشون بدی:

مثال:

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

📌 نتیجه کد بالا به این صورت نمایش داده می‌شه

🧩 لیست‌ توضیحی تگ dl مخفف (Description Lists)

با تگ <dt> ،<dl> (عنوان) و <dd> (توضیح) یه لیست می‌سازی که هر چیزی رو توضیح می‌ده مثل یه دیکشنری خفن:

🔸تگ dt

این تگ واسه نوشتن “عنوان” یا همون “اصطلاح” به کار می‌ره. مثلاً یه کلمه یا چیزی که می‌خوای براش توضیح بنویسی.

🔸تگ dd

تگ <dd> رو می‌ذاری بعد از <dt> تا توضیح اون عنوان رو بنویسی.

مثال:

<dl>
  <dt>عنوان اول</dt>
  <dd>توضیح عنوان اول</dd>
  <dt>عنوان دوم</dt>
  <dd>توضیح عنوان دوم</dd>
</dl>

📌 نتیجه کد بالا به این صورت نمایش داده می‌شه

📝 پروژه عملی: منوی تودرتو بساز

بیا با تگ <ul> یه منوی تودرتو بسازیم که تو هر سایتی بترکونه:

 <ul>
     <li><a href="#home">خانه</a></li>
     <li>محصولات <ul>
         <li><a href="#phones">گوشی</a></li>
         <li><a href="#laptops">لپ‌تاپ</a></li>
      </ul>
        </li>
        <li><a href="#contact">تماس</a></li>
    </ul>

📌 ذخیره کن و تو مرورگر ببین یه منوی تودرتو با لینک که هم قشنگه، هم کاربردی! با CSS می‌تونی بولت‌ها رو هم خفن‌تر کنی.

💡 سئو با لیست‌ها: گوگل رو عاشق کن!

لیست‌ها فقط برای کاربرا نیستن گوگل دیوونه‌شونه! چرا؟ چون ساختارمندن و می‌تونن تو Featured Snippets (جوابای بالای سرچ) جا بگیرن. چندتا نکته:

• کلمات کلیدی: تو تگ <li> از کلمات مهم مثل «آموزش HTML» استفاده کن.
• ترتیب: با <ol> برای مراحل یا رتبه‌بندی استفاده کن گوگل عاشق مراحل منظمه!
• تودرتو: منوهای تودرتو رو با <ul> بساز ساختار سایتت رو به گوگل نشون می‌ده.

با لیست‌های خفن، هم کاربرات خوشحال می‌شن، هم رتبه‌ات می‌ره بالا!

⚠️ اشتباهات رایج: خرابکاری نکن!

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

• تگ مستقیم تو <ul>: هیچ تگی مستقیم داخل تگ <ul> نزار فقط <li> باشه! اگه تگی نیاز بود داخل تگ <li> بزار.
• تودرتو بی‌جا: لیست تودرتو رو بدون دلیل نساز کاربرا گم می‌شن.
• شماره‌گذاری اشتباه: start یا value رو درست چک کن نذار قاطی بشه!

🏁 جمع‌بندی: لیستاتو بترکون!

حالا تگ‌های <dt> ،<dl> ،<li> ،<ul> ،<ol> و <dd> رو مثل یه حرفه‌ای بلدی! از لیست خرید ساده تا منوی تودرتو، همه‌چیز دستته. برو باهاشون غوغا راه بنداز و تو جلسه قبلی لینکاتو بهشون وصل کن. با آوای وب، هر قدم یه پله‌ست به سمت بهترین شدن ما تا آخر خط باهاتیم! در ضمن، یادت نره اگه مبتدی هستی، کدات رو تو W3C Validator چک کنی و مطمئن شی درست نوشتی.

💬 ایده‌هات رو فریاد بزن!

نظرت درباره تگ‌های لیست چیه؟ دلت می‌خواد چه چیزی به این آموزش اضافه کنیم؟ سوالی تو ذهنت مونده؟ تو نظرات برامون بگو! تیم حرفه‌ای پشتیبانی با جون و دل جوابت رو می‌ده!

شهرام نجفی

همیشه آرزو داشتم که هنگام جستجوی اطلاعات، به سراغ یک منبع جامع و به روز برم، اما اینکه چنین منابعی را بیابم همیشه چالش بوده است. برای همین ایده راه اندازی سایت آوای وب به ذهنم رسید و الان در خدمت شما هستم.