Scenario.

In this example, you'll learn how to use the HTML list elements, and attributes in simple beginners steps. Hope your cerebrums catches up this easily.

Ordered List | <ol>.

The ordered list element <ol> is used to define a list, using numbers or letters. The opening and the closing <ol> tags will contain an opening, and closing <li> tags. And the <li> tags will contain what will be listed.

See <ol> Default List illustration below.

<ol>
<li>List numbered</li>
<li>List numbered</li>
<li>List numbered</li>
</ol>

In Browser Display

<ol> List Types And Values.

The ordered list element <ol> uses the TYPE attribute, this can contain any of the following values: [1 | a | A | i| I |]. The value used herein will determine the type of list to be displayed.

Placing the TYPE attribute in the <ol> tag, your defined value will affect the whole <li> tags within.

Whereby, the TYPE attribute is unused. The list will display the default value which will be listed in numbers.

See <ol> Default List illustration above, and compare it with the <ol type> Illustration below.

<ol type="a">
<li>List Type Alpha</li>
<li>List Type Alpha</li>
<li>List Type Alpha</li>
</ol>	

In Browser Display

<ol> Start Attribute.

The second attribute you can attached to the TYPE attribute is START. With this attribute, you can determine, with what number the TYPE value should start listing.

See illustration below.

<ol type="1" start="4">
<li>List Start Alpha</li>
<li>List Start Alpha</li>
<li>List Start Alpha</li>
</ol>

In Browser Display

Unordered List. | <ul>

The unordered list element <ul> is used to define bullet list. The opening and the closing <ul> tags will contain an opening, and closing <li> tags. And the<li> tags will contain what will be listed.

See <ul> Default List illustration below.

<ul>
<li>Default list symbol "disc"</li>
</ul>

In Browser Display

<ul> List Types And Values.

The unordered list element <ul> uses the TYPE attribute, this can contain any of the following values: [disc | square | circle ]. The value used here will determine the type of list to be displayed.

Whereby, the TYPE attribute, and its value are unused. The list will display the default value which be the "disc" bullet listing.

See <ul> Default List illustration above, and compare it with the <ul type> Illustration below.

<ul type="square">
<li>List symbol "square"</li>
</ul>

In Browser Display

<li> List Type [Not preferred].

The TYPE attribute can also be placed directly inside the <li> tag of the <ul> elements. And value within will affect specifically only the <li> tag it's used for. [Not preferred]

See illustration below.

<ul>
<li type="disc">List symbol "disc"</li>
<li type="square">List symbol"square"</li>
<li type="circle">List symbol "circle"</li>
</ul>

In Browser Display

Using the same method for the <ol> tag will result in that the value used gets handled sequentially, listing both alpha and numbers according to their positions.

See illustration below.

<ol>
<li type="1">List Type Numbered</li>
<li type="a">List Type Alpha</li>
<li type="1">List Type Numbered</li>
<li type="a">List Type Alpha</li>
</ol>

In Browser Display

What's been taught here, works in all major browsers. However, in order to obtain the true browser and W3C friendly results, we solemnly recommend using CSS to format list types.