Unordered List in your Webpage

The unordered list is probably the most frequently used list, and it is sometimes (inaccurately) called a bulleted list because each item is preceded with a bullet point.

In reality, an unordered list is a list of items, which the order of the items found doesn’t change their meaning. For example, I could have a list of professors at a college or university. In the list they might be listed alphabetically, or grouped by department. However, the odds that you will need to see those professors in that order, or take their classes in that order are so infinitesimally small, it might as well be zero.

Creating an unordered list is very simple in HTML. You use the <ul> tag set. Inside of the <ul> tag set is a series of list item tags, defined by the <li> tag.

Note: The <li> tag doesn’t have to have a closing tag, but most people use them.

<ul>
    <li>John Adams</li>
    <li>Mike Smith
    <!-- even though there is a missing closing tag, the browser will see the new open tag, and know to create a third item. -->
    <li>Walter Wimberly</li>
</ul>

Styling an Unordered List

Depending upon the list’s use, the need to style it may vary. Luckily, CSS allows us to style the <ul> and <li> tags fairly easily and quite differently, so our lists can look as different from one another as they need to.

The hardest part, is not all browsers style lists in the same way. For that reason, some web developers insist on specifying every specific list attribute to ensure consistency among web browsers.

The first is the list shape. For unordered lists, we normally see a solid bullet. However, the list-style-type attribute can be set to disc – the default value, none, circle, or square.

The syntax is simple enough:

list-style-type: disc | none | circle | square;

To create this on different lists on the same page, you can use classes, and applied the rules to the different classes as such:

ul.a {
    list-style-type: disc;
}
ul.b {
    list-style-type: none;
}
ul.c {
    list-style-type: circle;
}
ul.d {
    list-style-type: square;
}

The list-style-position attribute can be set to inside, or outside. What this refers to is the box for the list items. Should the bullet point, or other shape, be inside, or outside of the box. The default is outside.

The property is set using the following syntax:

list-style-position: outside|inside;

You can utilize padding and margin to increase the spacing between them so that the elements are more easily readable. By default the list items are close together, and that can make it harder to read each item.

li {
    margin: 10px 0;
    padding: 10px 0;
}

One other common thing you will run into is what happens if you want a long list to display in a series of columns. In legacy browsers you have to do a bit of coding, however, with CSS3 there is a columns rule that you can utilize.

ul {
    columns: 3;
}

Unordered List in your Webpage was originally found on Access 2 Learn