HTML Tutorial


Chapter 10 – HTML List – Ordered and Unordered List

Welcome to the chapter 10 of our HTML Tutorial series. In the last tutorial, we learnt about displaying Tables in HTML. In this tutorial, we shall go through the List in HTML.



What is an HTML List?

There are two types of list available in HTML documents:
1) Unordered List
2) Ordered List

Let’s go through these one by one…

HTML Image

1) Unordered List

Unordered List is a list where the list items are displayed in bullet points. The general syntax for unordered list is given below:

Syntax

<ul>
    <li>Orange</li>
    <li>Apple</li>
    <li>Guava</li>
</ul>
                            

The output of this HTML code will be as shown as below:

  • Orange
  • Apple
  • Guava

You can try running this code snippet on our Online HTML Editor to view the output.




2) Ordered List

Ordered List is a list where the list items are displayed in numeric order. The general syntax for ordered list is given below:

<ol>
    <li>Orange</li>
    <li>Apple</li>
    <li>Guava</li>
</ol>

    

The output of this HTML code will be as shown as below:

  1. Orange
  2. Apple
  3. Guava




List Item Formatting



1) List Style in Unordered List

You might have noticed that the unordered list contains the item markers as bullets by default. This can be changed using CSS style called “list-style-type”. An example of such style is shown below for reference.

<ul style="list-style-type:square;">
  <li>Banana</li>
  <li>Milk</li>
  <li>Sugar</li>
</ul>
                                
                            

The output of the above HTML code is shown below for reference

  • Banana
  • Milk
  • Sugar

This CSS style accept following values:

  1. disc (which is the default value),
  2. circle,
  3. square and
  4. none

2) List Style in Ordered List

Similarly, if you want to modify the list item markers in an Ordered list, you can use the type attribute as shown below:

<ol type="A">
  <li>Banana</li>
  <li>Milk</li>
  <li>Shake</li>
</ol>
                            

This Attribute accepts following values:

  • 1 (numbers)
  • A (letters in upper case)
  • a (letters in lower case)
  • I (Roman numbers in upper case)
  • i (Roman numbers in lower case)

I hope you liked reading this tutorial. Do share the tutorial among your friends.

See you in the next tutorial…

Follow Me on Social Media

Advertisement
FREE Sales CRM Software

Fully customizable CRM Software for Freelancers and Small Businesses

Signup for Free

Sign up for DigitalOcean Cloud

Get FREE $200 credits, deploy your hobby projects for Free

DigitalOcean Referral Badge
Sign up for Hostinger Cloud or VPS plans and get upto 20% Discount