HTML <li> Tag

The <li> element in HTML represents a list item. It is used to define an individual item within a list structure, such as an ordered list (<ol>) or an unordered list (<ul>). It can also appear inside a menu list (<menu>), though this is less common.

Each <li> element typically contains text, but it can also include other HTML elements such as links, images, paragraphs, or even nested lists, making it versatile for building complex list structures. When rendered by a browser, <li> elements are displayed with markers (like bullets for unordered lists or numbers for ordered lists) by default, though these can be customized or removed using CSS.

Key characteristics of <li>:

• Hierarchy: <li> elements are always child elements of a list container. Placing them outside of a <ul>, <ol>, or <menu> is invalid HTML and may produce inconsistent rendering.
• Nesting: Lists can be nested inside other lists by placing a <ul> or <ol> inside an <li> element. This is useful for creating sublists or multi-level menus.
• Content flexibility: While typically used for simple text items, an <li> can contain almost any HTML content, such as images, links, forms, or block-level elements.
• Display behavior: By default, <li> elements are block-level, meaning they occupy the full width available in the list container, stacking vertically.
• Semantic meaning: The <li> tag provides semantic structure to a list, helping both browsers and assistive technologies understand the organization and purpose of the content.

Example:

<ul>
  <li>First item</li>
  <li>Second item
    <ul>
      <li>Subitem 1</li>
      <li>Subitem 2</li>
    </ul>
  </li>
  <li>Third item</li>
</ul>

In this example, the <li> elements define three main list items, with the second item containing a nested unordered list. The structure clearly communicates hierarchy and order to the browser and users.