HTML Lists

HTML Lists

  • Lists are used to represent group of items.
  • They must contain one or more list elements.
  • HTML supports three types of lists – Ordered list, Unordered list and Definition list.
1. Ordered list
  • Ordered list is the collection of related items which has special order or sequence. This list is numbered.
  • The ordered list is created by using <ol> tag.
Syntax:
<ol>text</ol>

Example: Ordered list

<!DOCTYPE html>
<html>
     <head>
          <title>Example of HTML Ordered List</title>
     </head>
     <body>
          <ol>
               <li>Maths</li>
               <li>Physics</li>
               <li>Computer Science</li>
               <li>Language</li>
          </ol>
     </body>
</html>

Output:
  1. 1. Maths
  2. 2. Physics
  3. 3. Computer Science
  4. 4. Language

Attributes of <ol> tag

AttributesDescriptionExample and Output
typeUsed to specify type of numbering like 1/a/A/I/i. Default type is ‘1’.Example:  
<ol type="a">
<li>Maths</li>
<li>Physics</li>
<li>Language</li>
</ol>

Output:
a. Maths
b. Physics
c. Language
startUsing this attribute any value can be set as the starting position.Example:
<ol type="i" start="4">
<li>Maths</li>
<li>Physics</li>
<li>Language</li>
</ol>

Output:
iv. Maths
v. Physics
vi. Language
valueUsing this attribute the numbering sequence can be changed in the middle of an ordered list.
It is to be specified with the <li> tag.		Example:
<ol>
<li type="a" value="3">Maths</li>
<li value="5">Physics</li>
</ol>

Output:
c. Maths
5. Physics

2. Unordered list:
  • Unordered list is nothing but the collection of related items which has no special order or sequence.
  • The list item in the list is indicated by bullet.
Syntax:
<ul>text</ul>

Example: Unordered list

<!DOCTYPE html>
<html>
     <head>
          <title>Example of HTML Ordered List</title>
     </head>
     <body>
          <ul>
               <li>Maths</li>
               <li>Physics</li>
               <li>Computer Science</li>
               <li>Language</li>
          </ul>
     </body>
</html>

Output:
  • Maths
  • Physics
  • Computer Science
  • Language
Attributes of <ul>

AttributeDescriptionExample and Output
typeUsed to specify type of list item like bullet, circle and square.
Default type is bullet.		Example:  
<ul type="square">
<li>Maths</li>
<li>Physics</li>
<li>Language</li>
</ul>

Output:
Unordered list

3. Definition list:
  • Definition list has two parts, first is definition term and second is actual definition.
  • The <dl> tag is used to create definition list.
  • The <dl> tag encloses <dt> and <dd> tags which are used for definition term and actual definition respectively.
Syntax:
<dl>
<dt>Definition Term</dt>
<dd>Definition</dd>
</dl>

Example: Definition list

<!DOCTYPE html>
<html>
     <head>
          <title>Example of HTML Definition List</title>
     </head>
     <body>
          <dl>
               <dt><b>jQuery</b></dt>
               <dd>jQuery is a JavaScript Library.</dd>
               <dt><b>AngularJS</b></dt>
               <dd>AngularJS is a JavaScript framework.</dd>
          </dl>
     </body>
</html>

Output:
jQuery
          jQuery is a JavaScript Library.
AngularJS
          AngularJS is a JavaScript framework.
▲