li element

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

Description

The li element represents an item in a list, being it ordered (ol element) or unordered (ul element), and a command in a toolbar menu.

In HTML5 specification, the value attribute of this element is only permitted in ordered lists (ol). Its use in unordered lists (ul) is invalid.

The type attribute of this element has been removed from HTML5 because of its presentational nature. Authors should replace its functionality with style sheets.

Examples

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 (ol).

<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

Ingredients

  • 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

Procedure

  1. Place the water, sugar and yeast in the pan of the bread machine and let the yeast dissolve and foam for 10 minutes.
  2. Add the oil, flour and salt to the yeast.
  3. Select "Basic" or "White Bread" setting.
  4. Press "Start".

The li element can also be part of a toolbar menu, representing a command the user can perform or activate.

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.

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

    Attributes

    Specific attributes

    value

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

    Example

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

    1. I form my resolution
    2. An unknow species of whale
    3. All by electricity

    type

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

    Example

    <li type="disc">25 nails</li>

    Global attributes

    For information about global attributes refer to this list of global attributes in HTML5.

    Events

    Global events

    For information about global events refer to this list of global events in HTML5.