totn HTML

HTML: <li> tag

This HTML tutorial explains how to use the HTML element called the <li> tag with syntax and examples.

Description

The HTML <li> tag defines a list item in <ol>, <ul> or <menu> in the HTML document. This tag is also commonly referred to as the <li> element.

Syntax

In HTML, the syntax for the <li> tag within <ul> tag is: (unordered list)

<body>
<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>
</body>

Sample Output

In HTML, the syntax for the <li> tag within <ol> tag is: (ordered list)

<body>
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>
</body>

In HTML, the syntax for the <li> tag within <menu> tag is:

<body>
<menu type="toolbar">
  <li>
    <menu label="File">
      <button type="button" onclick="new()">New</button>
      <button type="button" onclick="save()">Save</button>
    </menu>
  </li>
  <li>
    <menu label="Edit">
      <button type="button" onclick="copy()">Copy</button>
      <button type="button" onclick="paste()">Paste</button>
    </menu>
  </li>
</menu>
</body>

Attributes

In addition to the Global Attributes, the following is a list of attributes that are specific to the <li> tag:

Attribute Description HTML Compatibility
value Integer value indicating the current ordinal value of the item only in <ol> list Deprecated in HTML 4.01, Reintroduced in HTML5
type Character value indicating numbering style. It can be any of the following values:
a - means lowercase
A - means uppercase
i - means lowercase Roman numerals
I - means uppercase Roman numerals
1 - means numbers		 Deprecated, use CSS

Note

Browser Compatibility

The <li> tag is compatible with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • Edge Mobile
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the <li> tag below, exploring examples of how to use the <li> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

  • HTML5
  • HTML4
  • XHTML

HTML5 Document

If you created a new web page in HTML5, your <li> tag might look like this:

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>HTML5 Example by www.techonthenet.com</title>
</head>

<body>
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
</ol>

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

<ul>
  <li>First item
    <ol>
      <li>Nested item A</li>
      <li>Nested item B</li>
      <li>Nested item C</li>
      <li>Nested item D</li>
    </ol>
  </li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
</ul>
</body>
</html>

In this HTML5 Document example, we have an ordered list <ol> tag with four <li> list items. Then we have an unordered list <ul> tag with three <li> list items. Finally we have nested an ordered list <ol> tag within an unordered list <ul> tag.

HTML 4.01 Transitional Document

If you created a new web page in HTML 4.01 Transitional, your <li> tag might look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML 4.01 Transitional Example by www.techonthenet.com</title>
</head>

<body>
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
</ol>

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

<ul>
  <li>First item
    <ol>
      <li>Nested item A</li>
      <li>Nested item B</li>
      <li>Nested item C</li>
      <li>Nested item D</li>
    </ol>
  </li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
</ul>
</body>
</html>

In this HTML 4.01 Transitional Document example, we have an ordered list <ol> tag with four <li> list items. Then we have an unordered list <ul> tag with three <li> list items. Finally we have nested an ordered list <ol> tag within an unordered list <ul> tag.

XHTML 1.0 Transitional Document

If you created a new web page in XHTML 1.0 Transitional, your <li> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHMTL 1.0 Transitional Example by www.techonthenet.com</title>
</head>

<body>
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
</ol>

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

<ul>
  <li>First item
    <ol>
      <li>Nested item A</li>
      <li>Nested item B</li>
      <li>Nested item C</li>
      <li>Nested item D</li>
    </ol>
  </li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
</ul>
</body>
</html>

In this XHTML 1.0 Transitional Document example, we have an ordered list <ol> tag with four <li> list items. Then we have an unordered list <ul> tag with three <li> list items. Finally we have nested an ordered list <ol> tag within an unordered list <ul> tag.

XHTML 1.0 Strict Document

If you created a new web page in XHTML 1.0 Strict, your <li> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.0 Strict Example by www.techonthenet.com</title>
</head>

<body>
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
</ol>

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

<ul>
  <li>First item
    <ol>
      <li>Nested item A</li>
      <li>Nested item B</li>
      <li>Nested item C</li>
      <li>Nested item D</li>
    </ol>
  </li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
</ul>
</body>
</html>

In this XHTML 1.0 Strict Document example, we have an ordered list <ol> tag with four <li> list items. Then we have an unordered list <ul> tag with three <li> list items. Finally we have nested an ordered list <ol> tag within an unordered list <ul> tag.

XHTML 1.1 Document

If you created a new web page in XHTML 1.1, your <li> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.1 Example by www.techonthenet.com</title>
</head>

<body>
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
</ol>

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

<ul>
  <li>First item
    <ol>
      <li>Nested item A</li>
      <li>Nested item B</li>
      <li>Nested item C</li>
      <li>Nested item D</li>
    </ol>
  </li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
</ul>
</body>
</html>

In this XHTML 1.1 Document example, we have an ordered list <ol> tag with four <li> list items. Then we have an unordered list <ul> tag with three <li> list items. Finally we have nested an ordered list <ol> tag within an unordered list <ul> tag.

Share on: