HTML Lists 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.

Code	Result
<ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> <div class="more-info">More info: <a href="#application.urlroot#/html/tags/html_ol_tag.cfm">HTML <code>&lt;ol&gt;</code> Tag</a>, <a href="#application.urlroot#/html/tags/html_li_tag.cfm">HTML <code>&lt;li&gt;</code> Tag</a>, <a href="#application.urlroot#/html/codes/list/">HTML List</a>.</div>	List item 1 List item 2 List item 3 More info: HTML <ol> Tag, HTML <li> Tag, HTML List.

Code	Result
<ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <div class="more-info">More info: <a href="#application.urlroot#/html/tags/html_ul_tag.cfm">HTML <code>&lt;ul&gt;</code> Tag</a>, <a href="#application.urlroot#/html/tags/html_li_tag.cfm">HTML <code>&lt;li&gt;</code> Tag</a>, <a href="#application.urlroot#/html/codes/list/">HTML List</a>.</div>	List item 1 List item 2 List item 3 More info: HTML <ul> Tag, HTML <li> Tag, HTML List.

Code

Result

<dl> <dt>Term 1</dt> <dd>Definition of term 1</dd> <dt>Term 2</dt> <dd>Definition of term 2</dd> </dl> <div class="more-info">More info: <a href="#application.urlroot#/html/tags/html_dl_tag.cfm">HTML <code>&lt;dl&gt;</code> Tag</a>, <a href="#application.urlroot#/html/tags/html_dt_tag.cfm">HTML <code>&lt;dt&gt;</code> Tag</a>, <a href="#application.urlroot#/html/tags/html_dd_tag.cfm">HTML <code>&lt;dd&gt;</code> Tag</a>, <a href="#application.urlroot#/html/codes/list/">HTML List</a>.</div>

Term 1 Definition of term 1 Term 2 Definition of term 2 More info: HTML <dl> Tag, HTML <dt> Tag, HTML <dd> Tag, HTML List.

Code	Result
<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> <div class="more-info">More info: <a href="#application.urlroot#/css/properties/css_list-style-image.cfm">CSS <code>list-style-image</code> Property</a>.</div>	List item 1 List item 2 List item 3 More info: CSS list-style-image Property.

Code	Result
<ul style="list-style-type:none;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <div class="more-info">More info: <a href="#application.urlroot#/css/properties/css_list-style-type.cfm">CSS <code>list-style-type</code> Property</a>.</div>	List item 1 List item 2 List item 3 More info: CSS list-style-type Property.

Code	Result
<ul style="list-style-type:disc;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <div class="more-info">More info: <a href="#application.urlroot#/css/properties/css_list-style-type.cfm">CSS <code>list-style-type</code> Property</a>.</div>	List item 1 List item 2 List item 3 More info: CSS list-style-type Property.

Code	Result
<ul style="list-style-type:circle;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <div class="more-info">More info: <a href="#application.urlroot#/css/properties/css_list-style-type.cfm">CSS <code>list-style-type</code> Property</a>.</div>	List item 1 List item 2 List item 3 More info: CSS list-style-type Property.

Code	Result
<ul style="list-style-type:decimal;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <div class="more-info">More info: <a href="#application.urlroot#/css/properties/css_list-style-type.cfm">CSS <code>list-style-type</code> Property</a>.</div>	List item 1 List item 2 List item 3 More info: CSS list-style-type Property.

Code	Result
<ul style="list-style-type:decimal-leading-zero;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <div class="more-info">More info: <a href="#application.urlroot#/css/properties/css_list-style-type.cfm">CSS <code>list-style-type</code> Property</a>.</div>	List item 1 List item 2 List item 3 More info: CSS list-style-type Property.

Code	Result
<ul style="list-style-type:lower-roman;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <div class="more-info">More info: <a href="#application.urlroot#/css/properties/css_list-style-type.cfm">CSS <code>list-style-type</code> Property</a>.</div>	List item 1 List item 2 List item 3 More info: CSS list-style-type Property.

Code	Result
<ul style="list-style-type:upper-roman;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <div class="more-info">More info: <a href="#application.urlroot#/css/properties/css_list-style-type.cfm">CSS <code>list-style-type</code> Property</a>.</div>	List item 1 List item 2 List item 3 More info: CSS list-style-type Property.

Code	Result
<ul style="list-style-type:lower-greek;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <div class="more-info">More info: <a href="#application.urlroot#/css/properties/css_list-style-type.cfm">CSS <code>list-style-type</code> Property</a>.</div>	List item 1 List item 2 List item 3 More info: CSS list-style-type Property.

Code	Result
<ul style="list-style-type:lower-alpha;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <div class="more-info">More info: <a href="#application.urlroot#/css/properties/css_list-style-type.cfm">CSS <code>list-style-type</code> Property</a>.</div>	List item 1 List item 2 List item 3 More info: CSS list-style-type Property.

Code	Result
<ul style="list-style-type:lower-latin;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <div class="more-info">More info: <a href="#application.urlroot#/css/properties/css_list-style-type.cfm">CSS <code>list-style-type</code> Property</a>.</div>	List item 1 List item 2 List item 3 More info: CSS list-style-type Property.

Code	Result
<ul style="list-style-type:upper-alpha;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <div class="more-info">More info: <a href="#application.urlroot#/css/properties/css_list-style-type.cfm">CSS <code>list-style-type</code> Property</a>.</div>	List item 1 List item 2 List item 3 More info: CSS list-style-type Property.

Code	Result
<ul style="list-style-type:upper-latin;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <div class="more-info">More info: <a href="#application.urlroot#/css/properties/css_list-style-type.cfm">CSS <code>list-style-type</code> Property</a>.</div>	List item 1 List item 2 List item 3 More info: CSS list-style-type Property.

Code	Result
<ul style="list-style-type:hebrew;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <div class="more-info">More info: <a href="#application.urlroot#/css/properties/css_list-style-type.cfm">CSS <code>list-style-type</code> Property</a>.</div>	List item 1 List item 2 List item 3 More info: CSS list-style-type Property.

Code	Result
<ul style="list-style-type:armenian;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <div class="more-info">More info: <a href="#application.urlroot#/css/properties/css_list-style-type.cfm">CSS <code>list-style-type</code> Property</a>.</div>	List item 1 List item 2 List item 3 More info: CSS list-style-type Property.

Code	Result
<ul style="list-style-type:gregorian;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <div class="more-info">More info: <a href="#application.urlroot#/css/properties/css_list-style-type.cfm">CSS <code>list-style-type</code> Property</a>.</div>	List item 1 List item 2 List item 3 More info: CSS list-style-type Property.

Code	Result
<ul style="list-style-type:cjk-ideographic;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <div class="more-info">More info: <a href="#application.urlroot#/css/properties/css_list-style-type.cfm">CSS <code>list-style-type</code> Property</a>.</div>	List item 1 List item 2 List item 3 More info: CSS list-style-type Property.

Code	Result
<ul style="list-style-type:hiragana;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <div class="more-info">More info: <a href="#application.urlroot#/css/properties/css_list-style-type.cfm">CSS <code>list-style-type</code> Property</a>.</div>	List item 1 List item 2 List item 3 More info: CSS list-style-type Property.

Code	Result
<ul style="list-style-type:katakana;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <div class="more-info">More info: <a href="#application.urlroot#/css/properties/css_list-style-type.cfm">CSS <code>list-style-type</code> Property</a>.</div>	List item 1 List item 2 List item 3 More info: CSS list-style-type Property.

Code	Result
<ul style="list-style-type:hiragana-iroha;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <div class="more-info">More info: <a href="#application.urlroot#/css/properties/css_list-style-type.cfm">CSS <code>list-style-type</code> Property</a>.</div>	List item 1 List item 2 List item 3 More info: CSS list-style-type Property.

Code	Result
<ul style="list-style-type:katakana-iroha;"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <div class="more-info">More info: <a href="#application.urlroot#/css/properties/css_list-style-type.cfm">CSS <code>list-style-type</code> Property</a>.</div>	List item 1 List item 2 List item 3 More info: CSS list-style-type Property.

Enjoy this page?

2. 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
3. Link to Quackit using one of these banner ads.

Thanks for supporting Quackit!