List is one of the most useful HTML element as you can express content easily with bulleted lists. Instead of writing lengthy content, it makes sense to write bullet lists or use tables to fir long content in a smaller space. In this HTML list tutorial, we will explain how to create and use lists on your webpage.
Listless Content
Assume you want to display your resume on your webpage listing all your skills, how would you create your page? The HTML source code of your page will look something like below:
<H1>My resume</H1>
<HR>
Hi,<BR>
I am an extremely enthusiastic and energetic person and am an expert in the following - <P>
Cutting apples<BR>
Making paper aeroplanes<BR>
Turning chairs upside down<BR>
Walking backwards<BR>
Folding newspapers<P>
Please consider me for any vacancy that you deem fit.<P>
Sincerely yours, <BR>
I M Dumb.
And the page looks like this:
HTML Lists
Most of the time it is necessary to list down all your items in a webpage and it is no more a difficult task with HTML list tags. For example, in the above example you can display all your skills with bulleted list using list tag. You can create three types of lists in HTML.
- <UL> – Unordered or Unnumbered list
- <OL> – Ordered or Numbered list
- <DL> – Definition or description list
Each item in the list is to be separated with <LI>
Item</LI>
tags. We will discuss each of these lists in the following section with examples.
Unordered or Unnumbered Lists
Let us look at a simple HTML list structure and understand each element.
<H1>My resume</H1>
<HR>
Hi,<BR>
I am an extremely enthusiastic and energetic person and am an expert in the following - <P>
<UL>
<LI>Cutting apples</LI>
<LI>Making paper aeroplanes</LI>
<LI>Turning chairs upside down</LI>
<LI>Walking backwards</LI>
<LI>Folding newspapers</LI>
</UL>
Please consider me for any vacancy that you deem fit.<P>
Sincerely yours, <BR>
I M Dumb.
So how does that look?
<UL> List Attributes
The default style of the bullet is a disc style, but you can customize it by using the “type” attribute like <UL type=”circle”>. The acceptable values of the “type” attribute are “square”, “disc” and “circle”.
Ordered or Numbered lists
Suppose you want to have some kind of numbers in the list as below?
- Cutting apples
- Making paper aeroplanes
- Turning chairs upside down
- Walking backwards
- Folding newspapers
Ordered list <OL> tag is used to create a numbered list in HTML and you can replace the <UL>…</UL> tags with <OL>…</OL> tags to create a numbered list.
<OL>
<LI>Cutting apples</LI>
<LI>Making paper aeroplanes</LI>
<LI>Turning chairs upside down</LI>
<LI>Walking backwards</LI>
<LI>Folding newspapers</LI>
</OL>
<OL> List Attributes
By default numbers 1, 2, 3… are used in an ordered list, what if you want to use small Roman numerals or alphabets instead of numbers? Simple! Similar to <UL> tag, <OL> tag can also have an attribute called “type” to customize the numbers. The value of “type” attribute can be “I”, ”i”, ”A” or “a” and the syntax is:
<OL type=”I”>…….</OL>
Below is the table showing various values of the “type” attribute for an ordered list:
Definition or Description Lists
This list has a series of terms and their definitions. The definition is usually displayed on a new line with indentation. See the below example to know how it works:
Both ordered and unordered lists can be used with definition list. In the above example, the first list item is used with ordered list and the second item is used with unordered list. The code for the example is given below.
<DL>
<DT>Optimist
<DD><ul><li>A person who thinks a gloomy rainy day is a good chance to show off his umbrella</li></ul>
<DT>Pessimist
<DD><ul><li>A person who sees the sun shining brightly and thinks how hot and uncomfortable it is</li></ul>
</DL>
A definition list contains two more tags in addition to tag.
- <DT> – This is the Term
- <DD> – This is the Term Definition
Nested Lists
All three HTML list tags <UL>, <OL> and <DL> can be used in a nested manner according to your requirement. Below is an example of nesting two ordered and unordered lists:
<UL>
<LI>Cutting apples</LI>
<LI>Making paper aeroplanes</LI>
<UL>
<LI>Turning chairs upside down</LI>
<LI>Walking backwards</LI>
</UL>
<LI>Folding newspapers</LI>
</UL>
And the result on the browser should be like below:
- Cutting apples
- Making paper aeroplanes
- Turning chairs upside down
- Walking backwards
- Folding newspaper
Complete HTML Tutorial (Index)
- Chapter 1: Creating a Simple Webpage
- Chapter 2: Using Formatting Tags
- Chapter 3: Creating Listed Content
- Chapter 4: Creating and Customizing Tables
- Chapter 5: Linking Text
- Chapter 6: Email Links
- Chapter 7: Image Maps
- Chapter 8: Using Images in HTML
- Chapter 9 : Creating HTML Forms
- Chapter 10: HTML Frames
- Chapter 11: Embedding Media in HTML5
- Chapter 12: HTML5 Tag Reference
Leave a Reply
Your email is safe with us.