HTML li tag

HTML li tag (<li>) can be used to create a list item. It can be used either in unordered list – ul (<ul>) or in ordered list – ol (<ol>). Also note that there can be nested lists (using ul and/or ol) also.

Attributes

Specific HTML attributes (in addition to global attributes) for li tag are

  • value: The ordinal value of the list item. Permitted only if the li element is a child of an ol element. Note that value attribute was deprecated in HTML4 but is supported in HTML5
  • type (deprecated)
  • start (deprecated)
  • compact (deprecated)

CSS property display

The default value of li element’s display property is list-item.

li {
  display: list-item;
}

Example – li tag with ul and ol

Unordered list
<ul>
<li>item1</li> <li>item2</li> <li>item3</li>
</ul>

Ordered list
<ol>
<li>item1</li> <li>item2</li> <li>item3</li>
</ol>
refresh

Example – li tag with attribute value

When a value is assigned in li tag, that becomes the ordinal value of that item. Next item ordinal value is obtained by taking taken value if not specified.

Ordered list
<ol>
  <li value="2">itemA</li>
  <li value="4">itemB</li>
  <li>itemC</li>
  <li>itemD</li>
</ol>
refresh

Example – li tag with display inline

<style>
  li {display: inline; }
</style>

Unordered list
<ul>
<li>item1</li> <li>item2</li> <li>item3</li>
</ul>

Ordered list
<ol>
<li>item1</li> <li>item2</li> <li>item3</li>
</ol>
refresh

Related

Specification

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments