The **`<li>` element** defines items in unordered lists, ordered lists, or menus. 

`<ol>` represents an ordered list, `<ul>` represents an unordered list, and `<menu>` represents a menu.
>Note: The HTML document displays unordered and menu list items with a bullet, and ordered list items with numbers or letters.

# Syntax
The following code snippet illustrates how to use the `<li>` tag:
```html
<li> item-name </li>


# Attributes and events

The `<li>` element supports `value` and `type` attributes.

The `value` attribute accepts a numeric value that specifies the ordinal value of the ordered list item. 
>Note: `value` is not compatible with unordered lists and menus.

The `type` attribute specifies the marker type of a list item.
For an unordered list, `type` accepts a single input which can be any of the following:
* `disc`: a filled circle
* `square`: a non-filled square
* `circle`: a non-filled circle

For an ordered list, `type` accepts a single input which can be any of the following:
* integers
* upper case letters
* upper case Roman numerals
* lower case letters
* lower case Roman numerals


The `<li>` element supports global attributes and events.
>Note: The `type` attribute is obsolete in HTML5 but can be used with style sheets.

# Examples
The following code demonstrates how to use the `<li>` element with ordered lists, unordered lists, and menus:

<!DOCTYPE html>
<html>
<body>

<h1>How to fry an egg</h1>

<h3> Ingredients </h3>

<ul>
  <li>Butter</li>
  <li>Large egg</li>
  <li>Salt</li>
  <li>Ground pepper</li>
</ul>



<h3> Directions </h3>

<ol>
  <li>Heat the pan</li>
  <li>Add the butter</li>
  <li>Crack open the egg in the pan</li>
  <li>Cook for two minutes </li>
  <li value = 9>Season with salt and pepper</li>
</ol>



<h3> Menu </h3>

<menu>
  <li><button onclick="boiledegg()">See the recipe for boiled egg</button></li>
  <li><button onclick="poachededd()">See the recipe for poach egg</button></li>
  <li><button onclick="scrambledegg()">See the recipe for scrambled egg</button></li>
  
</menu>

</body>
</html>

codemirror

# Explanation
## Example 1 (Ingredients)
Example 1 ﻿uses the `>ul>` element to list ingredients with bullets in an unordered list﻿.




## Example 2 (Directions)
Example 2 ﻿uses the `<ol>` element to list instructions with numeric values in an ordered list. The last instruction is displayed with the list number 9 rather than 5 since the `value` attribute is 9.


## Example 3 (Menu)
Example 3 lists other recipes as buttons, which the user can click to navigate to different recipes on the website. 

How to use the li element in HTML

The `<li>` element defines items in lists or menus, supporting attributes for order and marker type, and examples show its usage in varied scenarios.