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.
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:
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.
- Chop potatoes into quarters
- Simmer in salted water for 15-20 minutes until tender
- Heat milk, butter and nutmeg
- Drain potatoes and mash
- Mix in the milk mixture
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.
<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>
It is basically a list of terms that needs to be defined on website. The layout consists of Term name and its Definition.
<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>