Revision 934071 of <li>

<h2 id="Summary">Summary</h2>

<p>The <em>HTML List Item Element</em> (<code>&lt;li&gt;</code>) is used to represent an item in a list. It must be contained in a parent element: an ordered list ({{HTMLElement("ol")}}), an unordered list ({{HTMLElement("ul")}}), or a menu ({{HTMLElement("menu")}}). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th>
   <td>None.</td>
  </tr>
  <tr>
   <th scope="row">Permitted content</th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>.</td>
  </tr>
  <tr>
   <th scope="row">Tag omission</th>
   <td>The <span title="syntax-end-tag">end tag</span> can be omitted if the list item is immediately followed by another {{HTMLElement("li")}} element, or if there is no more content in its parent element.</td>
  </tr>
  <tr>
   <th scope="row">Permitted parent elements</th>
   <td>An {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, or {{HTMLElement("menu")}} element. Though not a conforming usage, the obsolete {{HTMLElement("dir")}} can also be a parent.</td>
  </tr>
  <tr>
   <th scope="row">DOM interface</th>
   <td>{{domxref("HTMLLIElement")}}</td>
  </tr>
  <tr>
   <th scope="row">Element type</th>
   <td>Block</td>
  </tr>
 </tbody>
</table>

<h2 id="Attributes">Attributes</h2>

<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p>

<dl>
 <dt>{{htmlattrdef("value")}}</dt>
 <dd>This integer attribute indicates the current ordinal value of the list item as defined by the {{HTMLElement("ol")}} element. The only allowed value for this attribute is a number, even if the list is displayed with Roman numerals or letters. List items that follow this one continue numbering from the value set. The <strong>value</strong> attribute has no meaning for unordered lists ({{HTMLElement("ul")}}) or for menus ({{HTMLElement("menu")}}).
 <div class="note"><strong>Note</strong>: This attribute was deprecated in HTML4, but reintroduced in HTML5.</div>

 <div class="note">
 <p><strong>Note:</strong> Prior to {{Gecko("9.0")}}, negative values were incorrectly converted to 0. Starting in {{Gecko("9.0")}} all integer values are correctly parsed.</p>
 </div>
 </dd>
 <dt>{{htmlattrdef("type")}} {{Deprecated_inline}}</dt>
 <dd>This character attribute indicates the numbering type:
 <ul>
  <li><code>a</code>: lowercase letters</li>
  <li><code>A</code>: uppercase letters</li>
  <li><code>i</code>: lowercase Roman numerals</li>
  <li><code>I</code>: uppercase Roman numerals</li>
  <li><code>1</code>: numbers</li>
 </ul>
 This type overrides the one used by its parent {{HTMLElement("ol")}} element, if any.

 <div class="note"><strong>Usage note:</strong> This attribute has been deprecated: use the CSS {{cssxref("list-style-type")}} property instead.</div>
 </dd>
</dl>

<h2 id="Examples">Examples</h2>

<pre class="brush: html">
&lt;ol&gt;
    &lt;li&gt;first item&lt;/li&gt;
    &lt;li&gt;second item&lt;/li&gt;
    &lt;li&gt;third item&lt;/li&gt;
&lt;/ol&gt;	
</pre>

<p>The above HTML will output:</p>

<ol>
 <li>first item</li>
 <li>second item</li>
 <li>third item</li>
</ol>

<pre class="brush: html">
&lt;ol type="I"&gt;
    &lt;li value="3"&gt;third item&lt;/li&gt;
    &lt;li&gt;fourth item&lt;/li&gt;
    &lt;li&gt;fifth item&lt;/li&gt;
&lt;/ol&gt;	
</pre>

<p>The above HTML will output:</p>

<ol start="3" style="list-style-type: upper-roman;">
 <li>third item</li>
 <li>fourth item</li>
 <li>fifth item</li>
</ol>

<pre class="brush: html">
&lt;ul&gt;
    &lt;li&gt;first item&lt;/li&gt;
    &lt;li&gt;second item&lt;/li&gt;
    &lt;li&gt;third item&lt;/li&gt;
&lt;/ul&gt;</pre>

<ul>
 <li>first item</li>
 <li>second item</li>
 <li>third item</li>
</ul>

<p>For more detailed examples, see the <a href="/en-US/docs/Web/HTML/Element/ol#Examples">&lt;ol&gt;</a> and <a href="/en-US/docs/Web/HTML/Element/ul#Examples">&lt;ul&gt;</a> pages.</p>

<h2 id="Specifications" name="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-li-element', '&lt;li&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-li-element', '&lt;li&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'lists.html#h-10.2', '&lt;li&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also">See also</h2>

<ul>
 <li>Other list-related HTML Elements: {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}}, and the obsolete {{HTMLElement("dir")}};</li>
 <li>CSS properties that may be specially useful to style the <code>&lt;li&gt;</code> element:
  <ul>
   <li>the {{cssxref("list-style")}} property, to choose the way the ordinal is displayed,</li>
   <li><a href="/Web/Guide/CSS/Counters">CSS counters</a>, to handle complex nested lists,</li>
   <li>the {{cssxref("margin")}} property, to control the indent of the list item.</li>
  </ul>
 </li>
</ul>

<div>{{HTMLRef}}</div>