FREE Hosting!

With every domain name you register with ZappyHost, you get FREE hosting.

$1.99 Domain Names

With every new non-domain purchase thru ZappyHost, you get a domain name for only $1.99.

HTML Lists Examples

Related:
• All HTML Examples

This page contains examples of HTML lists - examples of list-specific code that you can use for your own website.

To use the code, copy it straight from the text box and paste it into your own website. Feel free to modify it as required.

Some examples may not display properly. This will depend on your browser/user agent.

Description	Code	Result
Ordered List (numbered list)	<!-- HTML codes by Quackit.com --> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>	List item 1 List item 2 List item 3
Unordered List (unnumbered list)	<!-- HTML codes by Quackit.com --> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>	List item 1 List item 2 List item 3
Definition List	<!-- HTML codes by Quackit.com --> <dl> <dt>Term 1</dt> <dd>Definition of term 1</dd> <dt>Term 2</dt> <dd>Definition of term 2</dd> </dl> <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>	Term 1 Definition of term 1 Term 2 Definition of term 2
Images as Bullets	<!-- HTML codes by Quackit.com --> <ul style="list-style-image:url(http://www.quackit.com/pix/printer_icon.gif);"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>	List item 1 List item 2 List item 3
Bullet Type: 'disc'	<!-- HTML codes by Quackit.com --> <ul style="list-style-type:disc;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>	List item 1 List item 2 List item 3
Bullet Type: 'circle'	<!-- HTML codes by Quackit.com --> <ul style="list-style-type:circle;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>	List item 1 List item 2 List item 3
Bullet Type: 'square'	<!-- HTML codes by Quackit.com --> <ul style="list-style-type:square;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>	List item 1 List item 2 List item 3
Bullet Type: 'decimal'	<!-- HTML codes by Quackit.com --> <ul style="list-style-type:decimal;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>	List item 1 List item 2 List item 3
Bullet Type: 'decimal-leading-zero'	<!-- HTML codes by Quackit.com --> <ul style="list-style-type:decimal-leading-zero;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>	List item 1 List item 2 List item 3
Bullet Type: 'lower-roman'	<!-- HTML codes by Quackit.com --> <ul style="list-style-type:lower-roman;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>	List item 1 List item 2 List item 3
Bullet Type: 'upper-roman'	<!-- HTML codes by Quackit.com --> <ul style="list-style-type:upper-roman;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>	List item 1 List item 2 List item 3
Bullet Type: 'lower-greek'	<!-- HTML codes by Quackit.com --> <ul style="list-style-type:lower-greek;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>	List item 1 List item 2 List item 3
Bullet Type: 'lower-alpha'	<!-- HTML codes by Quackit.com --> <ul style="list-style-type:lower-alpha;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>	List item 1 List item 2 List item 3
Bullet Type: 'lower-latin'	<!-- HTML codes by Quackit.com --> <ul style="list-style-type:lower-latin;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>	List item 1 List item 2 List item 3
Bullet Type: 'upper-alpha'	<!-- HTML codes by Quackit.com --> <ul style="list-style-type:upper-alpha;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>	List item 1 List item 2 List item 3
Bullet Type: 'upper-latin'	<!-- HTML codes by Quackit.com --> <ul style="list-style-type:upper-latin;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>	List item 1 List item 2 List item 3
Bullet Type: 'hebrew'	<!-- HTML codes by Quackit.com --> <ul style="list-style-type:hebrew;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>	List item 1 List item 2 List item 3
Bullet Type: 'armenian'	<!-- HTML codes by Quackit.com --> <ul style="list-style-type:armenian;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>	List item 1 List item 2 List item 3
Bullet Type: 'gregorian'	<!-- HTML codes by Quackit.com --> <ul style="list-style-type:gregorian;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>	List item 1 List item 2 List item 3
Bullet Type: 'cjk-ideographic'	<!-- HTML codes by Quackit.com --> <ul style="list-style-type:cjk-ideographic;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>	List item 1 List item 2 List item 3
Bullet Type: 'hiragana'	<!-- HTML codes by Quackit.com --> <ul style="list-style-type:hiragana;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>	List item 1 List item 2 List item 3
Bullet Type: 'katakana'	<!-- HTML codes by Quackit.com --> <ul style="list-style-type:katakana;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>	List item 1 List item 2 List item 3
Bullet Type: 'hiragana-iroha'	<!-- HTML codes by Quackit.com --> <ul style="list-style-type:hiragana-iroha;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>	List item 1 List item 2 List item 3
Bullet Type: 'katakana-iroha'	<!-- HTML codes by Quackit.com --> <ul style="list-style-type:katakana-iroha;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>	List item 1 List item 2 List item 3
Bullet Type: 'none'	<!-- HTML codes by Quackit.com --> <ul style="list-style-type:none;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>	List item 1 List item 2 List item 3

Enjoy this website?

Link to this page (copy/paste into your own website or blog):
<a href="http://www.quackit.com/html/examples/html_lists_examples.cfm">HTML Lists Examples</a> from Quackit.com
Add this page to your favorite social bookmarks sites:
Add this page to your Favorites