HTML Lists | list attributes

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.

<ol>
 <li>red</li>
 <li>green</li>
 <li>blue</li>
 <li>white</li>
 <li>yellow</li>
</ol>

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.

<ul>
 <li>red</li>
 <li>green</li>
 <li>blue</li>
 <li>white</li>
 <li>yellow</li>
</ul>

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:

<dl>
  <dt>Black</dt>
  <dd>- black color</dd>
  <dt>yellow</dt>
  <dd>- banana color</dd>
</dl>

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

1. type = “1” All list type 1 2 3 4 5 number format
2. type = “A” All list type A B C D E uppercase letters format
3. type = “a” All list type a b c d e lowercase letters format
4. type = “I” All list type I II III IV V uppercase roman numbers format
5. 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>

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>

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>

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>

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>