If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.
Table of contents
li element represents an item in a list, being it ordered (
ol element) or unordered (
ul element), and a command in a toolbar
The next example shows a couple of lists that belong to a recipe, where the ingredients are shown in an unordered format (
ul) while the procedure steps belong to an ordered list (
<h1>Basic bread recipe to start using your machine</h1> <h2>Ingredients</h2> <ul> <li>1 cup warm water</li> <li>2 tbsp. white sugar</li> <li>1 package bread machine yeast</li> <li>1/4 cup vegetable oil</li> <li>3 cups bread flour</li> <li>1 tsp. salt</li> </ul> <h2>Procedure</h2> <ol> <li>Place the water, sugar and yeast in the pan of the bread machine and let the yeast dissolve and foam for 10 minutes.</li> <li>Add the oil, flour and salt to the yeast.</li> <li>Select "Basic" or "White Bread" setting.</li> <li>Press "Start".</li> </ol>
Basic bread recipe to start using your machine
- 1 cup warm water
- 2 tbsp. white sugar
- 1 package bread machine yeast
- 1/4 cup vegetable oil
- 3 cups bread flour
- 1 tsp. salt
- Place the water, sugar and yeast in the pan of the bread machine and let the yeast dissolve and foam for 10 minutes.
- Add the oil, flour and salt to the yeast.
- Select "Basic" or "White Bread" setting.
- Press "Start".
li element can also be part of a toolbar
menu, representing a command the user can perform or activate.
<menu> <li><button onclick="new()">New...</button></li> <li><button onclick="open()">Open...</button></li> <li><button onclick="save()">Save</button></li> <li><button onclick="saveas()">Save as...</button></li> </menu>
The Previous example simulates the toolbar menu of a text editor, providing the usual "New...", "Open...", "Save" and "Save as..." commnads.
An integer indicating the ordinal value of this item in the list.
This attribute is only appliable when the item isn't found in unordered lists (
ul) and menus (
menu). Its use is allowed in ordered lists (
ol) and the
<p>The list has been reduced to show only the relevant chapters in the book.</p> <ol type="I"> <li value="3">I form my resolution</li> <li value="7">An unknow species of whale</li> <li value="12">All by electricity</li> </ol>
The list has been reduced to show only the relevant chapters in the book.
- I form my resolution
- An unknow species of whale
- All by electricity
The type of symbols to use in the marker of this item. The values this attribute can take depend of the type of list its declared in. For unordered lists (
ul), the three case-insensitive values are:
- disc: a filled circle.
- circle: a non-filled circle.
- square: a non-filled square.
For ordered lists (
ol), the five case-sensitive values are:
- 1: integers (1, 2, 3...).
- a: lower-case letters (a, b, c...).
- A: upper-case letters (A, B, C...).
- i: lower-case roman numerals (i, ii, iii...).
- I: upper-case roman numerals (I, II, III...).
In HTML5 this attribute has been removed in favor of style sheets. Nevertheless, for ordered lists authors can use the
type attribute of the
<li type="disc">25 nails</li>
For information about global attributes refer to this list of global attributes in HTML5.
For information about global events refer to this list of global events in HTML5.