Table of Contents
3type lists style
1.Ordered HTML List.
2.Unordered HTML List.
3.Description HTML Lists (Other list).
1.Ordered HTML List.
HTML <li> Tag
In this tutorial, we will create a table of contents with an ordered list. In an ordered list the list items will be numbered.
We will be using the following tags:
Ordered list implementation tags
- Opening tag <ol>
- Closing tag </ol>
List item tags
- Opening tag <li>
- Closing tag </li>
The code below will provide a very basic table of contents with two list items. Firstly type the Table of contents in a standard font. You can alter this font at a later stage. Within the opening and closing tags for an ordered list, we will add each list item with the tag and close with the tag.
Ordered list
<ol>
<li>red</li>
<li>green</li>
<li>blue</li>
<li>white</li>
<li>yellow</li>
</ol>output:-
- red
- green
- blue
- white
- yellow
2.Unordered HTML List
HTML <ul> Tag
For each item in the ordered list, we will be adding a few submenu items with an unordered list. For example, The Links sub items will be input within the and tags after the links tag. See the output below for what will be displayed on a browser.
Unordered List
<ul>
<li>red</li>
<li>green</li>
<li>blue</li>
<li>white</li>
<li>yellow</li>
</ul>output:-
- red
- green
- blue
- white
- yellow
3.Description HTML Lists (Other list).
Displays elements in definition form like HTML description list or definition list dictionary.
<dl>, <dt> and <dd> Tags are used to define the description list.
<dl> the Tag defines the outline list, the
<dt> the Tag defines the term (name), and also the
<dd> the Tag describes every term:
Description List
<dl>
<dt>Black</dt>
<dd>- black color</dd>
<dt>yellow</dt>
<dd>- banana color</dd>
</dl>output:-
- Black
- – black color
- yellow
- – banana color
How to create orderlist
First, you <ol> tag open and close </ol> tags. Under tags, type <li> the tag and in it, you write the word of your order list and close </li> tag. If you want more information, I have given the example play below.
example:-
<ol>
<li>red</li>
<li>green</li>
<li>blue</li>
<li>white</li>
<li>yellow</li>
</ol>How to create unorderlist
If you want more information, I have given the example play below.
example:-
<ul>
<li>red</li>
<li>green</li>
<li>blue</li>
<li>white</li>
<li>yellow</li>
</ul>There are 5 ways to show up in the Ordered list
- type = “1” All list type 1 2 3 4 5 number format
- type = “A” All list type A B C D E uppercase letters format
- type = “a” All list type a b c d e lowercase letters format
- type = “I” All list type I II III IV V uppercase roman numbers format
- type = “i” All list type i ii iii iv v lowercase roman numbers format
1.Ordered list with number format
<ol type="1">
<li>red</li>
<li>green</li>
<li>blue</li>
<li>white</li>
<li>yellow</li>
</ol>- red
- green
- blue
- white
- yellow
2.Ordered list with uppercase letters format
<ol type="A">
<li>red</li>
<li>green</li>
<li>blue</li>
<li>white</li>
<li>yellow</li>
</ol>- red
- green
- blue
- white
- yellow
3.Ordered list with lowercase letters format
<ol type="a">
<li>red</li>
<li>green</li>
<li>blue</li>
<li>white</li>
<li>yellow</li>
</ol>- red
- green
- blue
- white
- yellow
4.Ordered list with uppercase roman numbers format
<ol type="I">
<li>red</li>
<li>green</li>
<li>blue</li>
<li>white</li>
<li>yellow</li>
</ol>- red
- green
- blue
- white
- yellow
5.Ordered list with lowercase roman numbers format
<ol type="i">
<li>red</li>
<li>green</li>
<li>blue</li>
<li>white</li>
<li>yellow</li>
</ol>- red
- green
- blue
- white
- yellow
