- 4 years ago
- Shahzad Gujjar
- 3,192 Views
-
1
This tutorial will teach you how to make various types of lists in HTML.
Working with HTML Lists
HTML lists are used to present a well-formed and semantic list of data. In HTML, there are three different types of lists, each with its own purpose and meaning.
- Unordered list— To make a list of related items in no specific order,
- Ordered list— Creates a list of related items in a specified order.
- Description list— For making a list of terms and their descriptions.
Html, photos, ties, line breaks, and other elements may be used in a list object. To make a nested list, you can put an entire list within a list object.
All three forms of lists are covered one by one in the following sections:
HTML Unordered Lists
The <ul> element is used to create an unordered list, and each list item begins with the <li> element.
Bullets are used to mark list items in unordered lists. for example:
<ul>
<li>Chocolate Cake</li>
<li>Black Forest Cake</li>
<li>Pineapple Cake</li>
</ul>
The output of the preceding example will appear as follows:
- Chocolate Cake
- Black Forest Cake
- Pineapple Cake
The CSS list-style-type property can also be used to change the bullet type in your unordered list. The following style rule converts the default disc bullet to a square bullet:
ul {
list-style-type: square;
}
Please see the CSS lists tutorial for more information on styling HTML lists.
HTML Ordered Lists
The <ol> element is used to create an ordered list, and each list item begins with the <li> element. Where the order of the list’s items is important, ordered lists are used.
In an ordered list, the list items are labelled with numbers. For example:
<ol>
<li>Fasten your seatbelt</li>
<li>Starts the car's engine</li>
<li>Look around and go</li>
</ol>
The output of the preceding example will appear as follows:
- Fasten your seatbelt
- Starts the car’s engine
- Look around and go
In an ordered list, items normally start with 1. If you want to adjust that, however, you can use the start attribute, as shown in the example below:
<ol start="10">
<li>Mix ingredients</li>
<li>Bake in oven for an hour</li>
<li>Allow to stand for ten minutes</li>
</ol>
The output of the preceding example will appear as follows:
- Mix ingredients
- Bake in the oven for an hour
- Allow standing for ten minutes
You can adjust the numbering type in an ordered list with the CSS list-style-type property, just as you can with an unordered list. The marker form is changed to roman numbers using the following style rule.
ol {
list-style-type: upper-roman;
}
You may also modify the numbering type with the type attribute, such as type=”I”. However, instead of using this attribute, you can use the CSS list-style-type property.
HTML Description Lists
A list of items that each have a description or definition is called “description list”.
The <dl> element is used to create the definition list. The <dl> element is used in combination with the <dt> element to define a term and the <dd> element to specify the definition of that term.
In most browsers, the word lists are made by putting the words and meanings on separate lines, with the definitions of the terms indented slightly. For example:
<dl>
<dt>Bread</dt>
<dd>A baked food made of flour.</dd>
<dt>Coffee</dt>
<dd>A drink made from roasted coffee beans.</dd>
</dl>
The output of the previous example will appear as follows:
Bread
A baked food made of flour.
Coffee
A drink made from roasted coffee beans.
- 4 years ago
- Shahzad Gujjar
- 3,192 Views
-
1
