HTML-ல் ஒருசில விவரங்களை நாம் பட்டியலிட விரும்பினால் 3 விதமான பட்டியல்களைப் பயன்படுத்தலாம். அவை பின்வருமாறு.
Ordered list – தொடர்ச்சியான எண்களால் தகவல்களைப் பட்டியலிடுவது. <ol> எனும் இணை tags இந்த வேலையை செய்யும்.
Unordered list – புள்ளிகளை வைத்து தகவல்களைப் பட்டியலிடுவது. <ul> எனும் இணை tags இதற்குப் பயன்படுகிறது.
Definition list – ஒரு சிறு தலைப்பும், அதன்கீழ் அந்த தலைப்புக்கான விளக்கமுமாக தகவல்களைப் பட்டியலிடுவது. <dl> எனும் இணை tags இந்த வேலையைச் செய்யும்.
அடுத்தபடியாக பட்டியலில் வெளியாகும் ஒவ்வொரு தகவலும் <li> எனும் இணை tags மூலம் கொடுக்கப்படுகிறது. (li for list index). அதாவது நித்யா, வித்யா, சத்யா எனும் மூன்று பெயர்களைப் பட்டியலிட விரும்பினால், ஒவ்வொரு பெயரின் முன்னும் பின்னும் <li></li> tags-ஐ இணைக்க வேண்டும். பின்னர் இந்தப் பெயர்களை தொடர்ச்சியான எண்களால் பட்டியலிட வேண்டுமா அல்லது புள்ளிகளை வைத்து பட்டியலிட வேண்டுமா எனக் குறிப்பிடும் வகையில் அந்த மூன்று பெயர்களையும் கொடுப்பதற்கு முன்னர் <ol> அல்லது <ul> எனும் tags-ஐயும், மூன்று பெயர்களையும் கொடுத்து முடித்த பின்னர் கடைசியாக அதற்கான இணை tags-ஐயும் கொடுக்க வேண்டும்.
ஆனால் இந்த <li></li> tag-ஆனது definition list-க்குப் பொருந்தாது. இந்த முறையில் தலைப்பும், அதன் விளக்கமுமாக விவரங்கள் பட்டியலிடப்படுவதால், தலைப்பின் முன்னும் பின்னும் <dt></dt> tags-ம், (dt for definition title) தலைப்புக்கான விளக்கத்தின் முன்னும் பின்னும் <dd></dd> tag-ஐயும் (dd for definition data)பயன்படுத்த வேண்டும்.
இந்த மூன்று முறையிலும் விவரங்கள் பட்டியலிடப்படுவதை பின்வரும் உதாரணத்தில் காணலாம்.
File: list1.html
<html>
<head><title></title></head>
<body>
Types of Testing
<ol>
<li>Functional Testing</li>
<li>Non-functional testing</li>
</ol>
Types of non-functional testing
<ul>
<li>Performance testing</li>
<li>Automation testing</li>
</ul>
<dl>
<dt>Functional Testing</dt>
<dd>The functionality of an application will be tested.<dd>
<dt>Performance Testing</dt>
<dd>The performance of an application will be tested.<dd>
</dl>
</body>
<html>
Combined Lists
ஒரு் main list-ல் விவரங்களை பட்டியலிடும்போது, அதற்குள் sublist-ஐ உருவாக்குவதே combined listsஎனப்படும். பின்வரும் உதாரண்த்தில் ordered list-ன் கீழ் பட்டியலிடப்பட்டுள்ள Functional Testing எனும் விவரத்தின் கீழ் ஒருசில தகவல்கள் Unordered list முறையில் பட்டியலிடப்பட்டுள்ளதைக் காணலாம். அவ்வாறே Non-functional testing எனும் விவரத்தின் கீழும் தகவல்கள் unordered list முறையில் பட்டியலிடப்பட்டுள்ளன.
File: list2.html
<html>
<head><title></title></head>
<body>
Types of Testing
<ol>
<li>Functional Testing</li>
<ul><li>Integration testing</li><li>System testing</li></ul>
<li>Non-functional testing</li>
<ul><li>Automation testing</li><li>Regression testing</li></ul>
</ol>
</body>
<html>
இதன் வெளிப்பாடு பின்வருமாறு இருக்கும்.