• Tutorial List

HTML Lists – Unordered, Ordered, & Description list

Last updated Jul 08, 2020
HTML Lists - Unordered, Ordered, and Description list

HTML lists are used to organize information in a list. In HTML, there are three different types of lists, and each list type has a different purpose to use.


Types of HTML list

  1. <ul> Unordered list
    • The Unordered list is a plain list, and it is used to present a list of information in an unordered way.
  2. <ol> Ordered list
    • The Ordered list is used to present the list items in an ordered way. such as – 1,2,3 or A,B,C etc.
  3. <dl> Description list
    • If you want to create a list where each list item can contain a title and description, then the description list will help you to create it.

Unordered list in HTML

  • The <ul> tag is used to create an unordered list.
  • The <li> tag is used to create list items in the list.
  • By default, the unordered list items are marked with bullets (●). And you can change the list item marker.
<!DOCTYPE html>
<html>
  <body>
      
    <ul>
      <li>Apple</li>
      <li>Mango</li>
      <li>Banana</li>
    </ul>
      
  </body>
</html>

👉 How to change list item marker?

You can change the list item marker with the help of the CSS list-style-type: property.

  • Values of list-style-type: property –
    1. disc – Bullet itself.
    2. circle – Circle with the outline.
    3. square – A simple square.
    4. none – used to unmarked the list items.
<ul style="list-style-type:disc;">
  <li>Apple</li>
  <li>Mango</li>
  <li>Banana</li>
</ul>

<ul style="list-style-type:circle;">
  <li>Apple</li>
  <li>Mango</li>
  <li>Banana</li>
</ul>

<ul style="list-style-type:square;">
  <li>Apple</li>
  <li>Mango</li>
  <li>Banana</li>
</ul>

<ul style="list-style-type:none;">
  <li>Apple</li>
  <li>Mango</li>
  <li>Banana</li>
</ul>

Ordered list in HTML

  • The <ol> tag is used to create an Ordered list.
  • The <li> tag is also used to create list items in the Ordered list.
  • In default, the ordered list items are marked with numbers (1,2,3,…), and you can also change it.
<!DOCTYPE html>
<html>
  <body>
      
    <ol>
      <li>Apple</li>
      <li>Mango</li>
      <li>Banana</li>
    </ol>
      
  </body>
</html>

👉 How to change ordered list items marker?

With the help of the type=”…” attribute, you can change the ordered list items marker.

TypeDescription
type=“1”List items will be marked with numbers.
type=“A”List items will be marked with uppercase letters.
type=“a”List items will be marked with lowercase letters.
type=“I”List items will be marked with uppercase roman numbers.
type=“i”List items will be marked with lowercase roman numbers.
Values of the <ol> type attribute
<ol type="1">
  <li>Apple</li>
  <li>Mango</li>
  <li>Banana</li>
</ol>

<ol type="A">
  <li>Apple</li>
  <li>Mango</li>
  <li>Banana</li>
</ol>

<ol type="a">
  <li>Apple</li>
  <li>Mango</li>
  <li>Banana</li>
</ol>

<ol type="I">
  <li>Apple</li>
  <li>Mango</li>
  <li>Banana</li>
</ol>

<ol type="i">
  <li>Apple</li>
  <li>Mango</li>
  <li>Banana</li>
</ol>

Description list in HTML

  • The <dl> tag is used to create a description list.
  • The <dt> tag is used to define a title in a description list.
  • The <dd> tag is used to define the description in a description list.
<!DOCTYPE html>
<html>
  <body>

<dl>
  
  <dt>HTML</dt>
  <dd>HTML is a Markup Language that is used to create the structure of a webpage.</dd>
  
  <dt>CSS</dt>
  <dd>CSS stands for Cascading Style Sheet that is used to add styles on a webpage.</dd>
  
  <dt>JavaScript</dt>
  <dd>JavaScript is a scripting language that is used to make web pages dynamic.</dd>
  
</dl>
    
  </body>
</html>

What is the HTML nested list?

When you create a list inside a list item of a list, it is called HTML nested list. A list or nested list can be an unordered list or ordered list.

👉 Nested Undered list in HTML

<ul>
  
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
      <li>Mango</li>
    </ul>
  </li>
  
  <li>vegetables
    <ul>
      <li>Potato</li>
      <li>Onion</li>
      <li>Carrot</li>
    </ul>
  </li>
  
</ul>

👉 Nested Ordered List in HTML

<ol>
  
  <li>Operating Systems
    <ol>
      <li>Windows</li>
      <li>macOS</li>
      <li>Linux</li>
    </ol>
  </li>
  
  <li>Search Engines
  	<ol>
      <li>Google</li>
      <li>Bing</li>
      <li>Yahoo</li>
    </ol>
  </li>
  
</ol>

👉 Mixed Nested list in HTML

You can create an Ordered list inside an Unordered list, and you can also create an Unordered list inside an ordered list.

<ol>
  
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
      <li>Mango</li>
    </ul>
  </li>
  
</ol>

<ul>
  
  <li>Operating Systems
    <ol>
      <li>Windows</li>
      <li>macOS</li>
      <li>Linux</li>
    </ol>
  </li>
  
</ul>

Ask Questions

Your email address will not be published. Required fields are marked *