In Easy Steps Articles

January 14, 2022

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

Sign up to our

Newsletter

Our newsletters inform you of new and forthcoming titles, handy tips, and other updates and special offers. You can opt out anytime.

"*" indicates required fields

By In Easy Steps Team

Share