The <ul> element

Short for ‘Unordered List’. A list of items whose order doesn't really matter, which the browser will display with bullet points.

Usage

Although you should only use <ul> for lists where the ordering of the items isn't of particular semantic importance to the meaning of the list, the browser won't randomly re-order them. The ordering you give may be significant at least in as much as it presents the list items in the order you think they're easiest to understand, even though a different order would mean the same thing.

The content of this element should consist of one or more <li> elements, each one providing one list item.

Style of bullet points

Some old HTML content uses the legacy type attribute to determine what kind of bullet point symbols to show next to each list item. In older versions of HTML this attribute could take the values disc (a filled circle, the default), circle (an empty circle), and square (a filled square). This attribute is obsolete and has been deprecated since HTML 4.01, so you shouldn't use it in new content.

The modern way to change bullet styling is with CSS. The list-style-type property can be set to the same three values as the old type attribute (disc, circle, and square, with disc being the default). It can also be set to the value none to hide the bullets completely, which is useful if you want something which is semantically a list to be presented in some other way, for example as a toolbar of icons, or a pull-down menu.

If those predefined choices of bullet symbol aren't good enough, you can provide an image file to use for bullets instead. Use the list-style-image property, whose value should be the URI of a small image file. The browser will fall back to the list-style-type symbol if for some reason it can't display the image, so it can make sense to provide both properties.

Full list of attributes

All the usual HTML global attributes are available

Further information

The Web Design Academy Contact us

By form

By Phone

+44 (0)113 234 4611

By email

enquiries@thewebdesign.academy

By snail mail

Suite 3 15 South Parade Leeds LS1 5PQ United Kingdom