Chapter 7 -- Creating Lists in HTML Chapter 7 Creating Lists in HTML CONTENTS How to Create Unordered Lists Tip Sheet How to Create Ordered Lists Tip Sheet How to Create Definition Lists Tip Sheet How to Create Lists within Lists Tip Sheet Everyone makes lists. Whether you use them for groceries, to-do items, or holiday gifts and cards, lists are an important part of your life. Lists are also important on the World Wide Web. The environment of the Web calls for information to be presented in a concise and timely manner. Lists are ideal vehicles for delivering all kinds of information on line. As an HTML author, you have many choices for how to create and present lists. In this chapter, we'll look at ways to create unordered lists, ordered (numbered) lists, and a special type of list known as a definition list. You'll also learn how to combine multiple levels of lists. How to Create Unordered Lists The simplest list in HTML is the unordered, or bulleted, list. This is ideal for listing items that have no particular hierarchy or order of importance. Unordered lists are very common on the Web and are used to convey items of note in a quick and concise manner. Web browsers usually place bullets or other markers in front of each item in an unordered list. Tip Sheet It's usually a good idea to preface your list with a short paragraph describing what the list contains. Unordered lists are ideal for creating lists of hyperlinks to other documents on the Web. For more information on how to create hyperlinks, turn back to Chapter 6 Figure 7.1 : Locate the part of your HTML document where you want to insert a list. Begin the unordered list by typing <UL>, and then press Enter. The <UL> tag tells the Web browser to treat this section of text as an unordered list. Unordered lists will usually be indented from the main document and list items will be formatted with bullets. The size and type of bullets used are determined by the Web browser. Figure 7.2 : Create a heading for your list. This is an optional brief description of what your list contains. To create a list header, type <LH>, followed by a brief summary of the list contents. Then type </LH> to close the list heading tag. For example, to create a list heading for a grocery list, you would type <LH>My Grocery List</LH>. Figure 7.3 : To create the first item in your list, type <LI>. Then type the text of the item itself. <LI> is an open tag, which means that you do not need to type </LI> at the end of each item. Figure 7.4 : Continue typing <LI> followed by text for each item in your list. Press Enter after each item. Finish the unordered list by typing </UL>. Figure 7.5 : How to Create Ordered Lists Sometimes you need to list items in a specific order. Examples of this type of list include step-by-step instructions and "Top 10" lists. HTML provides a way to do this through ordered lists. Web browsers will place a number in front of each item, increasing the number by one for each entry down the list. Tip Sheet Netscape provides many extensions to ordered lists. To learn more about these extensions, refer to Chapter 13, "Using the Netscape Extensions." You can apply basic character formatting to list elements and headers. For example, to make your list heading stand out more from the list elements, you can format it in boldface by typing <LH><B>My List</B></LH>. Figure 7.6 : To create an ordered list, locate the place in your document where you'd like to begin the list and type <OL>. Figure 7.7 : To create an optional heading for the ordered list, type <LH> followed by the heading. Then close the heading tag by typing </LH>. Figure 7.8 : To enter the first item of your list, type <LI> followed by the item. There is no need to include a closing </LI> tag. Figure 7.9 : Type </OL> to close the ordered list. Figure 7.10 : How to Create Definition Lists Definition lists are different from other lists in HTML, because each item in a definition list contains two parts: a term and a definition. Definition lists are typically used for glossaries and dictionaries. With a little creativity, however, they can be put to use in many different ways, such as product catalogs and even poetry. Tip Sheet Definition lists are extremely flexible. The information contained in a <DD> tag is not limited to simple text. You can include images, tables, and full character formatting in your definitions. You do not have to create a definition for every term, or vice versa. Figure 7.11 : To create a definition list in your HTML document, type <DL> at the point where you'd like the list to begin. Figure 7.12 : As mentioned earlier, definition lists are slightly different from ordered and unordered lists. Each item in a definition list is made up of two separate parts: the term and the definition. Typically, browsers will display the term on one line and the definition indented on the next line. Figure 7.13 : To create a definition term, type <DT> followed by text describing the element being defined. For example, to begin a definition of the word apple, you would type <DT>Apple. Figure 7.14 : To create the definition, type <DD>, followed by the text of the definition. For example, to create a definition for the term in the previous step, you would type <DD>a firm, edible, rounded fruit. Figure 7.15 : As with ordered and unordered lists, there are no closing tags for list items. Therefore, it is not necessary to type </DT> or </DD> at the end of your terms and definitions. Type </DL> to close your definition list. Figure 7.16 : How to Create Lists within Lists In the beginning of this chapter, we learned that lists are extremely flexible and powerful tools in HTML. Sometimes you'll want to create lists within lists, especially when you need to create a hierarchy of items, such as in outlines or detailed instructions. Creating lists within lists is easy in HTML. Tip Sheet It helps to keep your lists and list items indented in Notepad. Even though Web browsers will ignore the extra spaces, keeping everything organized this way will help you keep a handle on your HTML code. You can nest lists as many levels deep as you like. However, it's good practice to limit your nesting to three levels or less in order to make sure that the lists stay within the visible area of the reader's Web browser. Figure 7.17 : Begin the first list by typing <OL>. In this example, we're assuming that the first list is an ordered list, but in reality, it can be any type of list you want. Figure 7.18 : Enter your list items one by one, beginning each item with <LI>. Figure 7.19 : When you reach a step that requires a nested list, begin another list. The Web browser will automatically format this new list to fall underneath the current item in the first list. For example, to create a nested list under Step 2 in your original list, just type <UL>. Figure 7.20 : Start entering items in your new list. When you're finished, close the new list by typing </UL>. You must close the new list before continuing to enter items in the original list. Figure 7.21 : Enter the remaining items in the original list. Then press Enter and type </OL> when you're finished. Figure 7.22 :