HTML Lists Examples

Related:
• All HTML Examples

Back to HTML Examples List

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