All list elements , the lists themselves and the items that go in them—are displayed as block elements by default, which means that they start on a new line and have some space above and below by default but that may be altered with CSS.The complete course of CSS is also given. For more stylish list visit our course of CSS. In this section, we’ll look at each list type in detail. Moreover Any list can be nested within another list; it just has to be placed within a list item.
Types of lists
Unordered Lists
Collections of items that appear in no particular order.
Ordered Lists
Lists in which the sequence of the items is important.
Description Lists
Lists that consist of name and value pairs, including but not limited to terms and definitions.
Unordered List
<ul>
<li> Serif </li>
<li> Sans-serif </li>
<li> Script </li>
<li> Display </li>
<li> Dingbats </li>
</ul>
Output of above code
- Serif
- Sans-serif
- Script
- Display
- Dingbats
Explanation of unordered list
As in the above given example the lists items are shown in not any specific order.This type of list is called an unordered list. You can make it more attractice while using css with.For example above list is used with css property ("list-style-type: disc") with black circles, you can use other properties like "square" etc;
Unordered list with square list style type
<ul style="list-style-type: square;">
<li> Serif </li>
<li> Sans-serif </li>
<li> Script </li>
<li> Display </li>
<li> Dingbats </li>
</ul>
Output of above code
- Serif
- Sans-serif
- Script
- Display
- Dingbats
Ordered List
<ol>
<li> (1450s) </li>
<li> (1890s) </li>
<li> (1950s) </li>
<li> (1980s) </li>
</ol>
Output of above code
- (1450s)
- (1890s)
- (1950s)
- (1980s)
Explanation of ordered list
As in the above given example the lists items are shown in in a specific order.This type of list is called an ordered list. You can make it more attractice while using css with.For example above list is used with css property ("list-style-type: decimal") with decimal numbers, you can use other properties like "upper-roman", "lower-alpha" etc;
Ordered list with list style type lower-alpha
<ol style="list-style-type: lower-alpha;">
<li> (1450s) </li>
<li> (1890s) </li>
<li> (1950s) </li>
<li> (1980s) </li>
</ol>
Output of above code
- (1450s)
- (1890s)
- (1950s)
- (1980s)
Discription List
<dl>
<dt>Linotype</dt>
<dd>
Line-casting allowed type to be selected, used, then recirculated
</dd>
<dt>Linotype</dt>
<dd>
Line-casting allowed type to be selected, used, then recirculated
</dd>
<dt>Linotype</dt>
<dd>
Line-casting allowed type to be selected, used, then recirculated
</dd>
<dl>
Output of above code
- Linotype
- Line-casting allowed type to be selected, used, then recirculated
- Linotype
- Line-casting allowed type to be selected, used, then recirculated
- Linotype
- Line-casting allowed type to be selected, used, then recirculated
Explanation of description list
Above example of description list with source code is given. In this example "dl" is used to make conjuction with "dt" tag. Basically "dt" represents the description term, which may be a product name any department name etc. An "dl" tag is used to describe or define the above given term name in between "dt" tag. For example we write KFUEIT in "dt" tag (name a Pakistan's university). Then in "dl" tag, there will be its description or defination. for "KFUEIT is a Pakistan's university."
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
