3 لیست مهم در HTML5

خانه » بلاگ » html » 3 لیست مهم در HTML5

در این مقاله از وب یار می خواهیم انواع لیست ها را در HTML5 که شامل لیست مرتب ، لیست نامرتب و لیست توضیحات را مورد برسی قرار دهیم .

آموزش لیست ها در HTML5

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

با کمک لیست ها می توانید موضوعات مرتبط به هم را در یک دسته قرار داده و آن ها را دسته بندی نمایید؛ همچنین ، لیست ها در HTML5  این امکان را به شما می دهند تا با تعداد خط کد کمتر ، چه برای استایل دهی و چه برای تعیین ساختار ، منو های بسایر زیبا و با امکانات ویژه را طراحی نمایید.

لیست ها در HTML5  به 3 دسته کلی تقسیم می شوند و همین تقسیم بندی لیست ها ، کار با لیست ها در HTML5  را بسیار راحت نموده است.این لیست ها شامل موارد زیر هستند :

Unordered Lists

Ordered Lists

Description Lists

در ادامه به برسی این دسته از لیست ها در HTML5  خواهیم پرداخت.

لیست های نامرتب یا   HTML5 در unordered lists

در ایندسته از لیست ها در HTML5 موارد و گذینه های لیست اهمیت نداشته و صرفا مواردی که به هم دیگر مرتبط هستند ، در کنار هم قرار می گیرند ؛به عنوان نمونه ، به لیست زیر توجه کنید:

انواع نوشیدنی های گرم

• قهوه
• چای
• نسکافه

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

برای نوشتن چنین لیست هایی باید از تگ <ul> استفاده کنید و برای نوشتن آیتم های داخل این لیست از تگ < li > کمک بگیرید. در واقع نحوه ی نوشتن لیست بالا در HTML5 به شکل زیر است :

<ul>

<li/> قهوه <li>

<li/> چای <li>

<li/> نسکافه <li>

<ul/>

لیست های مرتب یا Ordered Lists

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

1. مهر
2. آبان
3. آذر

در این لیست ها جایگاه هر مورد از لیست اهمیت دارد و نمی توان برای مثال از ماه آذر در جایگاه ماه اول فصل پاییز استفاده کرد ، زیرا ترتیب و توالی در ایجاد این لیست ، برای ما دارای اهمیت است.

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

نحوه ی نوشتن لیست بالا در HTML5 به شکل زیر است :

<ol>

<li/> مهر<li>

<li/> آبان <li>

<li/> آذر <li>

<ol/>

لیست توضیحات Description Lists

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

HTML

HyperText Markup Language

CSS

Cascading Style Sheets

JS

JavaScript

همان طور که مشاهده می کنید برای هر یک از آیتم های HTML , CSS , JS در خط زیرین خود شرح کوتاهی وجود دارد که هر یک از آیتم های لیست را توصیف می نماید.

برای نوشتن این نوع لیست ها از تگ < dl> استفاده می شود. هم چنین نام آیتم در تگ < dt> و توصیف آن در تگ < dd> نوشته می شود.

لیست توصیفی بالا به صورت زیر در HTML نوشته می شود :

<dl>

<dt > HTML </dt >

<dd >  HyperText Markup Language </dd >

<dt >CSS </dt >

<dd > Cascading Style Sheets </dd >

<dt > JS </dt >

<dd > JavaScript </dd >

<dl/>

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

لیست ها در HTML5  تنها بخش کوچکی از تگ هایی هستند که با بروز شدن HTML  برنامه نویسی وب را تا حد زیادی متحول کردند. اما این تها بخش کوچکی از تحولاتی است که HTML5 به همراه خود داشته است.

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

این مقاله را با جمله ای از بیارن استراستروپ ، برنامه نویس بزرگ ، به پایان می بریم.

“کدی بنویسید که کار کنه، اصولی باشد و در عین‌ حال سریع اجرا بشه.”