How to create unordered lists in an HTML document

In an HTML document, unordered lists, where the sequence of list items is not important, typically place a bullet point before each item to differentiate list items from regular text.

Unordered lists are created with <ul> </ul> tags, which provide a container for list items.

Each list item can be created using <li> </li> tags to enclose the item, or optionally just using <li> to precede the item – either form of <li> element validates as correct HTML.

An unordered list <ul> element can contain numerous list item <li> elements.

The bullet point that differentiates unordered list items from regular text may be one of these three marker types:

  • Disc – a filled circular bullet point (the default style).
  • Circle – an unfilled circular bullet point.
  • Square – a filled square bullet point.

1) To insert an unordered list that will display the default disc bullet points:

<ul>
<li>HTML</li>
<li>Cascading Style Sheets</li>
<li>JavaScript</li>
</ul>

2) To insert an unordered list that will display the circle bullet points:

<ul style=”list-style-type:circle”>
<li>C Programming</li>
<li>C++ Programming</li>
<li>C# Programming</li>
</ul>

3) To insert an unordered list that will display the square bullet points:

<ul style=”list-style-type:square” >
<li>Bash<li>PHP<li>Python</ul>

4) Save your HTML document, then open it in your browser to see the unordered list bullet points.

 

Get more tips like this in
HTML in easy steps, 9th edition

£11.99

192 pages
By Mike McGrath
ISBN: 9781840788761