Online Test Banks
Score higher
See Online Test Banks
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

How to Define Lists in HTML Web Pages

Headings and paragraphs aren’t always enough. Sometimes you need lists on your pages, too. When deciding how to present your data, consider your options. If the text fits into short bullets, present it that way.

Bulleted lists work very well on the web where your audience will be looking for quick, easy-to-access information. Using numbered lists can also help your visitors get the point quickly. The code for lists — bulleted or numbered — is fairly simple. You can put the heading for a list in either a paragraph tag or in a heading tag, whichever suits the situation best.

In HTML (and writing and publishing), bulleted lists are referred to as “unordered lists” because they just list items in no order of importance (and use the <ul> tag). Numbered lists, comparatively, are “ordered lists” because order is important; they use the <ol> tag. Items in both kinds of lists, though, are defined by using the list <li> tag.

Take a look at the following example, which creates a simple, bulleted (unordered) list:

<p>My list of fruit</p>

In the preceding example, note that the paragraph tag is closed before the list tags begin. Note also that the <li> tag is used for each list item.

To turn this list into a numbered list, use <ol> (for ordered list) in place of the <ul> tag — and don’t forget to close it with the </ol> tag.

Sometimes a list has nested sub-items in it. The code to make that happen looks like this:

<p>My list of fruit</p>

In a browser (without defined styles), the list looks like the one in the following figure with bullet points and indents for sub-bullet points.


The sub-items in the apples item are part of a second unordered list. Notice how the sub-items list begins and is closed between the <li> and </li> of the apples list item. The browser displays them as indented items under apples in the main list.

blog comments powered by Disqus

Inside Sweepstakes

Win $500. Easy.