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

HTML

HTML Lists Examples

Enjoy this page?

ABOUT

HTML/MARKUP

CSS & DESIGN

SCRIPTING

DATABASE

WEB HOSTING