The HTML <ul>
element represents an unordered list of items, typically rendered as a bulleted list.
Content categories | Flow content |
---|---|
Permitted content | zero or more <li> elements, which in turn often contain nested <ol> or <ul> elements. |
Tag omission | None, both the starting and ending tag are mandatory. |
Permitted parents | any element that accept flowing content |
Permitted ARIA roles | directory, group, listbox, menu, menubar, radiogroup, tablist, toolbar, tree, presentation |
DOM Interface | HTMLUListElement |
This element includes the global attributes.
compact
deprecated<ul>
element should be styled using CSS. To give a similar effect as the compact
attribute, the CSS property line-height can be used with a value of 80%
.type
deprecatedcircle
,disc
,square
.A fourth bullet type has been defined in the WebTV interface, but not all browsers support it: triangle.
If not present and if no CSS list-style-type
property does apply to the element, the user agent decide to use a kind of bullets depending on the nesting level of the list.
list-style-type
property instead.<ul>
element is for grouping a collection of items that do not have a numerical ordering, and their order in the list is meaningless. Typically, unordered-list items are displayed with a bullet, which can be of several forms, like a dot, a circle or a squared. The bullet style is not defined in the HTML description of the page, but in its associated CSS, using the list-style-type
property.<ol>
and <ul>
elements.<ol>
and <ul>
elements both represent a list of items. They differ in that, with the <ol>
element, the order is meaningful. As a rule of thumb to determine which one to use, try changing the order of the list items; if the meaning is changed, the <ol>
element should be used, otherwise you can use <ul>
.<ul> <li>first item</li> <li>second item</li> <li>third item</li> </ul>
Above HTML will output:
<ul> <li>first item</li> <li>second item <!-- Look, the closing </li> tag is not placed here! --> <ul> <li>second item first subitem</li> <li>second item second subitem <!-- Same for the second nested unordered list! --> <ul> <li>second item second subitem first sub-subitem</li> <li>second item second subitem second sub-subitem</li> <li>second item second subitem third sub-subitem</li> </ul> </li> <!-- Closing </li> tag for the li that contains the third unordered list --> <li>second item third subitem</li> </ul> <!-- Here is the closing </li> tag --> </li> <li>third item</li> </ul>
Above HTML will output:
<ul> <li>first item</li> <li>second item <!-- Look, the closing </li> tag is not placed here! --> <ol> <li>second item first subitem</li> <li>second item second subitem</li> <li>second item third subitem</li> </ol> <!-- Here is the closing </li> tag --> </li> <li>third item</li> </ul>
Above HTML will output:
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard The definition of '<ul>' in that specification. | Living Standard | |
HTML5 The definition of '<ul>' in that specification. | Recommendation |
<ol>
, <li>
, <menu>
and the obsolete <dir>
;<ul>
element: compact
attribute,
© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul