تگ لیست Ul , Li

تگ <ul> در HTML برای تعریف یک فهرست نامرتب به کار می رود. نام این عنصر از عبارت Unordered List گرفته شده است. نامرتب بودن به این معناست که ترتیب موارد، مانند شماره های یک دستورالعمل، بخش اصلی مفهوم فهرست نیست؛ هر مورد صرفا یکی از اعضای یک مجموعه است. مرورگرها معمولا این موارد را با نشانه هایی مانند نقطه در کنار هم نمایش می دهند.

تگ ul به تنهایی موردهای فهرست را ایجاد نمی کند. هر مورد باید داخل تگ <li> قرار بگیرد و تگ های li نیز درون ul نوشته شوند. این رابطه ساختار معنایی فهرست را مشخص می کند و به مرورگر، ابزارهای دسترس پذیری و موتورهای جستجو کمک می کند محتوای صفحه را بهتر تفسیر کنند. برای نمونه، می توانید از این ساختار برای فهرست ویژگی ها، دسته بندی ها یا پیوندهای یک منو استفاده کنید.

در طراحی سایت، انتخاب عنصر HTML مناسب فقط به ظاهر محدود نمی شود. اگر چند مورد واقعا اعضای یک مجموعه هستند، ساختار ul و li از کنار هم گذاشتن چند پاراگراف یا افزودن دستی علامت به متن مناسب تر است. ظاهر نهایی را می توان بعدا با CSS تغییر داد، بی آنکه معنای فهرست در کد از بین برود.

قاعده اصلی استفاده از ul این است که هر عضو فهرست داخل یک عنصر li قرار بگیرد. قرار دادن متن مستقیم درون ul به جای استفاده از li، ساختار مورد انتظار HTML را رعایت نمی کند و ممکن است در ابزارهای مختلف به شکل یکسان پردازش نشود. بنابراین، اگر سه گزینه دارید، برای هر گزینه یک li جداگانه بنویسید.

برای مثال، فهرست نوشیدنی ها باید سه مورد مستقل داشته باشد: قهوه، چای و شیر. این ساختار هم خواندن کد را ساده تر می کند و هم امکان می دهد بعدا هر مورد را با CSS جداگانه هدف بگیرید یا به آن پیوند اضافه کنید. در یک منوی سایت نیز معمولا هر پیوند داخل li جداگانه قرار می گیرد.

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

اگر بعدا مورد تازه ای به فهرست اضافه شود، کافی است یک li جدید در همان ul قرار دهید. برای نمونه، در فهرست بالا می توان گزینه آب را به عنوان مورد چهارم اضافه کرد. بهتر است از نوشتن چند متن در یک li، زمانی که هر متن یک گزینه مستقل است، خودداری کنید.

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

در مقابل، برای دستورالعمل، رتبه بندی یا مراحلی که باید به ترتیب انجام شوند، عنصر <ol> انتخاب معنایی مناسب تری است. مثلا مراحل ثبت نام که از وارد کردن اطلاعات شروع می شود و به تایید حساب می رسد، ترتیب مشخصی دارد. استفاده از ol باعث می شود مفهوم توالی در خود HTML ثبت شود، نه اینکه تنها به شماره های تایپ شده در متن وابسته باشد.

فرض کنید در صفحه ای فهرست چند بخش خدمات را نشان می دهید؛ ul انتخاب طبیعی است. اما اگر همان صفحه راهنمای گام به گام استفاده از خدمت را ارائه می کند، بهتر است مراحل را در ol قرار دهید. این تمایز کوچک باعث می شود ساختار صفحه برای کاربران و فناوری های کمکی قابل فهم تر باشد.

گاهی یک مورد فهرست، چند زیرمورد دارد. در این حالت می توان یک فهرست جدید را داخل li مرتبط قرار داد. فهرست داخلی باید بخشی از همان مورد والد باشد؛ قرار دادن یک ul تازه در هر جای صفحه، بدون ارتباط ساختاری با مورد اصلی، ممکن است سلسله مراتب محتوا را مبهم کند.

برای مثال، در فهرست محصولات می توانید یک مورد به نام پوشاک داشته باشید و زیر آن دسته های پیراهن و شلوار را بیاورید. این نمایش رابطه میان دسته اصلی و زیرمجموعه های آن را روشن می کند. در CSS نیز می توان برای ul داخلی فاصله یا نشانه متفاوتی تعریف کرد تا سطح های مختلف بهتر از هم تشخیص داده شوند.

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

تگ ul ساختار فهرست را تعیین می کند، اما برای تنظیم رنگ، فاصله، اندازه متن و شکل نشانه ها از CSS استفاده می شود. برای نمونه، ویژگی list-style-type می تواند نوع نشانگر فهرست را تغییر دهد و ویژگی های margin و padding برای تنظیم فاصله های بیرونی و درونی کاربرد دارند. این جداسازی کمک می کند HTML روی معنا و CSS روی نمایش تمرکز داشته باشد.

اگر می خواهید نشانه های پیش فرض را حذف کنید، می توانید آن را در CSS انجام دهید و در صورت نیاز، نشانه جایگزین را به کمک روش های مناسب طراحی اضافه کنید. با این حال، حذف نشانگر بدون جایگزین همیشه انتخاب خوبی نیست؛ چون ممکن است تشخیص مستقل بودن گزینه ها را دشوار کند. ظاهر ساده و منظم معمولا از افکت های متعدد و شلوغ موثرتر است.

برای نمونه، در یک منوی افقی می توان چیدمان liها را با CSS تغییر داد و فاصله میان پیوندها را تنظیم کرد، اما همچنان ul و li را برای بیان ساختار منو نگه داشت. این روش باعث می شود در صورت غیرفعال بودن CSS نیز محتوای اصلی قابل تشخیص باشد. برای مطالعه بیشتر می توانید به آموزش css و بخش تنظیم لیست ها مراجعه کنید.

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

برای مثال، در صفحه معرفی خدمات می توانید عنوانی مانند «خدمات ما» داشته باشید و زیر آن هر خدمت را در یک li نمایش دهید. اگر هر گزینه توضیح طولانی و مستقلی دارد، بهتر است از ساختار مناسب تری مانند عنوان فرعی و پاراگراف استفاده کنید یا فهرست را تنها برای معرفی کوتاه موارد به کار ببرید. این تصمیم مانع از آن می شود که محتوای طولانی و پیچیده در قالب فهرست فشرده و دشوارخوان قرار بگیرد.

در یک وب سایت، پیوندهای منو نیز اغلب در ساختار فهرست قرار می گیرند. هر li می تواند یک پیوند داشته باشد و متن پیوند باید مقصد را به روشنی توصیف کند. عبارت های مبهم مانند «اینجا کلیک کنید» اطلاعات کمی می دهند؛ نام صفحه یا خدمت معمولا انتخاب مفیدتری است.

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

در منوی پیمایش، هر li معمولا یک پیوند به بخشی از سایت دارد. در معرفی محصول، liها می توانند ویژگی های کوتاه را نمایش دهند. در بخش پیوندهای مرتبط نیز فهرست به کاربر کمک می کند گزینه های هم موضوع را سریع پیدا کند. اگر هر مورد شامل توضیح گسترده است، بهتر است ظاهر و ساختار صفحه طوری طراحی شود که خواننده بتواند بین عنوان، متن و پیوند تمایز بگذارد.

برای شناخت بهتر الگوهای فهرست و عناصر وابسته، می توانید صفحه تگ ul و تگ li را ببینید. همچنین برای یادگیری ویژگی های قابل استفاده، منابع ویژگی های عمومی در HTML و ویژگی های رویدادها در HTML اطلاعات تکمیلی ارائه می کنند.

استفاده از ul و li نشان می دهد که چند مورد به یک فهرست تعلق دارند. این معنا در HTML ثبت می شود و صرفا به ظاهر نقطه ها وابسته نیست. مرورگر و فناوری های کمکی می توانند ساختار فهرست را تشخیص دهند و آن را متناسب با قابلیت های خود ارائه کنند.

برای نمونه، وقتی گزینه های منو در یک فهرست قرار می گیرند، ارتباط آنها با یکدیگر روشن است. اگر همان گزینه ها با چند خط متن جدا و نشانه های تایپ شده ساخته شوند، این ارتباط معنایی به همان روش دقیق ثبت نخواهد شد.

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

در نمونه یک منوی فروشگاه، اضافه کردن دسته تازه با افزودن li جدید انجام می شود. این روش از متن های پراکنده و تکرار نشانه های دستی جلوگیری می کند و احتمال ناهماهنگی میان گزینه ها را کاهش می دهد.

می توانید ظاهر فهرست را بدون تغییر معنای HTML تنظیم کنید. رنگ، فاصله، اندازه متن و شکل نشانگرها از جمله مواردی هستند که با CSS قابل کنترل اند. همچنین می توان برای فهرست های مختلف صفحه، کلاس های متفاوت تعریف کرد تا هر بخش ظاهر متناسب خود را داشته باشد.

برای مثال، فهرست یک منوی اصلی می تواند چیدمان افقی داشته باشد، در حالی که فهرست ویژگی های محصول به شکل عمودی نمایش داده شود. در هر دو حالت، استفاده از ul و li ساختار قابل فهم را حفظ می کند.

از یک فهرست ساده گرفته تا مجموعه پیوندهای یک منو، تگ ul در بخش های متنوعی از صفحه کاربرد دارد. این انعطاف باعث می شود بتوانید یک الگوی ساختاری مشخص را برای محتواهای هم نوع حفظ کنید و در عین حال نمایش هر بخش را با نیاز طراحی هماهنگ سازید.

برای نمونه، فهرست دسته بندی ها و فهرست ویژگی ها هر دو می توانند از ul استفاده کنند، اما با CSS متفاوت نمایش داده شوند. این جداسازی ساختار از ظاهر، بازبینی و توسعه صفحه را آسان تر می کند.

کاربران اغلب صفحه را به صورت گذری بررسی می کنند و به دنبال نکته های اصلی هستند. فهرست، موارد مرتبط را از متن پیوسته جدا می کند و کمک می کند گزینه ها سریع تر دیده شوند. این مزیت زمانی بیشتر است که هر مورد کوتاه، روشن و هم سطح با موارد دیگر باشد.

اگر یک بخش شامل چند ویژگی کوتاه است، فهرست می تواند اطلاعات را منظم تر کند. اما استفاده از فهرست برای هر مجموعه تصادفی از جمله ها نتیجه معکوس دارد؛ رابطه موضوعی میان موارد باید واقعی و قابل درک باشد.

مرورگرها برای ul معمولا فاصله و نشانگر پیش فرض دارند. این ظاهر ممکن است با طراحی صفحه هماهنگ نباشد، به ویژه اگر فهرست بخشی از منوی افقی یا یک کارت گرافیکی باشد. راه حل، تنظیم هدفمند CSS است؛ نه حذف ساختار معنایی و جایگزینی آن با متن های دستی.

اگر یک فهرست ده ها مورد یا توضیحات بلند داشته باشد، کاربر ممکن است نتواند بخش های مهم را سریع پیدا کند. در چنین شرایطی بهتر است موارد بر اساس موضوع دسته بندی شوند، عنوان های فرعی داشته باشند یا به چند بخش مستقل تقسیم شوند. هدف فهرست، نظم دادن به اطلاعات است، نه فشرده کردن بی رویه کل صفحه.

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

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

از تگ ul صرفا برای ایجاد فاصله یا تورفتگی بصری استفاده نکنید. اگر هدف شما فقط چیدمان است، CSS ابزار مناسب تری است. همچنین برای نمایش مراحلی با ترتیب مشخص، ol را انتخاب کنید و برای مجموعه هایی که ترتیبشان اهمیتی ندارد، از ul بهره ببرید. این انتخاب ها باعث می شوند معنای صفحه با محتوای واقعی هماهنگ بماند.

در پروژه های بزرگ تر، رعایت یک الگوی ثابت برای فهرست ها به خوانایی کد کمک می کند. فاصله گذاری منظم، تورفتگی مناسب در کد منبع و نام گذاری روشن کلاس های CSS، بازبینی را آسان تر می کند. در کنار این موارد، کد HTML را بررسی کنید تا تگ ها به شکل درست باز و بسته شده باشند و هر li در فهرست مربوط به خود قرار بگیرد.

تگ ul انتخاب مناسبی برای نمایش مجموعه ای از موارد مرتبط است که ترتیب آنها اهمیت ویژه ای ندارد. با قرار دادن هر مورد در li، ساختاری قابل فهم و قابل نگهداری ایجاد می کنید و می توانید ظاهر آن را با CSS با طراحی صفحه هماهنگ سازید. برای مراحل یا موارد دارای ترتیب مشخص، از ol استفاده کنید تا مفهوم محتوا درست منتقل شود.

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