Web Design - Web Authoring / Intro to HTML: Formatting Text
Sections:  Introduction  |  Section 1  |  Section 2  |  Section 3
Section Two:  Part A  |  Part B  |  Part C  |  Part D  |  Part E  |  Part F  |  Part G  |  Part H  |  Part I

Ordered and Unordered Lists - Continued

Ordered Lists and Unordered Lists

Ordered lists are lists where the items listed are presented sequentially (1, 2, 3, 4, …). Instructions and directions are often listed using ordered lists.

Unordered lists are lists where the items listed are presented in no specific order of importance. All the items are equally important. Viewer options/choices are often listed in unordered lists.

The HTML tags for ordered lists and unordered lists are similar, but not the same. For instance:.

  • The tags used to create an ordered list are <ol></ol>, where ‘ol’ stands for ordered list.
  • The tags used to create an unordered list are <ul></ul>, where ‘ul’ stands for unordered list.

Using the above tags, you can create a list. In truth, adding the above tags to your HTML page simply says that you are going to create one type of list or the other. Nothing is displayed on your web page until you add list items to your list/lists.

Creating List Items Using <li></li>

Both ordered lists and unordered lists have something in common – they both include list items. A list item in an ordered list may be a step in a set of instructions whereas a list item in an unordered list may be a choice or a selection option.

To add a list item to your ordered list or unordered list, you must include the <li></li> tags – which stand for ‘list item’. The <li></li> tags go around the text that you want to be the list item. The <li></li> tags are placed between the <ol></ol> tags or between the <ul></ul> tags.

Let's See it in Action icon. Let’s See it in Action: Ordered Lists, Unordered Lists, and List Items

header tags

In the image above, you see an ordered list that provides instructions for opening Notepad and an unordered list that lists, in no particular order, cool vintage muscle cars.

presentation Watch the video below to see how to add ordered lists and unordered lists, with accompanying list items, to your web page.

NextNext

© All rights reserved.