Using Notepad to Format Your Web Page
How to Create a Web Page with Google Page Creator
How to Create an Uncategorized Article in Joomla

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>
<ul>
   <li>apples</li>
   <li>bananas</li>
   <li>oranges</li>
</ul>

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>
<ul>
   <li>apples
   <ul><li>red</li>
      <li>green</li>
      <li>yellow</li>
   </ul>
   </li>
   <li>bananas</li>
   <li>oranges</li>
</ul>

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.

image0.jpg

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
How to Publish an Uncategorized Article in Joomla CMS
How to Change an Article Title in Joomla CMS
How to Use the CoffeeCup HTML Editor
How to Create HTML Lists in Notepad
How to Register for a Google Account
Advertisement

Inside Dummies.com