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

<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>

<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

<dl>
<dt>Term 1</dt>
<dd>Definition of term 1</dd>
<dt>Term 2</dt>
<dd>Definition of term 2</dd>
</dl>

<ul style="list-style-image:url(/pix/printer_icon.gif);">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

<ul style="list-style-type:none;">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

<ul style="list-style-type:disc;">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

<ul style="list-style-type:circle;">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

<ul style="list-style-type:decimal;">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

<ul style="list-style-type:decimal-leading-zero;">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

<ul style="list-style-type:lower-roman;">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

<ul style="list-style-type:upper-roman;">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

<ul style="list-style-type:lower-greek;">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

<ul style="list-style-type:lower-alpha;">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

<ul style="list-style-type:lower-latin;">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

<ul style="list-style-type:upper-alpha;">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

<ul style="list-style-type:upper-latin;">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

<ul style="list-style-type:hebrew;">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

<ul style="list-style-type:armenian;">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

<ul style="list-style-type:gregorian;">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

<ul style="list-style-type:cjk-ideographic;">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

<ul style="list-style-type:hiragana;">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

<ul style="list-style-type:katakana;">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

<ul style="list-style-type:hiragana-iroha;">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

<ul style="list-style-type:katakana-iroha;">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

Web.QHMIT.com