Yes — place a full or inside an to create a nested sublist.

HTML Lists: <ul>, <ol> & <li> – Syntax & Live Example

Quick facts

Category	Flow content (for <ul>/<ol>)
Content model	Zero or more <li> elements, in order
Tag omission	Neither can be omitted (an <li>’s end tag may be omitted if immediately followed by another <li> or the parent’s close, but writing it explicitly is best practice)
Permitted parents	Any element that accepts flow content
DOM interfaces	`HTMLUListElement`, `HTMLOListElement`, `HTMLLIElement`

Syntax

<ul>
  <li>Item</li>
</ul>

<ol>
  <li>Item</li>
</ol>

Live example

Edit the code below and watch the preview update instantly.

index.html

Preview

Open in Full Editor →

Attributes

<ol>

Attribute	Description
start	The number the list begins counting from
reversed	Counts down instead of up
type	Numbering style — `1`, `A`, `a`, `I`, or `i`

<li>

Attribute	Description
value	Overrides this item’s number — only meaningful inside an <ol>

Common examples

A navigation menu

Site menus are usually an unordered list of links inside a <nav>, laid out with flexbox.

<nav>
  <ul class="menu">
    <li><a href="/">Home</a></li>
    <li><a href="/about/">About</a></li>
    <li><a href="/contact/">Contact</a></li>
  </ul>
</nav>

<style>
  .menu { display: flex; gap: 1rem; list-style: none; padding: 0; }
</style>

A nested list

Put a complete <ul> or <ol> inside an <li> to create sub-items.

<ul>
  <li>Fruit
    <ul>
      <li>Apples</li>
      <li>Pears</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

A countdown with letters or Roman numerals

Change the numbering style with type, and count backwards with reversed.

<ol type="I" reversed>
  <li>Bronze</li>
  <li>Silver</li>
  <li>Gold</li>
</ol>

<ul> vs <ol>

The difference is whether the order matters. Use an unordered list, <ul>, when the items could be shuffled without changing the meaning: features, ingredients, menu links. Use an ordered list, <ol>, when the sequence is the point: step-by-step instructions, rankings, a top-10.

The visual style is separate from this choice. You can give an unordered list numbers or an ordered list no markers at all with CSS, but screen readers and search engines still read the meaning from the tag you chose. For pairs of terms and explanations, use a description list instead.

	<ul>	<ol>
Order matters	No	Yes
Default markers	Bullets	Numbers
Examples	Features, menu links	Steps, rankings

Common mistakes to avoid

Faking lists with line breaks. Typing “•” or “1.” and using <br> loses the list meaning for screen readers and search engines.
Putting other elements directly inside <ul>. Only <li> may be a direct child; wrap anything else inside a list item.
Choosing the wrong list. Use <ol> only when order matters (steps, rankings); otherwise use <ul>.
Using lists for name–value pairs. For terms and definitions, a description list fits better.

Accessibility & SEO tips

Screen readers announce lists and their length (“list, 5 items”), which helps people understand the content before they hear it.
In Safari, removing bullets with list-style: none can make VoiceOver stop announcing the list; add role="list" to the <ul> when the list meaning matters.
Step-by-step instructions in an <ol> are easy for search engines to understand and are often shown as numbered lists in results.
Keep each list item short and parallel in wording (start each with a verb, or each with a noun) so the list is easy to scan.

Browser support

Supported in every browser, including Chrome, Edge, Firefox, Safari and their mobile versions — it has been part of HTML since the very first versions. The ::marker styling and the reversed attribute mentioned above also work in all current browsers.

Tutorials: How to make a dropdown menu, How to make a navigation bar

Related tags

Frequently asked questions

How do I start a numbered list at a number other than 1?

Add start="5" (for example) to the <ol> tag, and it will begin counting from that number.

Can I nest lists?

Yes — place a full <ul> or <ol> inside an <li> to create a nested sublist.

How do I remove the bullets from a list?

Add list-style: none to the <ul> in CSS, and usually padding: 0 to remove the indent as well.

How do I change the bullet color or symbol?

Use the ::marker pseudo-element, for example li::marker { color: #7b61ff; }, or change the symbol with list-style-type (circle, square or a custom string such as "✓ ").

How do I make a horizontal list?

Set display: flex on the <ul> (plus list-style: none and padding: 0). The items line up in a row, which is how most navigation menus are built.

Can I put a link inside a list item?

Yes. Any inline content can go inside an <li>, including links, images and buttons. That is exactly how navigation menus are built: each <li> holds one <a> link.