How to Use HTML Lists on Your Web Page

Using HTML lists is a great way to present information to readers on your Web pages. Lists make information on your Web page easy to parse. Here are some other reasons to use lists on your Web pages:

  • Lists are interesting to look at: Web pros are always telling people to use lots of white space to vary the appearance of their pages so they’re not just featureless blobs of text. Lists do this; they break up text.

  • Lists are easy to scan: People are more likely to scan text on the Web than to read it carefully.

  • Lists make the writer get to the point: When you write a list, you may end up editing a page of boring, monotonous text down to three or four points in a bulleted list, which greatly benefits your readers.

HTML and Web-page editing programs based on HTML (such as CoffeeCup) offer three kinds of lists, but only two are used much:

  • Bulleted lists: Bulleted lists are by far the most widely used kind of list on the Web. Bulleted lists are flexible and fun, and easy to read. You start a bulleted list with the <ul> tag, which stands for unordered list. You end it with the </ul> tag. Each list item is preceded with <li>, which stands for list item.

    List items don’t have to have an ending tag, though you can add one (it’s </li>). After your text, the browser expects to see either another <li> tag, for the next list item, or the </ul> tag to end the list.

    You can convert many long blocks of text into a bulleted list and make the text shorter, easier to read, and more interesting. If you have to move existing text to the Web, consider converting parts of it to bulleted lists as a quick way to make it more Web friendly.

  • Numbered lists: Numbered lists are very useful, but are found much less often on the Web. Numbered lists begin with <ol> for ordered list, end with </ol>, and, like bulleted lists, use the <li> tag to mark the beginning of each list item.

    Any time you have a list that has an order of importance, or a sequence in time make it a numbered list.

  • Definition lists: These lists give a term and then a definition for the term. They’re rarely used. A definition list starts with <dl> and ends with </dl>. Each term is preceded by <dt>, for definition term, and each definition is preceded by <dd>, for definition data.

    Use definition lists where you can, or use bold text and bulleted or numbered lists to create your own definition-type list.

  • Lists within lists: You can insert or nest one list inside another. The nested list can be the same kind of list, or a different kind, than the list that contains it.

    In the limited view offered on most users’ screens, users have a hard time keeping track of where they are in the overall list if you start throwing sublists at them as well.

blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.