Format Bullet Points in HTML Unordered Lists

In HTML there are several ways to show lists. You can use ordered lists ( <ol> Tag), which prefixes each item with a continous number. You can also use unordered lists, which prefix each item with a bullet point by default.( <ul> Tag).
When using unordered lists, you can modify the HTML tag to use other symbols.

There is an other way to modify an unordered list by using CSS, which offers much more possibilities. But today I’ll show you the simple HTML way.

Unordered Lists are marked-up by the <ul> Tag. Each list item is marked-up by a <li> Tag. A simple list looks like this:

<ul>
	<li>Punkt 1</li>
	<li>Punkt 2</li>
	<li>Punkt 3</li>
</ul>

Which looks like:

• Punkt 1
• Punkt 2
• Punkt 3

Change the symbol

With HTML you can change the appearence of the bullet point. You have the choice between those three types: disc, circle and square.
To assign a bullet point type to an unordered list you add a attribute to the <ul> tag like this:

<!-- TYPE DISC -->
<ul type="disc">
	<li>Punkt 1</li>
	<li>Punkt 2</li>
	<li>Punkt 3</li>
</ul>

Which looks like:

• Punkt 1
• Punkt 2
• Punkt 3

<!-- TYPE CIRCLE -->
<ul type="circle">
	<li>Punkt 1</li>
	<li>Punkt 2</li>
	<li>Punkt 3</li>
</ul>

Which looks like:

• Punkt 1
• Punkt 2
• Punkt 3

<!-- TYPE SQUARE -->
<ul type="square">
	<li>Punkt 1</li>
	<li>Punkt 2</li>
	<li>Punkt 3</li>
</ul>

Which looks like:

• Punkt 1
• Punkt 2
• Punkt 3

You can also vary them by adding the attribute to the <li>-tag.

<ul>
	<li type="disc">Disc</li>
	<li type="circle">Circle</li>
	<li type="square">Square</li>
</ul>

Which looks like:

• Disc
• Circle
• Square

So, this was a simple way to modify the appearance of an bullet point in an unordered list. As I mentioned before, nowadays you should prefer to format HTML by using CSS. In one of my next posts I will show you the “CCS way”.