Universal HTML: Lists

When structuring HTML documents lists play a major role. Mainly lists used in HTML documents can be divided into two, namely ordered list and unordered lists. Ordered list refers to list where a number or a letter is used to order a list and unordered list refers to lists where a bullet is used to order a list.

<ul></ul> used as the element to create an unordered list and <ol></ol> is used to create ordered lists. Whether it is an ordered list or an unordered list to include list items <li><li> element is used.

Creating an ordered list

An ordered list is below. We use numbers to ordered lists.

1.First item

2.Second item

3.Third item

<html>
<head>
<title>Ordered list</title>
</head>
<body>

<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
</body>
</html>

With ordered list “type “attribute can be used to set the number format. Possible values are “1”, “a”, “A”, “i”, and “I”.

Eg: <ol type=”A”>

Creating an Unordered List.

In unordered list there is no order. We use Bullets in unordered lists.Type attribute is also used with unordered lists. Possible values for this attribute are “circle”, “square” and “disc”.
Eg: <ul type="circle">

<html>

<head>
<title>Unordered list</title>
</head>
<body>

<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
</body>
</html>

Nested lists

List can be nested whether they are ordered lists or unordered lists. When nesting the new list, it should contain within a <li> element.

Eg:

<html>
<head>
<title>Nested Lists</title>
</head>
<body>
<ul type="disc">
<li>First Item</li>
<ul type="square">
<li>First Sub Item</li>
<li>Second Sub Item</li>
</ul>
<li>Second Item</li>
</ul>
</body>
</html>

Definition Lists

Definition lists are useful when having to list down a long list of definitions. Thought the structure of definition lists are similar to ordered and unordered lists, the elements used are different. Here <dl> is used to notify the presence of a definition list. The definition term is given by <dt> and the definition (or description) is given by <dd>.

<html>
<head>
<title> Definition Lists </title>
</head>
<body>
<dl>
<dt> Internet Explorer
<dt>
  <dd> A Microsoft product comes with Windows OSs</dd>
<dt> Mozilla Firefox </dt>
<dd>Freeware by Mozilla Foundation</dd>
<dt>Google Chrome</dt>
<dd>A freeware by Google inc.</dd>
</dl>
</body>
</html>

Lists

Creating an ordered list

Creating an Unordered List.

Nested lists

Definition Lists

No comments:

Post a Comment