Changing HTML List Bullet Styles

The HTML LIST ITEM tag is used to create bullets to display your list text.

You can change the style of your web page bullets by adding attributes to your <li> tag or your HTML List tag.

Ordered List

Numbered

HTML Code

HTML code viewed within an HTML document:

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

Browser View

HTML coding viewed through a web browser:

Numbered Special Start

HTML Code

HTML code viewed within an HTML document:

<ol start="5">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Browser View

HTML coding viewed through a web browser:

Lowercase Letters

HTML Code

HTML code viewed within an HTML document:

<ol type="a">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Browser View

HTML coding viewed through a web browser:

Capital Letters

HTML Code

HTML code viewed within an HTML document:

<ol type="A">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Browser View

HTML coding viewed through a web browser:

Capital Letters Special Start

HTML Code

HTML code viewed within an HTML document:

<ol type="A" start="3">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Browser View

HTML coding viewed through a web browser:

Lowercase Roman Numerals

HTML Code

HTML code viewed within an HTML document:

<ol type="i">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Browser View

HTML coding viewed through a web browser:

Capital Roman Numerals

HTML Code

HTML code viewed within an HTML document:

<ol type="I">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Browser View

HTML coding viewed through a web browser:

Capital Roman Numerals Special Start

HTML Code

HTML code viewed within an HTML document:

<ol type="I" start="7">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Browser View

HTML coding viewed through a web browser:

Definition List

HTML Code

HTML code viewed within an HTML document:

<dl>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
</dl>

Browser View

HTML coding viewed through a web browser:

Unordered List

HTML Code

HTML code viewed within an HTML document:

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

Browser View

HTML coding viewed through a web browser:

Bulleted Lists with Sub Bulleted Lists

HTML Code

HTML code viewed within an HTML document:

<ul type="disc">
<li>List item 1</li>
<li>List item 2</li>
<ul type="circle">
<li>List item 3</li>
<li>List item 4</li>
<ul type="square">
<li>List item 5</li>
<li>List item 6</li>
</ul>
</ul>
</ul>

Browser View

HTML coding viewed through a web browser:

Using bulleted lists within your web pages will give your site a more professional appearance. Use them to your advantage.

This concludes the HTML list bullet styles code.