HTML <ul> Tag

The HTML <ul> tag represents a list of items, where the order of the items is not important. This can also be referred to as an unordered list (or un-numbered list).

The <ul> element should be used to list items that don't need to be presented in order. Changing the order of <ul> list items should not change the meaning of the list or document. If list items need to be presented in a particular order (such as a step-by-step list of instructions) the <ol> element should be used instead.

Syntax

The <ul> tag is written as <ul></ul> with the list items nested between the start and end tags. List items are represented by the <li> element.

Like this:

Examples

Basic tag usage

Here's an example of using the <ul> to create an unordered list. These are listed in no particular order. But if the order was important (for example, if I was listing my top 3 favorite animals with 1 being my favorite and 3 being the least favorite) then I should use the <ol> element instead of the <ul> element.

Bullet Style

This example uses the list-style-type property to change the bullet style to square bullets.

Images

You can replace the bullet points with an image using the list-style-image property.

Position of List Item

This example uses the list-style-position property to specify the position of the list items.

The list-style Property

The list-style property is a shortcut property. It allows you to apply multiple properties to your list items.

Example:

Attributes

Attributes can be added to an HTML element to provide more information about how the element should appear or behave.

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The <ul> element accepts the following attributes.

Element-Specific Attributes

This table shows the attributes that are specific to the <ul> tag/element.

AttributeDescription
None 

Global Attributes

The following attributes are standard across all HTML5 elements. Therefore, you can use these attributes with the <ul> tag , as well as with all other HTML tags.

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.

Below are the standard HTML5 event handler content attributes.

Again, you can use any of these with the <ul> element, as well as any other HTML5 element.

For a full explanation of these attributes, see HTML 5 event handler content attributes.

Differences Between HTML 4 & HTML 5

HTML5 does not support the following attributes that were deprecated (but not obsolete) HTML 4:

To see more detail on the two versions see HTML5 <ul> Tag and HTML4 <ul> Tag. Also check out the links to the official specifications below.

Template

Here's a template for the <ul> tag with all available attributes for the tag (based on HTML5). These are grouped into attribute types, each type separated by a space. In many cases, you will probably only need one or two (if any) attributes. Simply remove the attributes you don't need.

For more information on attributes for this tag, see HTML5 <ul> Tag and HTML4 <ul> Tag.

Tag Details

For more details about the <ul> tag, see HTML5 <ul> Tag and HTML4 <ul> Tag.

Specifications

Here are the official specifications for the <ul> element.

What's the Difference?

W3C creates "snapshot" specifications that don't change once defined. So the HTML5 specification won't change once it becomes an official recommendation. WHATWG on the other hand, develops a "living standard" that is updated on a regular basis. In general, you will probably find that the HTML living standard will be more closely aligned to the current W3C draft than to the HTML5 specification.

Related