Markdown Lists

You can create ordered and unordered lists in Markdown just like HTML.

Ordered Lists

You can create an ordered list by add line items with numbers followed by periods.

The numbers do not have to be in numerical order, but the list should start with the number one.

Syntax

1|a|A|i|I

<ol>
  <li>Milk</li>
  <li>Tomato</li>
  <li>Orange</li>
</ol>

<ol type="a">
  <li>Milk</li>
  <li>Tomato</li>
  <li>Orange</li>
</ol>

<ol type="A">
  <li>Milk</li>
  <li>Tomato</li>
  <li>Orange</li>
</ol>

<ol type="i">
  <li>Milk</li>
  <li>Tomato</li>
  <li>Orange</li>
</ol>

<ol type="I">
  <li>Milk</li>
  <li>Tomato</li>
  <li>Orange</li>
</ol>

The following example create ordered list:

Example

# Numbers

1. Milk
2. Tomato
3. Orange

# Lowercase

a. Milk
b. Tomato
c. Orange

# Uppercase

A. Milk
B. Tomato
C. Orange

# Lower-roman

i. Milk
ii. Tomato
iii. Orange

# Upper-roman

I. Milk
II. Tomato
III. Orange

Try this code ❯

CommonMark and a few other lightweight markup languages let you use a parenthesis ) as a delimiter, but not all Markdown applications support this, so it isn’t a great option from a compatibility perspective. For compatibility, use periods only.

Example

1) Milk
2) Tomato
3) Orange

Try this code ❯

Creating list using <ol> HTML tag:

Example

<ol>
 <li>Milk</li>
 <li>Tomato</li>
 <li>Orange</li>
</ol>

Try this code ❯

Unordered Lists

You can create an unordered list by adding dashes 6, asterisks *, or plus signs - in front of line items.

Use indent one or more to create a nested list.

Syntax

-|*|+

<ul>
  <li>Milk</li>
  <li>Tomato</li>
  <li>Orange</li>
</ul>

<ul>
  <li>Milk</li>
  <li>Tomato</li>
  <li>Orange</li>
</ul>

<ul>
  <li>Milk</li>
  <li>Tomato</li>
  <li>Orange</li>
</ul>

The following example create unordered list by adding dashes -, asterisks *, or plus signs + in front of list:

Example

# Dashes

- Milk
- Tomato
- Orange

# Asterisks
 
* Milk
* Tomato
* Orange

# Plus

+ Milk
+ Tomato
+ Orange

Try this code ❯

The Markdown applications do not understand on how to handle different delimiters in the same list. For compatibility, do not mix and match delimiters in the same list - pick one and stick with it.

Example

- Milk
* Tomato
+ Orange
* Mango

Try this code ❯

Creating list using <ul> HTML tag:

Example

<ul>
 <li>Milk</li>
 <li>Tomato</li>
 <li>Orange</li>
</ul>

Try this code ❯

How to handle if unordered list start with numbers

If you need to start an unordered list item with a number followed by a period, you can use a backslash \ to escape the period.

Example

# With Backslash

- 2004\ John Gruber created Markdown language.
- 1991\ Tim Berner-Lee create HTML language

# Without Backslash

- 2004 John Gruber created Markdown language.
- 1991 Tim Berner-Lee create HTML language

Try this code ❯

Adding Elements in Lists

You can add single or multiple element in a list while preserving the continuity of the list.

To add elements in list indent the element four spaces or one tab, as shown in the following examples:

Example

# Ordered List
1. Milk
2. Tomato
    1kg only
3. Orange

# Unordered List

* Milk
* Tomato
    1kg only
* Orange

Try this code ❯

If you unable to adding elements in lists , double check that you've indented the elements in the list four spaces or one tab.

Blockquotes

You can add single or multiple blockquote element in a list while preserving the continuity of the list.

To add blockquote elements in list indent the element four spaces or one tab, as shown in the following examples:

Example

# Ordered List
1. Milk
2. Tomato
    > 1kg only
3. Orange

# Unordered List

* Milk
* Tomato
    > 1kg only
* Orange

Try this code ❯

Code Blocks

The Code blocks are normally indented four spaces or one tab. When code blocks are in a list, indent them eight spaces or two tabs.

Make sure you leave black line space before after code blocks, as shown in the following examples:

Example

# Ordered List
1. Milk
2. Tomato

        <p>1kg only</p>

3. Orange

# Unordered List

* Milk
* Tomato

        <p>1kg only</p>

* Orange

Try this code ❯

Adding Images in lists

The Image are normally indented four spaces or one tab.

See markdown images chapter for detail information about images.

Example

# Ordered List
1. Milk
2. Tomato

    ![tomato](tomato.png)

3. Orange

# Unordered List

* Milk

    ![milk](milk.png)

* Tomato

    ![tomato](tomato.png)

* Orange

Try this code ❯

Nested Lists

You can nest lists and nest an unordered list in an ordered list, or vice versa.

Example

# Ordered List

1. Groceries

    1. Tomato
    2. Orange

2. Dairy Products

    1. Milk
    2. Butter
    3. Gee

# Unordered List

* Groceries

    + Tomato
    + Orange

* Dairy Products

    + Milk
    + Butter
    + Gee

# Mixed Ordered List

1. Groceries

    * Tomato
    * Orange

2. Dairy Products

    * Milk
    * Butter
    * Gee

Try this code ❯

Definition Lists

There are some Markdown processors allow you to create definition lists of terms and their corresponding definitions.

To create a definition list, type the term on the first line. On the next line, type a colon followed by a space and the definition.

Syntax:

Description Term
: Description Details
: Description Details

Example

Apple
: A hard, round fruit with a smooth green, red or yellow skin

Banana
: A curved fruit with yellow skin that grows in hot countries

Manogo
: A tropical fruit that has a yellow and red skin and is yellow inside

Try this code ❯

If you markdown editor support HTML that use this:

Syntax:

<dl>
  <dt>Description Term</dt>
  <dd>Description Details</dd>
</dl>

Example

<dl>
  <dt>Apple</dt>
  <dd>A hard, round fruit with a smooth green, red or yellow skin</dd>
  <dt>Banana</dt>
  <dd>A curved fruit with yellow skin that grows in hot countries</dd>
  <dt>Manogo</dt>
  <dd>A tropical fruit that has a yellow and red skin and is yellow inside</dd>
</dl>

Try this code ❯