li element represents an item in a list, being it ordered (
ol element) or unordered (
ul element), and a sub-menu in a toolbar
menu. In the latter case, the
li element acts as the container of each sub-menu (composed by a
button and a
menu) in the toolbar.
type attribute of this element has been removed from HTML5 because of its presentational nature. Authors should replace its functionality with style sheets.
<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".
The functions declared in the following example aren't meant to work. This example aims only to test the functionality provided by browsers for menus.
As of 2015/03/27, browser support for the
menu element is almost inexistent. Authors may have to rely on scripts to achieve the same effect cross-browser, until support grows.
<menu> <li> <button type="menu" value="File" menu="filemenu"> <menu id="filemenu" type="context"> <menuitem label="New..." onclick="new()"> <menuitem label="Open..." onclick="open()"> <menuitem label="Save" onclick="save()"> <menuitem label="Save as..." onclick="saveas()"> </menu> </li> <li> <button type="menu" value="Edit" menu="editmenu"> <menu id="editmenu" type="context"> <menuitem label="Copy" onclick="copy()"> <menuitem label="Cut" onclick="cut()"> <menuitem label="Paste" onclick="paste()"> </menu> </li> </menu>
The Previous example simulates the toolbar menu of a text editor, providing the usual "File" and "Edit" menus along with their well-known options.
An integer indicating the ordinal value of this item in the list.
<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.