آموزش لیست در HTML

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

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

اگر می‌خواهید این مفاهیم را به صورت عملی پیاده‌سازی کنید، شرکت در کلاس آموزش HTML-CSS آموزشگاه پرتو را توصیه می‌کنیم.

انواع لیست‌ها در HTML5

HTML5 سه نوع اصلی لیست پشتیبانی می‌کند:

لیست نامرتب (Unordered List –

)

برای مواردی که ترتیب اهمیت ندارد (مانند منوها یا ویژگی‌ها).

لیست مرتب (Ordered List –

)

برای مواردی که ترتیب مهم است (مانند مراحل دستورالعمل).

لیست توصیفی (Description List –

)

برای جفت‌های اصطلاح و توضیح (مانند glossary یا مشخصات محصول).

هر آیتم لیست با تگ

• (برای ul و ol) یا(اصطلاح) و(توضیح) تعریف می‌شود.
  

  لیست نامرتب (

  ) و استایل‌دهی

  لیست نامرتب با بولت (نقطه) پیش‌فرض نمایش داده می‌شود و برای منوهای ناوبری، ویژگی‌های محصول یا لیست‌های ساده ایده‌آل است.

  HTML

  <ul>
    <li>طراحی responsiveli>
    <li>بهینه‌سازی سئوli>
    <li>امنیت بالاli>
  ul>

  استایل‌دهی بولت‌ها با CSS

  ویژگی type قدیمی (disc, circle, square) هنوز کار می‌کند، اما منسوخ شده و بهتر است از CSS استفاده کنید

  CSS

  ul {
    list-style-type: disc;     /* دایره توپر - پیش‌فرض */
    /* یا: circle, square, none */
  }

  برای منوهای افقی یا بدون بولت (رایج در طراحی)

  nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
  }

  در کلاس آموزش طراحی سایت، یاد می‌گیرید چگونه با Flexbox و Grid لیست‌ها را به منوهای حرفه‌ای تبدیل کنید.

  لیست مرتب (

  ) و ویژگی‌های آن

  لیست مرتب برای نمایش مراحل یا رتبه‌بندی مناسب است و به طور پیش‌فرض با اعداد شماره‌گذاری می‌شود

  HTML

  <ol>
    <li>تحلیل نیازهاli>
    <li>طراحی UI/UXli>
    <li>کدینگ frontend و backendli>
    <li>تست و انتشارli>
  ol>

  ویژگی‌های کلیدی

  در HTML5

  start: شروع شماره‌گذاری از عدد دلخواه (مثلاً start=”5″).
  reversed: شماره‌گذاری معکوس (نزولی) – ویژگی مفید HTML5.

  <ol start="3" reversed>
    <li>مرحله نهاییli>
    <li>مرحله دومli>
    <li>مرحله اولli>
  ol>

  تغییر نوع شماره‌گذاری با CSS

  به جای ویژگی قدیمی type، از CSS استفاده کنید

  CSS

  ol {
    list-style-type: decimal;      /* اعداد - پیش‌فرض */
    /* decimal-leading-zero, lower-alpha, upper-alpha, lower-roman, upper-roman */
  }

  برای لیست‌های پیچیده، می‌توانید از counterهای CSS بهره ببرید.

  لیست‌های تو در تو (Nested Lists)

  لیست‌ها را می‌توان به دلخواه تو در تو کرد و انواع ul و ol را ترکیب نمود

  HTML

  <ul>
    <li>خدمات طراحی سایت
      <ol>
        <li>طراحی responsiveli>
        <li>بهینه‌سازی سرعتli>
      ol>
    li>
    <li>سئو تکنیکالli>
  ul>

  این ساختار برای منوهای dropdown یا محتوای سلسله‌ مراتبی عالی است.

  لیست توصیفی (

  ) برای محتوای معنایی

  برای نمایش جفت‌های کلید-مقدار (مانند مشخصات فنی یا FAQ)

  HTML

  <dl>
    <dt>نام دورهdt>
    <dd>کلاس آموزش طراحی سایتdd>
    
    <dt>مدرسdt>
    <dd>تیم متخصص آموزشگاه پرتوdd>
    
    <dt>مدت زمانdt>
    <dd>۳ ماه پروژه‌محورdd>
  dl>

  این لیست برای سئو بهتر عمل می‌کند زیرا ساختار معنایی دارد.

  بهترین متدهای استفاده از لیست ها

  • دسترسی‌پذیری: همیشه از تگ‌های صحیح لیست استفاده کنید تا screen readerها آن را به درستی اعلام کنند. اضافه کردن role=”list” در موارد خاص (اگر CSS نمایش را تغییر دهد).
  • سئو: لیست‌ها به موتورهای جستجو کمک می‌کنند محتوای ساختاریافته را بهتر درک کنند.
  • responsive: با CSS مدرن (Flexbox/Grid) لیست‌ها را برای موبایل بهینه کنید.
  • اجتناب از ترفندهای قدیمی: به جای nested ul برای فاصله، از margin/padding در CSS استفاده کنید.

  جمع‌بندی

  لیست‌ها پایه‌ای اما قدرتمند در طراحی وب هستند و با ترکیب درست HTML معنایی و CSS مدرن، می‌توانید ساختارهایی تمیز، سریع و کاربرپسند بسازید.

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

  دوره‌های ما کاملاً به‌روز، پروژه‌محور و بر اساس استانداردهای روز دنیا و همچنین پروژه محور و عملی تدریس میگردند. برای مشاوره رایگان با ما تماس بگیرید!