Baseline Widely available
The <ul>
HTML element represents an unordered list of items, typically rendered as a bulleted list.
<ul>
<li>Milk</li>
<li>
Cheese
<ul>
<li>Blue cheese</li>
<li>Feta</li>
</ul>
</li>
</ul>
li {
list-style-type: circle;
}
li li {
list-style-type: square;
}
Attributes
This element includes the global attributes.
compact
Deprecated
This Boolean attribute hints that the list should be rendered in a compact style. The interpretation of this attribute depends on the user agent, and it doesn't work in all browsers.
Warning: Do not use this attribute, as it has been deprecated: use CSS instead. To give a similar effect as the compact
attribute, the CSS property line-height
can be used with a value of 80%
.
type
Deprecated
This attribute sets the bullet style for the list. The values defined under HTML3.2 and the transitional version of HTML 4.0/4.01 are:
circle
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 applies to the element, the user agent selects a bullet type depending on the nesting level of the list.
Warning: Do not use this attribute, as it has been deprecated; use the CSS 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 square. The bullet style is not defined in the HTML description of the page, but in its associated CSS, using the list-style-type
property.<ul>
and <ol>
elements may be nested as deeply as desired. Moreover, the nested lists may alternate between <ol>
and <ul>
without restriction.<ol>
and <ul>
elements both represent a list of items. They differ in that, with the <ol>
element, the order is meaningful. 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>
Result Nesting a list
<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>
Result Ordered list inside unordered list
<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>
Result Technical summary Content categories Flow content, and if the <ul>
element's children include at least one <li>
element, palpable content. Permitted content Zero or more <li>
, <script>
and <template>
elements. Tag omission None, both the starting and ending tag are mandatory. Permitted parents Any element that accepts flow content. Implicit ARIA role list
Permitted ARIA roles directory
, group
, listbox
, menu
, menubar
, none
, presentation
, radiogroup
, tablist
, toolbar
, tree
DOM Interface HTMLUListElement
Specifications Browser compatibility See also
CSS properties that may be specially useful to style the <ul>
element:
list-style
property, to choose the way the ordinal displays.line-height
property, to simulate the deprecated compact
attribute.margin
property, to control the list indentation.RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3