HTML List Bullet Styles

 

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:
html-line

<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:
html-line

list

Numbered Special Start

HTML Code

HTML code viewed within an HTML document:
html-line

<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:
html-line

list

Lowercase Letters

HTML Code

HTML code viewed within an HTML document:
html-line

<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:
html-line

list

Capital Letters

HTML Code

HTML code viewed within an HTML document:
html-line

<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:
html-line

list

Capital Letters Special Start

HTML Code

HTML code viewed within an HTML document:
html-line

<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:
html-line

list

Lowercase Roman Numerals

HTML Code

HTML code viewed within an HTML document:
html-line

<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:
html-line

list

Capital Roman Numerals

HTML Code

HTML code viewed within an HTML document:
html-line

<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:
html-line

list

Capital Roman Numerals Special Start

HTML Code

HTML code viewed within an HTML document:
html-line

<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:
html-line

list

 

Definition List

HTML Code

HTML code viewed within an HTML document:
html-line

<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:
html-line

list

Unordered List

HTML Code

HTML code viewed within an HTML document:
html-line

<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:
html-line

list

Bulleted Lists with Sub Bulleted Lists

HTML Code

HTML code viewed within an HTML document:
html-line

<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:
html-line

list

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.

 

 

 
Visit the following pages for a wealth of copy and paste codes and tips:

HTML Tips
Copy and paste special effect HTML codes for your web page.

HTML Codes
An HTML codes chart you can use to copy and paste codes into your web page.

HTML Color Codes
An HTML color codes chart you can use to copy and paste color codes into your web page.

JavaScript Codes
Copy and paste special effect JavaScript codes for your web page.

Web Design Tips
Tips, tricks, and special effect codes for your web page.

HTML Tags
A list of HTML tags.

HTML 5 Tags
A list of the latest HTML tags to be developed.

ASCII Codes
Special text characters and code for your web page.