Different List in HTML (UL vs OL vs DL) with Video Examples

Different between Unordered List (UL), Ordered List (OL) and Description List (DL)

Hello friends, in this blog post we will discuss the difference between Unordered List (UL), Ordered List (OL) and Description List (DL) in HTML along with video examples in khmer language.

We also discuss each list type in detail with attributes along with practical examples.

Unordered List (UL) with Attributes in HTML

An unordered list (UL) is used to create a list of items where the order of the items does not matter. You can customize the appearance of the bullet points using the type attribute.

Here are some examples of unordered lists with different bullet styles:

<ul type="disc">
  <li>List 1 (disc)</li>
  <li>List 2</li>
</ul>
<ul type="circle">
  <li>List 1 (circle)</li>
  <li>List 2</li>
</ul>
<ul type="square">
  <li>List 1 (square)</li>
  <li>List 2</li>
</ul>
<ul type="none">
  <li>List 1 (type="none")</li>
  <li>List 2</li>
</ul>
<ul style="list-style-type: none">
  <li>List 1 (using style for no bullets)</li>
  <li>List 2</li>
</ul>
  

Output:

• List 1 (disc - also default)
• List 2

• List 1 (circle)
• List 2

• List 1 (square)
• List 2

• List 1 (type="none")
• List 2

• List 1 (using style for no bullets)
• List 2

Watch Video for detail about Unorder List (UL) in HTML speak khmer

Ordered List (OL) with Attributes in HTML

An ordered list (OL) is used to create a list of items where the order of the items matters. You can customize the numbering style using the type attribute, and you can also control the starting number and direction of the list.

Here are some examples of ordered lists with different attributes:

<ol type="1">
  <li>List 1 (type="1")</li>
  <li>List 2</li>
</ol>
<ol type="A">
  <li>List 1 (type="A")</li>
  <li>List 2</li>
</ol>
<ol type="I">
  <li>List 1 (type="I")</li>
  <li>List 2</li>
</ol>
<ol type="a">
  <li>List 1 (type="a")</li>
  <li>List 2</li>
</ol>
<ol type="i">
  <li>List 1 (type="i")</li>
  <li>List 2</li>
</ol>
<ol start="5">
  <li>List 1 (start="5")</li>
  <li>List 2</li>
</ol>
<ol reversed>
  <li>List 3</li>
  <li>List 2</li>
  <li>List 1</li>
</ol>
<ol start="10" type="A">
  <li>List 1 (start="10" type="A")</li>
  <li>List 2</li>
</ol>
<ol type="A" start="3" reversed>
  <li>C (counting down)</li>
  <li>B</li>
  <li>A</li>
</ol>
<ol>
  <li>First item</li>
  <li value="10">Jump to 10 - value only for ordered lists</li>
  <li>Continues from 11</li>
</ol>
  

Output:

1. List 1 (type="1")
2. List 2

1. List 1 (type="A")
2. List 2

1. List 1 (type="I")
2. List 2

1. List 1 (type="a")
2. List 2

1. List 1 (type="i")
2. List 2

5. List 1 (start="5")
6. List 2

1. List 3
2. List 2
3. List 1

10. List 1 (start="10" type="A")
11. List 2

3. C (counting down)
4. B
5. A

1. First item
10. Jump to 10 - value only for ordered lists
11. Continues from 11

Watch Video for detail about Order List (OL) in HTML speak khmer

Definition List (DL)

A definition list is used to present a list of terms and their descriptions.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language - used for creating web pages</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets - used for styling web pages</dd>
  <dt>JavaScript</dt>
  <dd>Programming language for web interactivity</dd>
  <dd>Can be used for both frontend and backend development</dd>
</dl>
  

Output:

HTML

HyperText Markup Language - used for creating web pages

CSS

Cascading Style Sheets - used for styling web pages

JavaScript

Programming language for web interactivity

Can be used for both frontend and backend development

You can also add attributes like title to provide additional information.

Example definition list (dl) with Title Attribute

<dl title="This is a glossary of web development terms" style="cursor: help">
  <dt title="Click for more info about HTML">HTML5</dt>
  <dd>Latest version of HTML with new semantic elements</dd>
  <dt title="Click for more info about CSS">CSS3</dt>
  <dd>Latest version of CSS with animations and flexbox</dd>
</dl> 

  

Output:

HTML5

Latest version of HTML with new semantic elements

CSS3

Latest version of CSS with animations and flexbox

Watch Video for detail about Definition List (DL) in HTML speak khmer

Free Khmer Ebook Download (PDF): Database | Microsoft Access | Python Programming