HTMLList Items (<li>)

<li> Deep Dive

<li> (list item) is the workhorse of every list, but it has more nuance than it looks: a value override, strict parent requirements, and a modern CSS hook — ::marker — for styling the bullet or number itself.

The value Attribute

Inside an <ol>, an individual <li> can carry a value attribute to jump the numbering to a specific number. Every item after it continues counting up from that new value.

li-value.html

HTML
<ol>
  <li>First</li>
  <li value="10">Jumps to 10</li>
  <li>Continues as 11</li>
</ol>
value is ignored on ul
value only affects numbering inside <ol>. It has no effect (and no meaning) on <li> elements inside a <ul>, since unordered lists have no numbers to override.
list items Outside ul/ol/menu Are Invalid

<li> is only valid as a direct child of <ul>, <ol>, or <menu>. A stray <li> sitting directly inside a <div> (with no list wrapper) is invalid HTML — browsers will often still render it, but it breaks accessibility semantics and validation.

li-invalid.html

HTML
<!-- Invalid: li with no ul/ol/menu parent -->
<div>
  <li>Orphaned item</li>
</div>

<!-- Valid -->
<ul>
  <li>Properly contained item</li>
</ul>
Screen readers rely on the parent
Assistive technology announces "list, 3 items" based on the <ul>/<ol> wrapper and its <li> children. An orphaned <li> with no list parent won't be announced as part of a list at all — the semantic benefit disappears.
Styling List Markers with CSS

Beyond the classic list-style-type property, modern CSS exposes the marker itself (the bullet or number) as a pseudo-element you can style directly: ::marker.

marker.html

HTML
<style>
  li::marker {
    color: #e63946;
    font-weight: bold;
  }
</style>

<ul>
  <li>Red bold bullet</li>
  <li>Another item</li>
</ul>
::marker supports limited properties
::marker currently accepts a limited set of CSS properties — mainly color, content, font-*, and a few text properties. You can't set arbitrary layout properties like padding directly on it, but it's still far more flexible than swapping list-style-image.

marker-content.html

HTML
<style>
  .checklist li::marker {
    content: "✓ ";
  }
</style>

<ul class="checklist">
  <li>Task one done</li>
  <li>Task two done</li>
</ul>
Nesting Block Content Inside <li>

An <li> can contain more than plain text — paragraphs, images, even another whole list — as long as the nested list itself follows the same parent rules (a <ul>/<ol> directly inside the <li>).

li-rich-content.html

HTML
<ul>
  <li>
    <strong>Step 1:</strong>
    <p>Unpack all the components before starting assembly.</p>
    <img src="unbox.jpg" alt="Unboxed components laid out on a table" width="200" height="120">
  </li>
</ul>
Quick Reference

Feature

Applies to

Effect

value attribute

<li> inside <ol>

Overrides this item's number and continues from there

Valid parents

<li>

Must be a direct child of <ul>, <ol>, or <menu>

::marker (CSS)

<li>

Styles the bullet/number marker directly

  • Never place <li> outside a list-container element — it invalidates the markup and breaks assistive tech semantics.

  • Use value sparingly — it can be confusing if not clearly justified (e.g. continuing a list split across sections).

  • Reach for ::marker when you want to restyle bullets/numbers without abandoning semantic list markup.