Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

How to use the li element in HTML

Ayesha Naeem

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.


The following code snippet illustrates how to use the <li> tag:

<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.


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


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.



Ayesha Naeem
Copyright ©2022 Educative, Inc. All rights reserved

View all Courses

Keep Exploring