Horje
What is HTML <li> Tag | HTML Tag Code
What is HTML <li> Tag

Definition and Usage

The <li> tag defines a list item.

The <li> tag is used inside ordered lists(<ol>), unordered lists (<ul>), and in menu lists (<menu>).

In <ul> and <menu>, the list items will usually be displayed with bullet points.

In <ol>, the list items will usually be displayed with numbers or letters.

Browser Support


How to create HTML <li> Tag

Example of The ol and ul elements.
index.html
Example: HTML
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<p>The ul element defines an unordered list:</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Output should be:

How to create HTML <li> Tag

How to create HTML <li> value Attribute

Use of the value attribute in an ordered list.

Definition and Usage

The value attribute sets the value of a list item. The following list items will increment from that number.

The value must be a number and can only be used in ordered lists (<ol>).


Browser Support

Syntax

<li value="number">

Attribute Values

Value Description
number Specifies the value of the list item
index.html
Example: HTML
 <ol>
  <li value="100">Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Water</li>
  <li>Juice</li>
  <li>Beer</li>
</ol> 

Output should be:

How to create HTML <li> value Attribute

How to Use of the value attribute in an ordered list

Use of the value attribute in an ordered list.

index.html
Example: HTML
<ol>
  <li value="100">Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Water</li>
  <li>Juice</li>
  <li>Beer</li>
</ol>

Output should be:

How to Use of the value attribute in an ordered list

How to Set different list style types (with CSS)

Define list type with CSS

index.html
Example: HTML
<ol>
  <li>Coffee</li>
  <li style="list-style-type:lower-alpha">Tea</li>
  <li>Milk</li>
</ol>
<ul>
  <li>Coffee</li>
  <li style="list-style-type:square">Tea</li>
  <li>Milk</li>
</ul>

Output should be:

How to Set different list style types (with CSS)

How to Create a list inside a list (a nested list)

A list inside another list.

index.html
Example: HTML
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Output should be:

How to Create a list inside a list (a nested list)

How to Create a more complex nested list

A list in a list in a list.

index.html
Example: HTML
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea
        <ul>
          <li>China</li>
          <li>Africa</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Output should be:

How to Create a more complex nested list

How to set Default CSS Settings of <li> element

Most browsers will display the <li> element with the following default values.

index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>
<style>
li {
  display: list-item;
}
</style>

<h1>The ol and ul elements</h1>

<p>The ol element defines an ordered list:</p>
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<p>The ul element defines an unordered list:</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>

Output should be:

How to set Default CSS Settings of <li> element



Read Full::
HTML Tag Code
Category:
HTML Code
Sub Category:
HTML Tag Code
Uploaded:
1 week ago
Uploaded by:
Admin
Views:
14

Related Articles
What is HTML <!--...--> Tag HTML Tag Code
What is HTML <!DOCTYPE> Declaration HTML Tag Code
What is HTML Elements and Doctypes HTML Tag Code
What is HTML <a> Tag HTML Tag Code
What is HTML <abbr> Tag HTML Tag Code
What is HTML <address> Tag HTML Tag Code
What is HTML <applet> Tag HTML Tag Code
What is HTML <area> Tag HTML Tag Code
What is HTML <article> Tag HTML Tag Code
What is HTML <aside> Tag HTML Tag Code
What is HTML <audio> Tag HTML Tag Code
What is HTML <b> Tag HTML Tag Code
What is HTML <base> Tag HTML Tag Code
What is HTML <basefont> Tag HTML Tag Code
What is HTML <bdi> Tag HTML Tag Code
What is HTML <bdo> Tag HTML Tag Code
What is HTML <big> Tag HTML Tag Code
What is HTML <blockquote> Tag HTML Tag Code
What is HTML <body> Tag HTML Tag Code
What is HTML <br> Tag HTML Tag Code
What is HTML <button> Tag HTML Tag Code
What is HTML <canvas> Tag HTML Tag Code
What is HTML <caption> Tag HTML Tag Code
What is HTML <center> Tag HTML Tag Code
What is HTML <cite> Tag HTML Tag Code
What is HTML <code> Tag HTML Tag Code
What is HTML <col> Tag HTML Tag Code
How to create HTML <colgroup> Tag HTML Tag Code
What is HTML <data> Tag HTML Tag Code
What is HTML <datalist> Tag HTML Tag Code
What is HTML <dd> Tag HTML Tag Code
What is HTML <del> Tag HTML Tag Code
What is HTML <details> Tag HTML Tag Code
What is HTML <dfn> Tag HTML Tag Code
What is HTML <dialog> Tag HTML Tag Code
What is HTML <dir> Tag HTML Tag Code
What is HTML <div> Tag HTML Tag Code
What is HTML <dl> Tag HTML Tag Code
What is HTML <dt> Tag HTML Tag Code
What is HTML <em> Tag HTML Tag Code
What is HTML <embed> Tag HTML Tag Code
What is HTML <fieldset> Tag HTML Tag Code
What is HTML <figcaption> Tag HTML Tag Code
What is HTML <figure> Tag HTML Tag Code
What is HTML <font> Tag HTML Tag Code
What is HTML <footer> Tag HTML Tag Code
What is HTML <form> Tag HTML Tag Code
What is HTML <frame> Tag HTML Tag Code
What is HTML <frameset> Tag HTML Tag Code
What is HTML <h1> to <h6> Tags HTML Tag Code
What is HTML <head> Tag HTML Tag Code
What is HTML <header> Tag HTML Tag Code
What is HTML <hgroup> Tag HTML Tag Code
What is HTML <hr> Tag HTML Tag Code
What is HTML <html> Tag HTML Tag Code
What is HTML <i> Tag HTML Tag Code
What is HTML <iframe> Tag HTML Tag Code
What is HTML <img> Tag HTML Tag Code
What is HTML <input> Tag HTML Tag Code
What is HTML <ins> Tag HTML Tag Code
What is HTML <kbd> Tag HTML Tag Code
What is HTML <label> Tag HTML Tag Code
What is HTML <legend> Tag HTML Tag Code
What is HTML <li> Tag HTML Tag Code
What is HTML <link> Tag HTML Tag Code

Single Articles
How to create HTML <li> Tag
How to create HTML <li> value Attribute
How to Use of the value attribute in an ordered list
How to Set different list style types (with CSS)
How to Create a list inside a list (a nested list)
How to Create a more complex nested list
How to set Default CSS Settings of <li> element

Share on: