Syntax
<ul>
<li>Item one</li>
<li>Item two</li>
</ul>Examples
Basic List
A simple unordered list.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>Navigation Menu
Using a list to build a semantic navigation menu.
<nav>
<ul style="list-style: none; display: flex; gap: 20px; padding: 0;">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>Nested List
Lists can be nested inside list items to represent hierarchy.
<ul>
<li>Frontend
<ul>
<li>React</li>
<li>Vue</li>
</ul>
</li>
<li>Backend
<ul>
<li>PHP</li>
<li>Node.js</li>
</ul>
</li>
</ul>Attributes
- type (disc | circle | square): Deprecated — use the CSS list-style-type property instead
Best practices
- Only place <li> elements as direct children of <ul>
- Use <ul> when the order of items does not matter; use <ol> when it does
- Style bullet appearance with CSS list-style-type rather than the deprecated type attribute
- Wrap navigation lists in a <nav> element for better accessibility
At a glance
- Purpose
- Structure and meaning for web content
- File extension
- .html · .htm
- Runs in
- Web browsers
- Usually used with
- CSS and JavaScript
Specifications & further reading
Related HTML documentation
<ol>
The <ol> element represents an ordered (numbered) list, where the sequence of items is meaningful. Like <ul>, every item must be wrapped in an <li> element. Browsers automatically number items starting from 1, but this can be customized using the start and reversed attributes, or a different numbering style with the type attribute. Ordered lists are ideal for step-by-step instructions, rankings, and recipes.<dl>, <dt>, <dd>
The description list group represents a list of term/description pairs — like a glossary or metadata list. <dl> wraps the whole list, <dt> defines each term, and <dd> defines its associated description. Unlike <ul>/<ol>, description lists are not bulleted or numbered by default.<menu>
The <menu> element is a semantic alternative to <ul>, intended specifically for lists of commands or interactive items — like a toolbar or context menu — rather than plain content lists. Browsers currently render it identically to <ul>, but it signals different intent to assistive technology and future tooling.<li>
The <li> element represents an individual item within a list — <ul>, <ol>, or <menu>. Its rendering depends on its parent: inside <ol>, browsers add sequential numbering; inside <ul>, they add bullet points. The value attribute lets you override an item's number specifically within an ordered list.
The <ol> element represents an ordered (numbered) list, where the sequence of items is meaningful. Like <ul>, every item must be wrapped in an <li> element. Browsers automatically number items starting from 1, but this can be customized using the start and reversed attributes, or a different numbering style with the type attribute. Ordered lists are ideal for step-by-step instructions, rankings, and recipes.<dl>, <dt>, <dd>
The description list group represents a list of term/description pairs — like a glossary or metadata list. <dl> wraps the whole list, <dt> defines each term, and <dd> defines its associated description. Unlike <ul>/<ol>, description lists are not bulleted or numbered by default.<menu>
The <menu> element is a semantic alternative to <ul>, intended specifically for lists of commands or interactive items — like a toolbar or context menu — rather than plain content lists. Browsers currently render it identically to <ul>, but it signals different intent to assistive technology and future tooling.<li>
The <li> element represents an individual item within a list — <ul>, <ol>, or <menu>. Its rendering depends on its parent: inside <ol>, browsers add sequential numbering; inside <ul>, they add bullet points. The value attribute lets you override an item's number specifically within an ordered list.