আমরা আজকে দেখব html লিস্টের ধরণ । html এ আমরা ৪ ধরনের লিস্টের ব্যাবহার দেখতে পাই ।
1.ক্রমিকবিহিন লিস্ট (Non-serial list)
2.ক্রমিকযুক্ত লিস্ট (Serial list)
3.বর্ণনামূলক লিস্ট (Description list)
4.নেস্টেড লিস্ট (Nested list)
তবে ক্রমিকবিহিন ও ক্রমিকযুক্ত দিয়েই নেস্টেড লিস্ট তৈরি করা হয় ।
ক্রমিকবিহিন লিস্ট (Non-serial list) প্রকারভেদ :-
1.Dise List
2.Circle List
3.Square List
4.None List
ক্রমিকবিহিন লিস্ট (Non-serial list) এর উদাহরণ :-
1.Dise List
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML List Test</title>
</head>
<body bgcolor="#5FCC64">
<ul style="list-style-type:disc">
<li>Teaching</li>
<li>Bangla</li>
<li>bong71</li>
</ul>
</body>
</html>
2.Circle List
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML List Test</title>
</head>
<body bgcolor="#5FCC64">
<ul style="list-style-type:circle">
<li>Teaching</li>
<li>Bangla</li>
<li>bong71</li>
</ul>
</body>
</html>
3.Square List
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML List Test</title>
</head>
<body bgcolor="#5FCC64">
<ul style="list-style-type:Square">
<li>Teaching</li>
<li>Bangla</li>
<li>bong71</li>
</ul>
</body>
</html>
4.None List
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML List Test</title>
</head>
<body bgcolor="#5FCC64">
<ul style="list-style-type:none">
<li>Teaching</li>
<li>Bangla</li>
<li>bong71</li>
</ul>
</body>
</html>
বিশ্লেষণ:-
<ul>under line list
<li> line list
ক্রমিকযুক্ত লিস্ট (Serial list)প্রকারভেদ :-
1.Number List
2.Upper Case List
3.Lower Case List
4.Roman Upper Case List
5.Roman Lower Case List
ক্রমিকযুক্ত লিস্ট (Serial list) এর উদাহরণ :-
1.Number List
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML List Test</title>
</head>
<body bgcolor="#CABC30">
<ol type="1">
<li>Teaching</li>
<li>Bangla</li>
<li>bong71</li>
</ol>
</body>
</html>
2.Upper Case List
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML List Test</title>
</head>
<body bgcolor="#CABC30">
<ol type="A">
<li>Teaching</li>
<li>Bangla</li>
<li>bong71</li>
</ol>
</body>
</html>
3.Lower Case List
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML List Test</title>
</head>
<body bgcolor="#CABC30">
<ol type="a">
<li>Teaching</li>
<li>Bangla</li>
<li>bong71</li>
</ol>
</body>
</html>
4.Roman Upper Case List
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML List Test</title>
</head>
<body bgcolor="#CABC30">
<ol type="I">
<li>Teaching</li>
<li>Bangla</li>
<li>bong71</li>
</ol>
</body>
</html>
5.Roman Lower Case List
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML List Test</title>
</head>
<body bgcolor="#CABC30">
<ol type="i">
<li>Teaching</li>
<li>Bangla</li>
<li>bong71</li>
</ol>
</body>
</html>
বিশ্লেষণ:-
<ol>order list
<li> line list
বর্ণনামূলক লিস্ট (Description list)
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML List Test</title>
</head>
<body bgcolor="#A945D9">
<dl>
<dt>Site</dt>
<dd>Teaching Bangla bong71</
dd>
<dt>Author</dt>
<dd>Asibur Rahman</
dd>
</dl>
</body>
</html>
বিশ্লেষণ:-
<dl>ট্যাগ বর্ণনা করা হয় ।
<dt> নামের তালিকা বর্ণনা করা হয় ।
<dd> ডেটা বর্ণনা করা হয় ।
নেস্টেড লিস্ট (Nested list)
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML List Test</title>
</head>
<body bgcolor="#1AEAAA">
<ul>
<li>Teaching</li>
<li>website
<ul>
<li>blog</li>
<li>web</li>
<li>Bangla</li>
</ul>
<li>bong71</li>
</li>
</ul>
</body>
</html>