Monday, 4 August 2014

Html List

Html list are most commonly used in contents or articles. These are characterized as Unordered lists and ordered lists which work in a same way. Unordered lists proceeded by bullets and ordered lists by sequential lists, which are normally represented by incremental numbers, alphabets.

HTML Unordered Lists

Unordered list is represented by <ul> tag containing list items marked with bullets by typically small black circles by default as shown in code.


[html]<ul>
<li>apple</li>
<li>orange</li>
<li>tea</li>
</ul>[/html]

This will display as:

  • apple

  • orange

  • tea

HTML Ordered Lists


An Ordered list is represented by <ol> tag containing list of items starting with number one by default. The numbering is incremented by one at each successive ordered list element tag <li> instead of bullets.

[html]
<ol>
<li>milk</li>
<li>coffee</li>
<li>sugar</li>
</ol>
[/html]

This will display as:

  1. milk

  2. coffee

  3. sugar

Now showing both types of Lists in html page will give same above result.

[html]
<!DOCTYPE html>
<html>
<head>
<title>This web page contains both ordered and unordered list examples</title>
</head>
<body>
<h1>Unordered list examples</h1>
<ul>
<li>apple</li>
<li>orange</li>
<li>tea</li>
</ul>
<h2>Ordered list examples</h2>
<ol>
<li>milk</li>
<li>coffee</li>
<li>sugar</li>
</ol>
</body>
</html>
[/html]

HTML Unordered List Attributes


You can specify following unordered list type attributes for <ul> tag which is a disc by default:

[code]
<ul type="square">
<ul type="disc">
<ul type="circle">
[/code]


[html]
<ul type="square">
<li>apple</li>
<li>orange</li>
<li>tea</li>
</ul>
[/html]

Result:

  • apple

  • orange

  • tea


[html]
<ul type="circle">
<li>apple</li>
<li>orange</li>
<li>tea</li>
</ul>
[/html]

Result:

  • apple

  • orange

  • tea


[html]
<ul type="disc">
<li>apple</li>
<li>orange</li>
<li>tea</li>
</ul>
[/html]

Result:

  • apple

  • orange

  • tea

HTML Ordered Lists Attributes

You can specify following ordered list type attributes for <ol> tag which is a number by default.
<ol> contains the list of <li> tag ordered list preceded with numbers instead of bullets.

<ol type="1"> - Default-Case Numerals.
<ol type="i"> - Lower-Case Numerals.
<ol type="I"> - Upper-Case Numerals.
<ol type="a"> - Lower-Case Letters.
<ol type="A"> - Upper-Case Letters.

Examples of html ordered List types

type= "1"type= "I"type= "i"type= "a"type= "A"

  1. milk

  2. coffee

  3. tea


  1. milk

  2. coffee

  3. tea


  1. milk

  2. coffee

  3. tea


  1. milk

  2. coffee

  3. tea


  1. milk

  2. coffee

  3. tea


Here are the ordered list examples, to which you can add start attribute and customize the ordered list setting using any start number for the ordered list element.

[html]<h2>Cold Drinks</h2>
<ol>
<li>drink milk</li>
<li>drink coffee</li>
<li>drink juice</li>
</ol>[/html]

Cold Drinks

  1. cold milk

  2. cold coffee

  3. cold juice

HTML Numbered List with Start attribute - 3

[html]<h2>Cold Drinks</h2>
<ol start="3">
<li>cold milk</li>
<li>cold coffee</li>
<li>cold juice</li>
</ol>[/html]

Cold Drinks

  1. cold milk

  2. cold coffee

  3. cold juice

More about these start attributes in this video



HTML Description Lists


Description lists are list of names, terms, description by using tags elements <dl>, <dt>, <dd>.

<dl> tag from start defines list of elements containing a names, description elements.

<dt> tag element defines the title or definition of items.

<dd> tag is used for description for terms and names.

[html]
<dl>
<dt>Tiger</dt>
<dd>- king of jungle</dd>
<dt>Lemon juice</dt>
<dd>- citric acid, which gives a sour taste</dd>
</dl>
[/html]

Tiger
- king of jungle
Lemon juice
- citric acid, which gives a sour taste

0 comments:

Post a Comment