<li>

<li> represents an item in an ul, ol, or menu. It accepts flow content, so an item can contain paragraphs or a nested list.

Nest related items

The sublist belongs inside the second item, not directly beside the outer list’s items.

<ul>
  <li>Choose a container.</li>
  <li>
    Check its conditions:
    <ul>
      <li>Available width</li>
      <li>Content length</li>
    </ul>
  </li>
  <li>Test a narrow screen.</li>
</ul>

li {
  margin-block: 0.4rem;
}

Numbering and markup

In an ordered list, value sets an item’s ordinal number, and following items continue from there. It has no numbering meaning in ul or menu. Use an integer even when the list displays letters or Roman numerals.

Do not use the obsolete li type attribute for marker styling; use CSS list-style-type. Write closing tags explicitly in instructional examples even where HTML permits omission.

Accessible lists

A collection of styled divs does not automatically provide list semantics. Keep native list markup and make each item understandable. If an item contains an action, put a real button or link inside it rather than making the whole li an improvised control.

Sources and browser support

MDN: li describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.