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.

SOURCE CODE:

    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

 

RESULT:

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.

SOURCE CODE:

<ul>
<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>
</ul>

RESULT:

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.

SOURCE CODE:

<dl>
<dt>Sashimi</dt>
<dd>Sliced raw fish that is served with
condiments such as shredded daikon radish or
ginger root, wasabi and soy sauce</dd>
<dt>Scale</dt>
<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>
<dt>Scamorze</dt>
<dt>Scamorzo</dt>
<dd>An Italian cheese usually made from whole
cow's milk (although it was traditionally made
from buffalo milk)</dd>
</dl>

RESULT:

 

 

 

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

Leave a Reply

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