HTML Lists

Prev
Next

Types of HTML Lists

  • (ol)- Ordered List
  • (ul)- Unordered List(Bulleted list)
  • (dl)- Description List

HTML List Tags Examples

Ordered List /Numbered List (ol)​

The <ol> tag is used to create an ordered list and <li> tag starts the list of items. It is also called as a numbered list because list items are marked with numbers.

ordered List

Example

    
<ol>
<li>January</li>
<li>February</li>
<li>March</li>
<li>April</li>
<li>May</li>
<li>June</li>
<li>July</li>
<li>August</li>
<li>September</li>
<li>October</li>
<li>November</li>
<li>December</li>
</ol>
Run the Code

Different list styles in ordered list

Apart from the normal list style, there are other styles as well. The default list will always start from 1.

Suppose, you want to create an ordered list which should not start from 1, then you have to exclusively set the particular ordered list type.

The Syntax of different  list types:
type=”value”
where, value can be a number or alphabet

The important ordered list types are –

  1. type=”1″ – To start the ordered list like 1,2,3 etc.
  2. start=”4″ – It will create an ordered list starting from 4. Example – 4, 5, 6 etc
  3. type=”a” – ordered list will start from a in alphabetical order like a, b, c etc
  4. type=”A”– ordered list will start from A in alphabetical order like A, B, C etc
  5. type=”I” – This will create ordered list in Roman alphabet in capitals.
  6. type=”i” – This will create ordered list in Roman alphabet in small letters.

Example of different list types in ordered list

<ol type="1">
  <li>Monday</li>
  <li>Tuesday</li>
  <li>Wednesday</li>
</ol> 
<ol type="a">
  <li>January</li>
  <li>February</li>
  <li>March</li>
</ol>
<ol type="A">
  <li>April</li>
  <li>May</li>
  <li>June</li>
</ol>  
<ol type="I">
  <li>July</li>
  <li>August</li>
  <li>September</li>
</ol>
<ol type="i">
  <li>October</li>
  <li>November</li>
  <li>December</li>
</ol>
<ol start="4">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>
Run the Code

Unordered List /Bulleted List (ul)

In HTML Lists, <ul> tag list starts with unordered list and list item starts with <li> tag. It is also called as a bulleted list because list items are marked with bullets.

Unordered List html

Example

    
<ul>
<li>January</li>
<li>February</li>
<li>March</li>
<li>April</li>
<li>May</li>
<li>June</li>
<li>July</li>
<li>August</li>
<li>September</li>
<li>October</li>
<li>November</li>
<li>December</li>
</ul>
Run the Code

Different bullets styles in unordered list

Apart from the normal bullet style, there are other styles for unordered list as well like disc, square, circle etc.

Example of different bullets in unordered list

    
<ul style="list-style-type:square">
  <li>January</li>
  <li>February</li>
  <li>March</li>
</ul>  

<ul style="list-style-type:circle">
  <li>April</li>
  <li>May</li>
  <li>June</li>
</ul> 

<ul style="list-style-type:disc">
  <li>July</li>
  <li>August</li>
  <li>September</li>
</ul> 

<ul style="list-style-type:none">
  <li>October</li>
  <li>November</li>
  <li>December</li>
</ul>
Run the Code

Note/Info:

  • The list-style-type:none is mostly used for creating Navigation bars.
  • For unordered list, you can use any of the 2 syntax’s like –
  1. ul style=”list-style-type:square”> or
  2. <ul type =”square”>

Description List /Definition List (dl)

HTML and XHTML supports Description list.
<dl> − It defines the start of description list.
<dt>− This tag defines term in description list.
<dd>− This tag describes Term description in definition list.

html Description List

Example

    
<dl>
   <dt><b>AIR</b></dt>
   <dd>All India Radio (Broadcasting)</dd>
   <dt><b>CDMA</b></dt>
   <dd>Code Division Multiple Access</dd>
   <dt><b>DVD</b></dt>
   <dd>Digital Versatile Disk</dd>
   <dt><b>FAO</b></dt>
   <dd>Food and Agriculture Organisation</dd>
</dl>
Run the Code

Interview Questions & Answer

Ordered list – It displays the elements in numbered format. It is represented by <ol> tag.

Unordered list – It displays the elements in bullet format. It is represented by <ul> tag.

Definition list – It displays elements in definition form like in dictionary. The <dl>, <dt> and <dd> tags are used to define description list.

<dl> — It defines the start of description list..

<dt> — This tag defines term in description list.

<dd> — Describes Term description in definition list.

The tag includes two attributes – type and value. The type attribute can be used to change the numbering type for any list item. The value attribute can change the number index.
For example,

<!DOCTYPE html>
<html>
<head>
<body>
<ol>
<li>Apple</li>
<li type="i" >Mango</li>
<li>Banana</li>
</ol>
</body>
</html>

output:-
1. Apple
ii. Mango
3. Banana

Here is code to make a bulleted list in HTML.

<!DOCTYPE html>
<html>
<head>
<body>
<ul>
  <li>Apple</li>
  <li>Mango</li>
  <li>Banana</li>
  <li>Coconut</li>
</ul>
</body>
</html>

Output

Fruits

    1. Apple
    2. Mango
    3. Banana

Flowers

    • Rose
    • Lilly
    • marigold
<!DOCTYPE html>
<html>
<head>
<body>
<dl>
<ol>
<dt><b>Fruits</b></dt>
<dd><li>Apple</li></dd>
<dd><li>Mango</li></dt>
<dd><li>Banana</li><dt>
</ol>
<dl>
<ul>
<dt><b>Flowers</b></dt>
<dd><li>Rose</li></dd>
<dd><li>Lilly</li></dd>
<dd><li>marigold</li></dd>
</ul>
</dl>
</body>
</html>

By default, it is not possible to change the color of bullets. But, we can do it with CSS and HTML by using “::before” selector.
For Example,

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style: none;
}
ul li::before {
  content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */ 
  color: blue; 
  font-weight: bold; 
  display: inline-block;
  width: 2em; 
  margin-left: -2em;
}
</style>
</head>
<body>

<ul>
  <li>Apple</li>
  <li>Mango</li>
  <li>Banana</li>
  <li>Coconut</li>
</ul>
</body>
</html>
Prev
Next
Facebook Twitter Google-plus

Tutorials for all brains!