Java Training School

HTML Lists

HTML Lists are used to specify lists of information. All lists may contain one or more list elements.There are three different types of HTML lists:

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

Note : We can create a list inside another list, which will be termed as nested List.

Ordered List or Numbered List

In the ordered HTML lists, all the list items are marked with numbers by default

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial</title>
 
</head>
<body>
<ol>
  <li>HTML</li>
  <li>Java</li>
  <li>Python</li>
  <li>C++</li
</ol>
</body>
</html>

Output :

HTML Unordered List or Bulleted List

In HTML Unordered list, all the list items are marked with bullets.

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial</title>
 
</head>
<body>
<ul>  
 <li>KGF-2</li>  
 <li>Bahubali-2</li>  
 <li>R R R</li>  
 <li>Brahmāstra: – Shiva</li>  
</ul>  
</body>
</html>

Output :

HTML Description List

HTML Description list is also a list style which is supported by HTML and XHTML. It is also known as definition list where entries are listed like a dictionary or encyclopedia.

The definition list is very appropriate when you want to present list of books or other name-value list.

  • <dl> tag defines the start of the list.
  • <dt> tag defines a term.
  • <dd> tag defines the term definition (description).
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
<h2>List of books</h2>
<dl>  
  <dt>Wings Of Fire An Autobiography:</dt>  
  <dd>-Every common man who by his sheer grit and hard work achieves success.</dd>  
  <dt>Mahatma Gandhi, An Autobiography:</dt>  
  <dd>-This is a window to the workings of Mahatma Gandhism mind.</dd>  
 <dt>Vivekanand Ki Atmakatha:</dt>  
 <dd>-A Biography Reflecting Swami Vivekanand Spiritual Journey.</dd>  
</dl>   
</body>
</html>

Output :

HTML Nested List

A list within another list is termed as nested list. If you want a bullet list inside a numbered list then HTML introduce a concept of Nested list.

Example:

<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
<h2>Nested List </h2>
   <ol>
		<li>Coffee</li>
		<ul>Hot Coffee</ul>
		<ul>Cold Coffee</ul>
		<li>Tea</li>
		<ul>Green Tea</ul>
		<ul>Black Tea</ul>
   </ol>
</body>
</html>

Output :

<—Previos
Next—>