<li>

Definition

The HTML <li> element is used to define a list item within an ordered or unordered list. It stands for "list item."

Lists are used to group related items together, and the <li> element is used to indicate each individual item in the list.

Examples

An ordered list is created using the <ol> element, and the items in the list are indicated using the <li> element. Ordered lists are numbered by default, and the numbering can be customized using CSS.

Example:

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

An unordered list is created using the <ul> element, and the items in the list are also indicated using the <li> element. Unordered lists use bullets to indicate each item in the list, and the style of the bullet can be customized using CSS.

Example:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Attributes

This element's attributes include the global attributes.

Best Practices

• Choose between ordered lists (<ol>) and unordered lists (<ul>) depending on the nature of the content. If the content has a specific order, use an ordered list. If there is no specific order, use an unordered list.
• Use appropriate indentation to make the nested lists more readable and easier to understand.
• Too many levels of nested lists can make the content hard to read and understand. Try to limit the nesting level to two or three levels if possible.
• Always try to use semantic HTML to help assistive technologies (e.g., screen readers) better understand the content. Use the <nav> element to define a list of navigation links, and the <ul> or <ol> elements to define the list items.
• Avoid using inline styles and use CSS to style the list items instead. This will make it easier to maintain and update the styling.
• Each list item should have a clear and concise label that accurately describes the content. Avoid using vague or generic labels that don't add value to the content.
• Don't use lists as a way to create formatting or layout on a webpage. Use CSS for styling and layout instead.

Accessibility Considerations

• Use the appropriate HTML element to ensure that the content is semantically correct. Use <ol> and <ul> elements to define ordered and unordered lists, respectively.
• Each list item should have a clear and concise label that accurately describes the content. This is important for screen reader users who rely on the labels to navigate the content.
• If images are used as list items, provide alternative text that describes the image to assistive technologies.
• Use proper indentation to make nested lists more readable and easier to understand. This is particularly important for screen reader users who rely on indentation to understand the hierarchy of the content.
• Do not rely solely on color to convey information about the list items. Ensure that there is sufficient contrast between the text and the background to make it easier to read for users with visual impairments.
• For long lists, provide skip links that allow users to skip directly to the list content. This is particularly useful for users who use keyboard navigation.
• Always test the list with a screen reader or other assistive technologies to ensure that it is accessible to all users.

Browser Compatibility