Text not allowed in element “ul” in this context.

According to the HTML specification, the content model for <ul> is strictly limited to zero or more <li> elements. Any text node placed directly inside the <ul> violates this rule, even if it seems harmless or invisible. Browsers may still render the page, but the resulting DOM structure is technically invalid and can lead to unpredictable behavior across different browsers and assistive technologies.

This matters for accessibility because screen readers rely on proper list structure to announce the number of items and allow users to navigate between them. Stray text nodes inside a <ul> can confuse these tools, causing list items to be miscounted or the text to be read in an unexpected context.

There are several common scenarios that trigger this error:

Loose text used as a list title. Developers sometimes place a heading or label directly inside the <ul> to describe the list. This text must be moved outside the list element.

Stray   or other entities between list items. This often happens in templating systems or when code is concatenated, where   characters or other text nodes end up between <li> elements. These should be removed entirely, since spacing between list items should be controlled with CSS.

Accidentally placing inline content without wrapping it in <li>. Sometimes content that should be a list item is simply missing its <li> wrapper.

Examples

❌ Text used as a list title inside <ul>

<ul>
  Fruits
  <li>Apple</li>
  <li>Orange</li>
  <li>Banana</li>
</ul>

The word “Fruits” is a text node directly inside the <ul>, which is not allowed.

✅ Move the title outside the list

<h3>Fruits</h3>
<ul>
  <li>Apple</li>
  <li>Orange</li>
  <li>Banana</li>
</ul>

Using a heading before the list is semantically clear. You can also use a <p> or <span> if a heading isn’t appropriate.

❌   entities between list items

<ul>
  <li>First item</li>
  &nbsp;
  <li>Second item</li>
  &nbsp;
  <li>Third item</li>
</ul>

Each   is a text node sitting directly inside the <ul>, triggering the error.

✅ Remove the entities and use CSS for spacing

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

ul li {
  margin-bottom: 0.5em;
}

Any visual spacing between list items should be handled with CSS margin or padding, not with HTML entities.

❌ Unwrapped content that should be a list item

<ul>
  <li>Milk</li>
  Eggs
  <li>Bread</li>
</ul>

✅ Wrap the content in an <li> element

<ul>
  <li>Milk</li>
  <li>Eggs</li>
  <li>Bread</li>
</ul>

The same rules apply to <ol> (ordered lists) and <menu> elements — their direct children must be <li> elements, and text nodes are not permitted. If your list is generated dynamically by a templating engine or JavaScript, check the output carefully for stray whitespace or text that may have been injected between list items.

Learn more:

WHATWG Spec

HTML Living Standard: the ul element

→

WHATWG Spec

HTML Living Standard: the li element

→