HTML Guide
The <ul> element is used to define unordered lists, where each element must be contained within a <li> element, like in this example:
<ul>
<li>first element</li>
<li>second element</li>
<li>third element</li>
</ul>
Ensure that there’s no content inside the <ul> element that is not contained within a <li> element.
Sometimes this error comes when trying to give a title to the list, for example:
<ul>
Fruits
<li>Apple</li>
<li>Orange</li>
</ul>Instead, that title text should be outside the list, like:
<span>Fruits</span>
<ul>
<li>Apple</li>
<li>Orange</li>
</ul>
Other times, this can come as the concatenation of <li> elements which results in something like:
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
Note how in this case that used to join the <li> is causing the problem, as it’s content that is not contained by a <li> element, as required by the <ul> element.
Learn more:
Related W3C validator issues
The alert role can be used to tell the user an element has been dynamically updated. Screen readers will instantly start reading out the updated content when the role is added. The element <ul> doesn’t accept this kind of role, consider using other element like <p> or <div>.
The alert role is used to communicate an important and usually time-sensitive message to the user. When this role is added to an element, the browser will send out an accessible alert event to assistive technology products which can then notify the user about it. The alert role is most useful for information that requires the user’s immediate attention.
A <div> tag has been found as a direct child of an <ul> tag, and this is not allowed. For example, <ul><div><li>item</li></div></ul> is not valid, but <ul><li><div>item</div></li></ul> is valid as the direct child of <ul> is <li>.
This W3C HTML Validator issue indicates that you’ve placed text content directly inside a <select> element. According to the HTML specification, a <select> element can only contain <option> or <optgroup> elements, and no direct text nodes.
Here’s how to resolve this issue:
Steps to Fix:
- Remove Text Nodes: Ensure that you remove any text that exists directly inside the <select> tags.
- Use <option> Elements: If you want to display text as an option, use <option> tags for each selectable item.
Example of Incorrect Usage:
Here’s an example that generates the validator issue:
<select>
Please select an option:
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>Corrected Example:
Here’s how to correct this by moving the text outside of the <select> element:
<label for="options">Please select an option:</label>
<select id="options">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>Summary:
- Always wrap any instructional or descriptive text outside of the <select> element.
- Use <option> tags to define the choices within the <select>.