Home Snippets Projects Donate

Get Snippets For:

   Java    HTML/CSS JavaScript

Ordered and Unordered Lists

Code Description:

Lists are ways to display data sequentially. Lists are able to be either ordered or unordered. Ordered lists can be ordered with numbers, letters, or roman numerals. Ordered lists can also use reversed numbering. Unordered lists allow for bullet points which can appear as squared, circles, traditional discs, or nothing at all. Both List types can be nested.

Ordered Lists use the <ol> tag to declare the element while Unordered Lists use the <ul> tag. Each List Element in the List is defined using the <li> tag.

Ordered List (Numeric) Syntax:

<ol>
   <li>List Item 1</li>
   <li>List Item 2</li>
   <li>List Item 3</li>
</ol>
  1. List Item 1
  2. List Item 2
  3. List Item 3

Ordered List (Numeric Reversed) Syntax:

<ol reversed>
   <li>List Item 1</li>
   <li>List Item 2</li>
   <li>List Item 3</li>
</ol>
  1. List Item 1
  2. List Item 2
  3. List Item 3

Ordered List (Capital Roman Numerals) Syntax:

<ol type="I">
   <li>List Item 1</li>
   <li>List Item 2</li>
   <li>List Item 3</li>
</ol>
  1. List Item 1
  2. List Item 2
  3. List Item 3

Ordered List (Lowercase Roman Numerals) Syntax:

<ol type="i">
   <li>List Item 1</li>
   <li>List Item 2</li>
   <li>List Item 3</li>
</ol>
  1. List Item 1
  2. List Item 2
  3. List Item 3

Ordered List (Capital Letters) Syntax:

<ol type="A">
   <li>List Item 1</li>
   <li>List Item 2</li>
   <li>List Item 3</li>
</ol>
  1. List Item 1
  2. List Item 2
  3. List Item 3

Ordered List (Lowercase Letters) Syntax:

<ol type="a">
   <li>List Item 1</li>
   <li>List Item 2</li>
   <li>List Item 3</li>
</ol>
  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered List Syntax:

<ul>
   <li>List Item 1</li>
   <li>List Item 2</li>
   <li>List Item 3</li>
</ul>

Unordered List (Square Bullets) Syntax:

<ul style="list-style-type: square;">
   <li>List Item 1</li>
   <li>List Item 2</li>
   <li>List Item 3</li>
</ul>

Unordered List (Circle Bullets) Syntax:

<ul style="list-style-type: circle;">
   <li>List Item 1</li>
   <li>List Item 2</li>
   <li>List Item 3</li>
</ul>

Unordered List (No Bullets) Syntax:

<ul style="list-style-type: none;">
   <li>List Item 1</li>
   <li>List Item 2</li>
   <li>List Item 3</li>
</ul>

Runnable List Example Code:

<!DOCTYPE html>
<html>
    <head>
        <title>List Example</title>
    </head>
 
    <body>
        <ol>
           <li>List Item 1</li>
           <li>List Item 1</li>
           <li>List Item 1</li>
        </ol>
    </body>
</html>

How to Run This Code:

Simply paste this code into a plain text file with the ".html" extension and save it. You will then be able to open it in the web browser of your choice.

Related Links: