Lists in HTML

In this page all about the lists is described. 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 bydefault 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 are given


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 with sourse.

<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

Explaination 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 with sourse.

<ol>
  <li> (1450s) </li>
  <li> (1890s) </li>
  <li> (1950s) </li>
  <li> (1980s) </li>
</ol>

Output of above code

  1. (1450s)
  2. (1890s)
  3. (1950s)
  4. (1980s)

Explaination 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

  1. (1450s)
  2. (1890s)
  3. (1950s)
  4. (1980s)

Discription List with source code.

<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

Explaination 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.


add