FREE Hosting!
With every domain you register with ZappyHost you get FREE hosting.

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?

Add this page to your Favorites
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
Help support Quackit by making a donation

Oh, and thank you for supporting Quackit!

Need Website Content?
Get unique, quality digital content for your website.

270+ Website Templates
800+ Flash Templates
25,000+ Images, Logos
30,000+ e-Books
15,000+ Scripts
27,000+ Animated GIFs
21,000+ Ringtones
...and much more!

Get your content now!

HTML

HTML Lists Examples

Enjoy this website?

ABOUT

HTML/MARKUP

CSS & DESIGN

SCRIPTING

DATABASE

WEB HOSTING