How to Create Html Lists

There are 3 different types of lists.A tag starts an ordered list, for unordered lists, and for definition lists. Use the type attributes and begin to adjust their schedules accordingly.

• <ul> - unordered list; bullets
• <ol> - ordered list; numbers
• <dl> - definition list; dictionary

1.HTML Ordered Lists

Use the <ol> tag to start an ordered list. Place the <li> (list item) tag between your opening <ol> & closing </ol> tags to generate list items. Ordered basically means numbered, as the list below demonstrates.

Example:- HTML Code

1. <h4 align="center">Goals</h4>
2. <ol>
3. <li>Find a Job</li>
4. <li>Get Money</li>
5. <li>Move Out</li>
6. </ol>

 

Design Numbered list:

1. Find a Job
2. Get Money
3. Move Out

Nothing fancy here, start basically defines which number to start numbering with.

2.HTML Ordered Lists Continued

There are 4 other types of ordered lists. In lieu of generic numbers you can replace them with Roman numberals or letters, both capital & lower-case. Use the type attribute to change the numbering.

Example:- HTML Code

 

1. <ol type="a">
2. <ol type="A">
3. <ol type="i">
4. <ol type="I">

 

Design Ordered List Types:

Lower-Case

1. Find a Job
2. Get Money
3. Move Out

LettersUpper-Case

1. Find a Job
2. Get Money
3. Move Out

LettersLower-Case

1. Find a Job
2. Get Money
3. Move Out

NumeralsUpper-Case Numerals

1. Find a Job
2. Get Money
3. Move Out

3.HTML Unordered Lists

Create a bulleted list with the label. The bullet comes in four flavors: squares, discs, and circles. The bullet is displayed by default by most browsers is the traditional full disc.

Example:- HTML Code

<h4 align="center">Shopping List</h4>
<ul>
<li>Milk</li>
<li>Toilet Paper</li>
<li>Cereal</li>
<li>Bread</li>
</ul>

 

Design Unordered Lists:

• Milk
• Toilet Paper
• Cereal
• Bread

Here's a look at the other flavors of unordered lists may look like.

Example:- HTML Code

1. <ul type="square">
2. <ul type="disc">
3. <ul type="circle">

 

Design Unordered List Types:

type="square"

• Milk
• Toilet Paper
• Cereal
• Bread

type="disc"

• Milk
• Toilet Paper
• Cereal
• Bread

type="circle"

• Milk
• Toilet Paper
• Cereal
• Bread