لیستها معمولا به سه صورت ترتیبی و غیر ترتیبی و بولت دار موجود می باشند. برای ساختن لیست ترتیبی می بایست به صورت زیر عمل کنید:
ابتدا تگ ol را نوشته و سپس مورارد داخل آن را به صورت تگهای li بنویسید. مثال:


<ol>
<li>Number one</li>
<li>Number two</li>
<li>Number three</li>
</ol>


تقریبا تمامی مرورگرها خروجی این مثال را به صورت زیر نمایش خواهند داد:


1. Number one
2. Number two
3. Number three


برای ساختن لیستهای غیر ترتیبی نیز باید به جای تگ ol، از تگ ul استفاده کنید. تمامی مروگرها، لیست های غیر ترتیبی را به صورت دایره و توپر نمایش می دهند. مثال:


<ul>
<li>Number one</li>
<li>Number two</li>
<li>Number three</li>
</ul>


برای عوض کردن تنظیمات پیش فرض، می توانید از یک style به صورت زیر استفاده کنید.


style="list-style-type: style-type"


مقادیر style-type، یکی از مقادیر زیر می تواند باشد:
square (مربع تو پر)
circle (دایره تو خالی)
disc (دایره توپر)
decimal (اعداد)
upper-roman (اعداد یونانی – حروف بزرگ)
lower-roman (اعداد یونانی – حروف کوچک)
upper-alpha (حروف انگلیسی – حروف بزرگ)
lower-alpha (حروف انگلیسی – حروف کوچک)
مثال:


<ul style="list-style-type: circle">
<li>Test List</li>
</ul>


خاصیتی در تگ ol وجود دارد که به مرورگر می گوید لیستها را از چه شماره ای نمایش دهد. به طور پیش فرض تمامی مرورگرها لیستهای ترتیبی را از اعداد 1 نمایش می دهند. برای تغییر این عدد می توانید از خاصیت start="n" در تگ ol استفاده کنید.


<ol start="50">
<li>Number 50</li>
</ol>

همچنین می توانید از خاصیت value="n" در یکی از تگهای li استفاده کنید تا بدین وسیله شماره را تغییر دهید. البته دقت داشته باشید که اگر مقدار یکی از تگهای li را تغییر دهید، تگهای بعد از آن بر حسب همان تگ اضافه خواهند شد. به مثال زیر توجه کنید:


<ol start="50">
<li>Number 50</li>
<li>Number 51</li>
<li value="60">Number 60</li>
<li>Number 61</li>
</ol>

خروجی این مثال به صورت زیر خواهد بود:


50. Number 50
51. Number 51
60. Number 60
61. Number 61


علاوه بر بولتهای از پیش تعیین شده، شما می توانید بولت مورد نظر خود را در لیستها به کار ببرید. برای این کار می بایست از style زیر استفاده کنید:


style="list-style-image: url(ADDRESS)"


مثال:


<ul style="list-style-image: url(http://www.something.com/something.gif)">
<li>YOUR LIST</li>
</ul>

تگهای dl، dt و dd
نوعی دیگر از لیستها وجود دارد که در واقع برای توضیح کلمات به کار می رود. طرز کار این نوع لیستها به این صورت است که ابتدا تگ dl را نوشته، سپس درون تگ dt کلمه مورد نظر خود را و در تگ dd توضیح مربوط به آن کلمه را می نویسید. به مثال زیر توجه کنید:


<dl><br>
<dt>Word no.1</dt>
<dd>Information about Word no.1</dd>
<dt>Word no.2</dt>
<dd>Information about Word no.2</dd>
</dl>

خروجی این عبارت به صورت زیر خواهد بود:


Word no.1
Information about Word no.1
Word no.2
Information about Word no.2