The html unordered list tags are used to create a bulleted list. Here is a basic example. First of all on line 9 we add the opening <ul> tag and closing </ul> tag.

On line 10 inside the ‘ul‘ tags we add an opening <li&gt and closing </li&gt tag. In between the ‘li’ tags the text ‘item one’ is also added.

HTML Unordered List Tags. Bulleted unordered list with one item.
Bulleted unordered list with one list item.

On lines 11, 12 and 13 we add another three sets of ‘li’ tags. Inside each set of ‘li’ tags we add the list item text as shown below.

HTML Unordered List Tags. Four list Items.
Unordered list with four bulleted list items.

CSS styles can change the size of the text and the line height of ‘li’ elements. On line 6 a ‘li’ selector is placed between the ‘style’ tags. On line 7 the ‘line-height’ for the ‘li’ elements is given a value of ‘2em’. On line 8 the ‘font-size’ for the ‘li’ elements are given a also given a value of ‘2em’. The ’em’ is a ‘css unit‘. The ’em’ unit expresses length. A value of ‘2em’ will increase the current value by two times. Effectively doubling the amount.

HTML Unordered List Tags. Line height and font size doubled
Unordered bulleted list items line height and font size doubled.

Below on line 6 an ‘ul’ selector is added. Lastly the ‘list-style-type’ is altered to ‘square’ on line 7.

HTML Unordered List Tags. List style type square.
A ul ‘list-style-type’ of ‘square’.

HTML Unordered List Tags – ul

In the earlier examples no ‘list-style-type’ was declared for the ‘ul’ element. By default the browser sets a ‘list-style-type’ value of ‘disc’ from the browsers stylesheet. The browser stylesheet is loaded behind the scenes. By setting a ‘list-style-type’ of ‘square’ we have overridden the ‘list-style-type’ value of ‘disc’ set by the browsers css.


HTML5 logo. HTML Ordered List Tags

CSS logo. HTML Ordered List Tags

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

Your email address will not be published. Required fields are marked *