Web Design Course – Part 6 – Understanding List Items

This article is totally based on the topic titled as “Understanding List Items”. As you know HTML is comprised of a lot of tags, therefore it needs a very careful decision while creating a website to use tags at the appropriate place. Web Designers and Developers must be very handy while picking a tag for specific section of website. For now, we’ve done with the study of HTML Text Elements, Different Types of Style Sheets, Basic and Advanced Web Design Layouts and a brief introduction to this HTML Course. In the previous articles, we’ve gone through a lot of tags and their usages. The same way you’ll be guided about List Items in HTML.

At first we need to understand what the List actually means in our real life scenarios. See the picture below.

List of Things OR To-Do List

In our daily life we came across list most often. Sometimes we need to create a list of things we need to buy, sometimes we need to create a task sheet to maintain the progress of any work, sometimes we need to write a billing dates for electricity or water in a listed table, these all needs to be maintained using a list of things, dates or any other detail.

In the same manner, we need to write things a listed pattern on website and thus HTML comes with List Item Tags. HTML provides us with the three different types of list items:

Ordered List

As the name suggests, this list item is created with each item in the list is numbered. Mostly, tasks or things that needs to be performed sequentially are listed in a numbered items. This also might be a set of steps for a cooking recipe that needs to be followed sequentially.


    1. Chop potatoes into quarters


    1. Simmer in salted water for 15-20 minutes until tender


    1. Heat milk, butter and nutmeg


    1. Drain potatoes and mash


    1. Mix in the milk mixture



Unordered List

It is consisted of items that are identified with only bullet points. These items don’t really need to be in an ordered manner. Mostly, tasks like To-Do List or Buying Item List are written as Unordered Items’ List. Order doesn’t matter in this case.


<li>1kg King Edward potatoes</li>
<li>100ml milk</li>
<li>50g salted butter</li>
<li>Freshly grated nutmeg</li>
<li>Salt and pepper to taste</li>


Definition List

It is basically a list of terms that needs to be defined on website. The layout consists of Term name and its Definition.


<dd>Sliced raw fish that is served with
condiments such as shredded daikon radish or
ginger root, wasabi and soy sauce</dd>
<dd>A device used to accurately measure the
weight of ingredients</dd>
<dd>A technique by which the scales are removed
from the skin of a fish</dd>
<dd>An Italian cheese usually made from whole
cow's milk (although it was traditionally made
from buffalo milk)</dd>





12 thoughts on “Web Design Course – Part 6 – Understanding List Items

  • Pingback: Web Design Course – Part 8 – Using Images In HTML

  • March 21, 2017 at 1:06 am

    This is a blog to watch for sure. I think you have a really awesome writing style by the way. Very easy to read. Your blog design is so clean too! Thank you all the hard work!

  • February 20, 2018 at 6:18 am

    Good information post for beginners, if you want Cheap web hosting plan for your website than buy from EdevHost because they are offer 24/7 support.

  • July 29, 2019 at 10:31 pm

    Howdy, i read your blog occasionally and i own a similar one and i was just curious if you get a lot of
    spam responses? If so how do you prevent it, any plugin or anything you can advise?
    I get so much lately it’s driving me mad so any support is very much appreciated.

  • December 9, 2019 at 11:04 pm

    Its like you read my mind! You seem to know so much about this, like you
    wrote the book in it or something. I think that
    you could do with a few pics to drive the message home a little bit, but instead
    of that, this is magnificent blog. An excellent read.
    I will definitely be back.

  • March 27, 2020 at 3:42 am

    Hey There. I found your blog using msn. This is an extremely well written article. I’ll be sure to bookmark it and come back to read more of your useful info. Thanks for the post. I’ll definitely return.


Leave a Reply

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