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”.

(Visited 242 times, 1 visits today)

1 thought on “Format Bullet Points in HTML Unordered Lists”

  1. Hello there! I know this is kinda off topic but I was wondering if
    you knew where I could get a captcha plugin for my comment form?

    I’m using the same blog platform as yours and I’m having problems finding one?
    Thanks a lot!

    Reply

Leave a Comment