Section 5.0. Introduction

5.0. Introduction

From a wife handing a husband a grocery list as he steps out the door to a music channel presenting their top 100 worst songs of all time, lists help people stay focused and organized. In web design, it's the same case: HTML lists facilitate the presentation of organized content to our site's visitors by grouping key elements together.

HTML lists are appealing in part because of the way they appear on the page. List items typically are indented and keyed off by a marker, usually by a filled circle for an unordered list or numbers for an ordered list (see Figure 5-1). With a few lines of HTML, a web coder can create a bulleted list on a web page without opening an image editor. With CSS, you can create even more visually compelling lists.

Figure 5-1. The default rendering of a list

Web developers can tailor the presentation of the list to complement the design of a web page instead of relying on the browsers' default styling. This chapter illustrates how to change the numbering of list items, use your own image for a list marker, create a hanging indent that doesn't use a list marker, and more.