CodesJava

Easy learning with example program codes

List tags in HTML

HTML Lists

To specify lists of information, an HTML List is used, which can be any of the three different types.

  • Ordered List or Numbered List (ol)
  • Unordered List or Bulleted List (ul)
  • Description List or Definition List (dl)

 

HTML Ordered List or Numbered List: 

As the name itself suggests, all the list items are marked with numbers by default in a Numbered List. It is popularly known as HTML Ordered List and hence starts with the <ol> tag. The list items in an HTML Ordered List starts with the <li> tag.

Example:

<!DOCTYPE html>
<html>
<body>
<h2>HTML Ordered List or Numbered List</h2>
<ol>
  <li>Name</li>
  <li>Age</li>
  <li>Address</li>
</ol>  
</body>
</html>

Output:




HTML Ordered List or Numbered List

  1. Name
  2. Age
  3. Address

Explanation: 

In the above example, we created an ordered or numbered list in HTML containing three items.

HTML Unordered List or Bulleted List: 

As the name itself suggests, all the list items are marked with bullets by default in a Bulleted List. It is popularly known as HTML Unordered List and hence starts with the <ul> tag. The list items in an HTML Unordered List starts with the <li> tag.

Example:

<!DOCTYPE html>
<html>
<body>
<h2>HTML Unordered List or Bulleted List</h2>
<ul>
  <li>Name</li>
  <li>Age</li>
  <li>Address</li>
</ul>  
</body>
</html>

Output:




HTML Unordered List or Bulleted List

  • Name
  • Age
  • Address

Explanation:
In the above example, we created an unordered or bulleted list in HTML containing three items.

HTML Description List or Definition List:
In HTML Description list, entries are listed like a dictionary or encyclopedia, and hence it is also called as a Definition List. To display a glossary, a list of terms or other name-value lists, the HTML Description list can be the best choice.

Example:

<!DOCTYPE html>
<html>
<body>
<h2>HTML Description List or Definition List</h2>
<dl>
  <dt><b>Name</b></dt>
  <dd>- Write your Full name in Capital letters.</dd>
  <dt><b>Age</b></dt>
  <dd>- Write your actual age.</dd>
  <dt><b>Address</b></dt>
  <dd>- Write your permanent address details.</dd>
</dl>
</body>
</html>

Output:




HTML Description List or Definition List

Name
- Write your Full name in Capital letters.
Age
- Write your actual age.
Address
- Write your permanent address details.

Explanation:
In the above example, we created a description or definition list in HTML containing three items along with their definitions.

HTML Nested List:
A nested list can be simply understood as a list within another list. The lists within a nested list need not be of the same type.

Example:

<!DOCTYPE html>
<html>
<body>
<h2>HTML Nested List</h2>
<ul>
  <li>Name</li>
  <li>Age</li>
  <li>Address
  <ol>
      <li>Local Address</li>
      <li>Permanent Address</li>
    </ol>
    </li>
</ul>
</body>
</html>

Output:




HTML Nested List

  • Name
  • Age
  • Address
    1. Local Address
    2. Permanent Address

Explanation:
In the above example, we created a nested list in HTML. It includes an unordered list of three items. One of the items of this list contains an ordered list of two items.

Please follow and like us:
error
Posted in HTML   









Copyright © 2019 CodesJava DMCA.com Protection Status