انواع لیست ها در HTML (ترتیبی و غیرترتیبی)

زمانی که در لیست بندی و نوشتن اسامی، ترتیب برایمان مهم باشد از لیست‌های ترتیبی یا Ordered List استفاده می‌کنیم. تگی که برای ایجاد لیست‌های ترتیبی به کار می‌رود تگ <ol></ol> است. برای نوشتن موارد لیست از <li></li> درون تگ ol استفاده می‌کنیم. برای مثال به صورت زیر عمل می‌کنیم.

<ol>

<li>رضا</li>

<li>محمد</li>

<li>علی </li>

</ol>

اگر این مثال را اجرا کنید در خروجی می‌بینید که اسامی، لیست بندی شده‌اند. جالب اینکه با اعداد لیست بندی شده‌اند. ما می‌توانیم با استفاده از اتربیوت type این شکل را به صورت زیر تغییر دهیم.

<ol type=”A”>

<li>رضا</li>

<li>محمد</li>

<li>علی </li>

</ol>

در این حالت اسامی‌با حروف بزرگ انگلیسی نمایش داده می‌شوند. اتربیوت type مقادیر دیگری نیز می‌تواند بگیرد. مثلا a , i, I  و مقدار 1 که همان مقدار پیش فرض است. می‌توانید این مقادیر را امتحان کنید تا تغییرات را ببینید. اکنون به سراغ لیست‌های غیر ترتیبی می‌رویم.

لیست های غیر ترتیبی در HTML

در مواقعی که ترتیب برای ما مهم نباشد از لیست‌های غیر ترتیبی یا unordered list استفاده می‌کنیم. تگی که برای این حالت وجود دارد تگ <ul></ul> است. اگر مثال زیر را اجرا کنید می‌بینید که لیست بندی به وسیله ی علامت • است.

<ul>

<li>رضا</li>

<li>محمد</li>

<li>علی </li>

</ul>

در این حالت نیز می‌توانیم با اتربیوت style حالت‌های مختلفی را برای لیست بندی ایجاد کنیم. کافی است اتربیوت زیر را درون تگ آغازین ul قرار دهیم.

Style=”list-style-type:disc”

disc مقدار پیش فرض است. می‌توانیم از مقادیر دیگری مثل circle , square  و none نیز برای این خصوصیت استفاده کنیم.

لیست های توضیحی در HTML

نوع دیگری از لیست‌ها، لیست‌های توضیحاتی یا description list هستند. برای این نوع از لیست‌ها از تگ زیر استفاده می‌کنیم.

<dl>

<dt>آبی

<dd>یک رنگ سرد است</dd>

</dt>

<dt>قرمز

<dd>یک رنگ گرم است</dd>

</dt>

</dl>

همانطور که مشاهده می‌کنید از تگ dt برای نوشتن موارد لیست و از تگ dd برای نوشتن توضیحات استفاده می‌کنیم.

نکته ی پایانی این است که ما می‌توانیم از لیست‌ها به صورت تو در تو استفاده کنیم. مثال زیر این موضوع را به خوبی نشان می‌دهد.

<ul>

<li>کلاه</li>

<li>دستکش

<ol>

<li>دستکش آبی</li>

<li>دستکش قرمز</li>

</ol>

<li>شال</li>

</ul>

تگ های مهم و کاربردی HTML

اکنون برخی تگ‌های دیگر که مربوط به متون هستند را برای شما بیان می‌کنیم. اگر تاکنون از برنامه ی Microsoft Word استفاده کرده باشید، احتمالا از ویژگی bold کردن استفاده کرده‌اید. در اینجا نیز برای بلد کردن متون می‌توانید از تگ <b> من یک جمله ی بولد شده هستم </b> استفاده کنید. این تگ متن شما را بولد می‌کند. اما تگ دیگری وجود دارد که آن هم متن را بولد می‌کند با این تفاوت که مفهوم مهم بودن را نیز به همراه دارد. تگ <strong></strong> یعنی در ظاهر کار این دو تگ شبیه به هم است اما تفاوت معنایی دارند و این مفهوم مهم بودن برای مرور گرها و موتور‌های جستجو اهمیت دارد.

تگ <i></i> برای ایتالیک کردن متن به کار می‌رود. تگ <em></em> نیز همین کار را انجام می‌دهد و البته مفهوم تاکید کردن را نیز به همراه دارد. تگ‌های دیگری که علاوه بر ظاهر مفهومی‌را به مرورگرها منتقل می‌کنند عبارتند از, <del> <markup> , <sub> , <sup> و… که می‌توانید هر کدام از آن‌ها را به کار ببرید و با کار آن‌ها بیشتر آشنا شوید.