HTML5 24-Hour Trainer

Chapter 13. Inserting Unordered Lists

Lists are a common text element on the Web, often used to break up the page and highlight key points. When the list items do not need to be in any particular order, an unordered list is used. Though the term may not be familiar to you, you'll probably recognize its offline equivalent, the bulleted list.

In this lesson, you learn how to code simple unordered lists, as well as the more complex variation, nested unordered lists. You also see how to style the list to modify font, size, and color as well as the type of bullet used.

WORKING WITH BULLETED ITEMS

In HTML, an unordered list is composed of two tags: <ul> and <li>. The <ul> tag is the outermost structure that declares the unordered list. Within the <ul> tag, a series of <li> tags creates the items in the list. Here's a short example of the HTML code for an unordered list:

<ul>
  <li>Tomatoes/li>
  <li>Onion/li>
  <li>Garlic/li>
</ul>

When rendered in a browser, an unordered list like the preceding example displays each item with a leading bullet, as shown in Figure 13-1.

Figure 13-1. FIGURE 13-1

The <li> tag can contain any amount of text, from a single word to multiple sentences.

Note

Because <li> tags are considered block elements, they are to be used in place of <p> tags and not combined with them. In other words, it is wrong to write code like this:

<li><p>Listed paragraphs are not pretty.</p></li>