Example
An unordered HTML list:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
More “Try it Yourself” examples below.
Definition and Usage
The <ul> tag defines an unordered (bulleted) list.
Use the <ul> tag together with the <li> tag to create unordered lists.
Browser Support
| Element | |||||
|---|---|---|---|---|---|
| <ul> | Yes | Yes | Yes | Yes | Yes |
Tips and Notes
Tip: Use CSS to style lists.
Tip: To create ordered lists, use the <ol> tag.
Differences Between HTML 4.01 and HTML5
The “compact” and “type” attributes are not supported in HTML5.
Attributes
| Attribute | Value | Description |
|---|---|---|
| compact | compact | Not supported in HTML5. Specifies that the list should render smaller than normal |
| type | disc square circle |
Not supported in HTML5. Specifies the kind of marker to use in the list |
Global Attributes
The <ul> tag also supports the Global Attributes in HTML.
Event Attributes
The <ul> tag also supports the Event Attributes in HTML.
Related Pages
HTML tutorial: HTML Lists
HTML DOM reference: Ul Object
CSS Tutorial: Styling Lists
Default CSS Settings
Most browsers will display the <ul> element with the following default values:
Example
ul {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
HTML <ul> compact Attribute
Example
Use of the compact attribute in an unordered HTML list:
<ul compact>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Definition and Usage
The compact attribute is a boolean attribute.
When present, it specifies that the list should render smaller than normal, by reducing the space between lines and the indentation of the list.
Browser Support
| Attribute | |||||
|---|---|---|---|---|---|
| compact | Not supported | Not supported | Not supported | Not supported | Not supported |
Compatibility Notes
The compact attribute of <ul> is not supported in HTML5. Use CSS instead.
CSS syntax: <ul style=”line-height: 80%”>
CSS Example: Reduce line-height in a list
In our CSS tutorial you can find more details about the line-height property.
Differences Between HTML and XHTML
In XHTML, attribute minimization is forbidden, and the compact attribute must be defined as <ul compact=”compact”>.
Syntax
<ul compact>
HTML <ul> type Attribute
Example
Use of the type attribute in an unordered HTML list:
<ul type=”square”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Definition and Usage
The type attribute specifies the kind of marker to use in the unordered list.
Browser Support
| Attribute | |||||
|---|---|---|---|---|---|
| type | Yes | Yes | Yes | Yes | Yes |
Compatibility Notes
The type attribute of <ul> is not supported in HTML5. Use CSS instead.
CSS syntax: <ul style=”list-style-type:square”>
In our CSS tutorial you can find more details about the list-style-type property.
Syntax
<ul type=”disc|circle|square”>
Attribute Values
| Value | Description |
|---|---|
| disc | Default. A filled circle |
| circle | An unfilled circle |
| square | A filled square |
