HTML listsAs a beginning web designer, you’ll want all your pages to follow certain content rules. This will make it easier for users to read your copy. Creating HTML lists can help you easily do this.

And, you can make a list without interfering with other areas of your web page.

Here are two examples for creating HTML lists to help you maintain order and neatness when you build your web page.

How to Create HTML Lists – Make Lists in Your Website for Attention

1. Ordered List

An ordered list is a list of items, tips, instructions, etc. that need to go in a certain order.

HTML ordered lists are numbered with: 1,2,3,4 – and so on.

You can use ordered lists in beginner web site design when offering tips on how to do something or detailed instructions (such as 5 steps to fix a flat tire).

You can also use an ordered list to give:

  1. driving directions
  2. cooking instructions

or any other type of instructional list.

Using an HTML numbers list simplifies the instructional process and breaks up the steps into small bites for the reader.

The two code tags for an ordered list are as follows (without quotes):

“<ol>” and “<li>”

The “<ol>” tag is used at the top and bottom of the list with the closing tag being “</ol>”.

The “<li>” and closing “</li>” tags will be placed before and after each ordered item.

Example:

  1. Item one
  2. Item two
  3. Item three, etc.

2. Unordered HTML Lists

An unordered HTML list works similarly to the ordered list, except it uses bullets or other list identifiers beside each word on the list.

Unordered lists don’t have to be in any specific order.

Examples include:

  1. shopping lists
  2. a list of supplies
  3. a list of colors
  4. a list of auto parts
  5. a list of products, etc.

The bullets can be squares, circles or discs, but other fancy bullets can be inserted with some HTML design programs.

An unordered HTML list can be created with the following tag:

“<ul>” with the closing tag being “</ul>”.

The same instructions apply as above with the ordered list, using the “<li>” opening and closing tags with each line.

Place the phrase type=”square” inside the “<ul> tag to designate a specific type of bullet.

Substitute the word square with the word circle or disc to change the bullet type. It will look like this:

“<ul type=”square”>”

Example:

  • Item one
  • Item two
  • Item Three, etc.

Take Your Internet Pages to the Professional Level

Using ordered and unordered HTML lists can dramatically improve the look and feel of your Web page. Bullets and lists are commonly used in printed sales copy and on the Web.

They break up the text into easy-to-read sections and cater to those readers who like to scan a page quickly to get to the point! HTML lists can also help boost your sales and reach those Web users who are always in a hurry!

how to create html listsIf you’re new to web design and HTML lists, take a quick look at the complete beginner web design training course.

You’ll become familiar with HTML list tags and other learning tools you need to make a spectacular Web page! Go here to see course materials ..

Filed under: Web Design