এইচটিএমএল-এ তালিকা তৈরির জন্য আছে ul, ol এবং li ট্যাগ।
নিচে বাংলাদেশে বিভাগগুলোর তালিকা তৈরির কোড দেখানো হলো।
<!DOCTYPE html> <html> <head> <title>Html List Demo</title> </head> <body> <ul> <li>Dhaka</li> <li>Rajshahi</li> <li>Chattogram</li> <li>Khulna</li> <li>Rangpur</li> <li>Barishal</li> <li>Sylhet</li> <li>Mymensingh</li> </ul> </body> </html>
এখানে লিস্টের জন্য দুটি এলিমেন্ট ব্যবহার করা হয়েছে, ul এবং li । ul মানে আনঅর্ডারড লিস্ট (unordered list) এবং li মানে লিস্ট আইটেম (list item)। ক্রমবিহীন তালিকা তৈরি করতে ul এলিমেন্ট ব্যবহার করা হয়। li এলিমেন্ট ব্যবহার করা হয় তালিকার উপাদানগুলো রাখতে।
আর ক্রমসহ তালিকা তৈরি করতে ul-এর পরিবর্তে ol ব্যবহার করতে হবে। এখানে ol মানে অর্ডারড লিস্ট (ordered list)।
এইচটিএল-এ তালিকার ভেতরেও তালিকা তৈরি করা যায়। যেমন- সিলেট বিভাগের জেলাগুলো যদি তালিকায় থাকে,
- Barishal
- Sylhet
- Sunamganj
- Sylhet
- Habiganj
- Maulavibazr
- Mymensingh
এরকম তালিকার ভেতরে তালিকা বা নেস্টেড তালিকা (nested list) তৈরি করার জন্য লিস্টের ভেতরে আরেকটি লিস্ট ঢুকিয়ে দিতে হবে
<!DOCTYPE html> <html> <body> <ul> <li>Dhaka</li> <li>Rajshahi</li> <li>Chattogram</li> <li>Khulna</li> <li>Rangpur</li> <li>Barishal</li> <li>Sylhet</li> <ul> <li>Sunamganj</li> <li>Sylhet</li> <li>Habiganj</li> <li>Maulavibazr</li> </ul> <li>Mymensingh</li> </ul> </body> </html>
উপরের কোডটি একটি এইচটিএমএল ডকুমেন্টে রাখলে নিচের ছবির মতো আউটপুট দেখা যাবে
চাইলে এভাবে জেলার ভেতরে উপজেলারও আরেকটি লিস্ট তৈরি করা যায়।
যখন ক্রমবিহীন (unordered) কোনো তালিকা তৈরি করা হয়, তখন তালিকার উপাদানের আগে সাধারণত বিভিন্ন ধরনের চিহ্ন ব্যবহার করা হয়। এইচটিএমএলে একটি গোল কালো ফোঁটা (ডিস্ক- disk) চিহ্ন ব্যবহার করা হয়। তবে চাইলে এখানে সার্কেল circle বা স্কয়ার (square)-ও ব্যবহার করা যায়। সেজন্য এইচটিএমএল উপাদানের ভেতরে অ্যাট্রিবিউট (attribute) ব্যবহার করতে হবে। অ্যাট্রিবিউট হচ্ছে এলিমেন্টের একটি অংশ যা এলিমেন্টের কার্যক্ষমতা বা ফাংশনালিটি বৃদ্ধি করে। একটি এলিমেন্টের একাধিক অ্যাট্রিবিউট থাকতে পারে, আবার নাও থাকতে পারে।
অ্যাট্রিবিউট লেখার নিয়ম নিচের মতো-
<tag attribute_name="value">
অর্থাৎ অ্যাটিবিউটের নামের পর একটি সমান চিহ্ন দিয়ে ডাবল কোটেশনের ভেতরে এর মান লিখতে হয়। তালিকায় স্কয়ার বা সার্কেল চিহ্ন ব্যবহার করতে চাইলে type নামের একটি অ্যাট্রিবিউট ব্যবহর করতে হবে।
<!DOCTYPE html> <html> <body> <ul type="square"> <li>item 1</li> <li>item 2</li> </ul> </html>
পূর্বের কোডটি লিখলে লিস্ট আইটেমে বর্গাকৃতি চিহ্ন ব্যবহৃত হবে। একইভাবে <ul type=”circle”> বসালে বৃত্তাকৃতি চিহ্ন ব্যবহৃত হবে।
| এইচটিএমএল কোড | আউটপুট |
|---|---|
| <ul type=”square”> <i>Item 1</li> <li>Item 2</li> </ul> | Item 1Item 2 |
| <ul type=”Circle”> <li>Item 1</li> <li>Item 2</li> </ul> | Item 1Item 2 |
| <ul type=”disk”> <li>Item 1</li> <li>Item 2</li> </ul> | Item 1Item 2 |
নিচের কোডটি এমনভাবে পরিবর্তন কর যেন শুরুতে বৃত্তাকৃতি চিহ্ন থাকে।
<!DOCTYPE html> <html> <body> <ul> <li>Dhaka</li> <li>Rajshahi</li> <li>Chattogram</li> <li>Khulna</li> <li>Rangpur</li> <li>Barishal</li> <li>Sylhet</li> <ul> <li>Sunamganj</li> <li>Sylhet</li> <li>Habiganj</li> <li>Maulavibazr</li> </ul> <li>Mymensingh</li> </ul> </body> </html>
অর্ডারড লিস্টের ক্ষেত্রেও বিভিন্ন পদ্ধতি অনুসরণ করা যায়। যেমন- ছোট হাতের বা বড় হাতের রোমান হরফ (i, ii, iii বা l, ll, lll) অথবা ইংরেজি হরফ (a, b, c; A, B, C) ইত্যাদি। এখানেও type অ্যাট্রিবিউট ব্যবহার করতে হবে।
| এইচটিএমএল কোড | আউটপুট |
|---|---|
| <ol type=”i”> <i>Item 1</li> <li>Item 2</li> </ol> | Item 1Item 2 |
| <ol type=”I”> <li>Item 1</li> <li>Item 2</li> </ol> | Item 1Item 2 |
| <ol type=”a”> <li>Item 1</li> <li>Item 2</li> <ol> | Item 1Item 2 |
| <ol type=”A”> <li>Item 1</li> <li>Item 2</li> <ol> | Item 1Item 2 |
| <ol type=”1″> <li>Item 1</li> <li>Item 2</li> </ol> | Item 1Item 2 |
অর্ডারড লিস্টে আবার কখনো কখনো কোনো নির্দিষ্ট সংখ্যা থেকে শুরু করতে হতে পারে। যেমন- কোনো ক্লাসের 21 থেকে 30 রোলধারী শিক্ষার্থীর তালিকা দেখাতে হতে পারে। এক্ষেত্রে start অ্যাট্রিবিউট ব্যবহার করতে হবে। টাইপ a, A, i যাই হোক না কেন, start অ্যাট্রিবিউটের মান সব সময় সংখ্যা (numeric) হবে।
<!DOCTYPE html> <html> <body> <ol type ="1" start="21"> <li>Nayeem Sheikh</li> <li>Robiul Hasan</li> <ol> </body> </html>