آموزش HTML - فهرست‌ها

فهرست‌های HTML

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

استفاده از فهرست‌ها در HTML

برای نمایش فهرستی از اطلاعات در HTML، از تگ‌های مختلفی مانند <ul>، <ol> و <ll> استفاده می‌کنیم. HTML سه روش برای مشخص کردن فهرست‌های اطلاعات در اختیار توسعه‌دهندگان وب قرار می‌دهد که عبارت‌اند از فهرست‌های مرتب‌شده، نامرتب و تعریفی. تمام فهرست‌ها باید شامل یک یا چند عنصر فهرست باشند. علاوه بر انواع فهرست‌های ذکرشده، عناصر و مفاهیم مهم دیگری نیز مرتبط با فهرست‌ها وجود دارند که به ساختاربندی مؤثر اسناد کمک می‌کنند.

فهرست‌های نامرتب

فهرست‌های نامرتب مواردی را نمایش می‌دهند که ترتیب مشخصی ندارند. در این فهرست‌ها، موارد با علامت‌های گلوله‌ای مشخص می‌شوند. برای ایجاد یک فهرست نامرتب، از تگ <ul> به همراه تگ <li> استفاده می‌شود. در اینجا، تگ <li> موارد موجود در فهرست را مشخص می‌کند.

مثال

مثال زیر نحوه ایجاد یک فهرست نامرتب را نشان می‌دهد. در این مثال، فهرستی شامل ۵ مورد ایجاد می‌کنیم:

<!DOCTYPE html>
<html>
<head>
   <title>HTML List</title>
</head>
<body>
   <h2>Example of HTML List</h2>
   <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>Java</li>
      <li>JavaFX</li>
   </ul>
</body>
</html>

فهرست‌های مرتب‌شده

فهرست‌های مرتب‌شده فهرست‌هایی از موارد هستند که ترتیب مشخصی دارند. به‌طور پیش‌فرض، موارد این فهرست‌ها با اعداد مشخص می‌شوند؛ اما می‌توانید با استفاده از ویژگی type یا ویژگی CSS با نام list-style-type، اعداد را به حروف الفبا، اعداد رومی و موارد مشابه تغییر دهید.

برای ایجاد یک فهرست مرتب‌شده، از تگ <ol> به همراه تگ <li> استفاده می‌شود؛ تگ <li> موارد فهرست را مشخص می‌کند.

مثال

مثال زیر یک فهرست مرتب‌شده شامل ۵ مورد را نشان می‌دهد:

<!DOCTYPE html>
<html>
<head>
   <title>HTML List</title>
</head>
<body>
   <h2>Example of HTML List</h2>
   <ol>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>Java</li>
      <li>JavaFX</li>
   </ol>
</body>
</html>

فهرست‌های تعریفی

فهرست‌های تعریفی فهرست‌هایی از موارد به همراه توضیحات مربوط به آن‌ها هستند. این فهرست‌ها با استفاده از تگ‌های <dl>، <dt> و <dd> ایجاد می‌شوند. تگ <dl>، «فهرست تعریفی» را مشخص می‌کند، تگ <dt>، «اصطلاح تعریفی» را مشخص می‌کند و تگ <dd>، «توضیح تعریف» را مشخص می‌کند.

مثال

مثال زیر یک فهرست تعریفی در HTML را نشان می‌دهد. در اینجا، فهرستی تعریفی با سه مورد ایجاد می‌کنیم:

<!DOCTYPE html>
<html>
<head>
    <title>HTML List</title>
</head>
<body>
    <h2>Example of HTML List</h2>
    <dl>
        <dt>HTML</dt>
        <dd>HyperText markup languague</dd>
        <dt>CSS</dt>
        <dd>Cascading Style Sheet</dd>
        <dt>JS</dt>
        <dd>JavaScript</dd>
    </dl>
</body>
</html>

فهرست‌های تو در تو

فهرستی که درون فهرست دیگری ایجاد می‌شود، فهرست تو در تو نام دارد. HTML همچنین امکان قرار دادن فهرست‌ها درون یکدیگر را فراهم می‌کند تا ساختارهای پیچیده‌ای برای اسناد ایجاد شوند.

مثال

در مثال زیر، یک فهرست نامرتب را درون یک فهرست مرتب‌شده قرار می‌دهیم:

<!DOCTYPE html>
<html>
<head>
   <title>HTML List</title>
</head>
<body>
   <h2>Example of HTML Nested List</h2>
   <ol>
      <li>Item One</li>
      <li>Item Two
         <ul>
            <li>Subitem A</li>
            <li>Subitem B</li>
         </ul>
      </li>
      <li>Item Three</li>
   </ol>
</body>
</html>

گروه‌بندی فهرست‌ها درون تگ <div>

برای بهبود استایل‌دهی و چیدمان، فهرست‌ها اغلب درون عناصر <div> قرار می‌گیرند. این گروه‌بندی به اعمال استایل‌های یکسان و ایجاد ساختارهای فهرستی جذاب از نظر بصری کمک می‌کند.

مثال

در این مثال، فهرست‌های نامرتب را با استفاده از تگ div گروه‌بندی می‌کنیم:

<!DOCTYPE html>
<html>
<head>
   <title>HTML List</title>
</head>
<body>
   <h2>Grouping of HTML List elements with div tag</h2>
   <div>
      <p>First List</p>
      <ol>
         <li>Item One</li>
         <li>Item Two</li>
      </ol>
   </div>
   <div>
      <p>Second List</p>
      <ol>
         <li>Item Three</li>
         <li>Item Four</li>
      </ol>
   </div>
</body>
</html>

استایل‌دهی به فهرست‌ها

برای بهبود ظاهر بصری، می‌توان با استفاده از CSS به فهرست‌ها استایل داد. می‌توان استایل‌های سفارشی را روی موارد فهرست اعمال کرد و طرح‌هایی منحصربه‌فرد و جذاب از نظر بصری ایجاد کرد. برای این کار، از تگ <style> استفاده می‌کنیم که روشی برای تعریف CSS داخلی است.

مثال

مثال زیر نحوه اعمال CSS به فهرست HTML را با استفاده از تگ style نشان می‌دهد:

<!DOCTYPE html>
<html>
<head>
   <title>HTML List</title>
   <style>
      li {
         font-size: 16px;
      }
      div {
         color: red;
      }
   </style>
</head>
<body>
   <h2>HTML List with CSS</h2>
   <div>
      <p>First List</p>
      <ol>
         <li>Item One</li>
         <li>Item Two</li>
      </ol>
   </div>
   <div>
      <p>Second List</p>
      <ol>
         <li>Item Three</li>
         <li>Item Four</li>
      </ol>
   </div>
</body>
</html>

انواع نشانگرهای فهرست در HTML

CSS امکان سفارشی‌سازی نوع نشانگرهای موارد فهرست را فراهم می‌کند. برای این کار، از ویژگی list-style-type در CSS استفاده می‌کنیم که می‌توان آن را طوری تنظیم کرد که نشانگرها به شکل دایره، مربع یا نمادهای دیگر نمایش داده شوند.

مثال

در این مثال، از ویژگی list-style-type در CSS برای تعیین نشانگرهای موارد فهرست استفاده می‌کنیم:

<!DOCTYPE html>
<html>
<head>
   <title>HTML List</title>
   <style>
      li {
         font-size: 16px;
         list-style-type: square;
      }
   </style>
</head>
<body>
   <h2>HTML list-style-type Property</h2>
   <div>
      <p>First List</p>
      <ol>
         <li>Item One</li>
         <li>Item Two</li>
      </ol>
   </div>
   <div>
      <p>Second List</p>
      <ol>
         <li>Item Three</li>
         <li>Item Four</li>
      </ol>
   </div>
</body>
</html>