C H A P T E R  9

Grouping Content

In this chapter, I describe the HTML elements that you can use to group related content together, which will add further structure and meaning to the content in your document. The elements in this chapter are largely flow elements. There is one exception: the a element, which has the distinction of its element category being determined by the content it contains. Table 9-1 provides the summary for this chapter.

Understanding the Need to Group Content

HTML requires browsers to collapse multiple whitespace characters into a single space. This is generally a useful feature, because it separates the layout of your HTML document from the layout of the content in the browser window. Listing 9-1 shows a longer block of content than I have used in examples so far.

The text in the body element spreads over multiple lines. Some of those lines are indented, and there are line breaks between groups of lines. The browser will ignore all of this structure and display all of the content as a single line, as shown in Figure 9-1.

Figure 9-1. The browser collapses whitespace in an HTML document

The elements in the sections that follow will help you add structure to a document by grouping together related regions of content. There are many different approaches to grouping content, from a simple paragraph to sophisticated lists.

Creating Paragraphs

The p element represents a paragraph. Paragraphs are blocks of text containing one or more related sentences that address a single point or idea. Paragraphs can also be comprised of sentences that address different points, but share some common theme. Table 9-2 summarizes the p element.

Listing 9-2 shows the application of the p element to the example content.

I've added a number of p elements to the body element to group related sentences together and give the content some structure. Multiple whitespace within a p element is still collapsed to a single character, as you can see in Figure 9-2.

Figure 9-2. The effect of the p element

Using the div Element

The div element doesn't have a specific meaning. You use it to create structure and give meaning to content when the other HTML elements are insufficient. You add this meaning by applying the global attributes (described in Chapter 3), typically the class or id attributes. Table 9-3 summarizes the div element.

The div element is the flow equivalent of the span element. It is an element that has no specific meaning, and can, therefore, be used to add customized structure to a document. The problem with creating custom structure is that the significance is specific to your web page or web application, and the meaning is not evident to others. This can be problematic when your HTML is being processed or styled by third parties. Listing 9-3 shows the div element in use.

In this example, I have shown a slightly different use for the div element, which is to group multiple elements of a different type together so that they can be styled consistently. I could have added a class attribute to both of the p elements contained within the div, but this approach can be simpler and relies on the way that styles are inherited (as described in Chapter 4).

Working with Preformatted Content

The pre element lets you change the way that the browser deals with content, so that whitespace is not collapsed and formatting is preserved. This can be useful when the original formatting of a section of content is significant. However, you should not use this element otherwise, since it undermines the flexibility that comes with using elements and styles to control presentation. Table 9-4 summarizes the pre element.

The pre element can be particularly useful when you use it with the code element. The formatting in programming languages, for example, is usually significant and you would not want to have to recreate that formatting using elements. Listing 9-4 shows the pre element in use.

In Listing 9-4, I have used the pre element with some JavaScript code. This code won't be executed because it is not in a script element, but the formatting of the code will be preserved. The browser won't do anything to reformat the content within the pre element, which means that the leading spaces or tabs for each line will be displayed in the browser window. This is why the individual statements in the pre element are not indented to match the structure of the HTML document. You can see how the browser displays the formatted content in Figure 9-3.

Figure 9-3. Displaying preformatted content with the pre element

Quoting from Other Sources

The blockquote element denotes a block of content that is quoted from another source. This element is similar in purpose to the q element described in Chapter 8, but is generally applied to larger amounts of quoted content. Table 9-5 summarizes the blockquote element.

The cite attribute can be used to supply a URL for the original source of the content, as shown in Listing 9-5.

You can see how the browser applies the style convention in Figure 9-4.

Figure 9-4. Using the blockquote element

Adding Thematic Breaks

The hr element represents a paragraph-level thematic break. This is another oddly specified term that arises from the need to separate semantics from presentation. In HTML4, the hr element represented a horizontal rule (literally a line across the page). In HTML5, the hr element represents a transition to a separate, but related, topic. The style convention in HTML5 is a line across the page. Table 9-6 summarizes the hr element.

The HTML5 specification is somewhat vague about what constitutes a valid use for the hr element, but two examples are given: a scene change in a story, or a transition to another topic within a section in a reference book. Listing 9-6 shows the hr element applied to content.

In this example, I have added some hr elements to a blockquote to add some structure. You can see how this affects the default appearance of the HTML in Figure 9-5.

Figure 9-5. Adding hr elements to a blockquote element

Grouping Content into Lists

HTML defines a number of elements that you can use to create lists of content items. As I describe in the following sections, you can create ordered, unordered, and descriptive lists.

The ol Element

The ol element denotes an ordered list. The items in the list are denoted using the li element, which is described in the following section. Table 9-7 summarizes the ol element.

Listing 9-7 shows the ol element being used to create a simple ordered list.

You can see how the browser displays this list in Figure 9-6.

Figure 9-6. A simple ordered list

You can control the way that the items in the list are managed using the attributes defined by the ol element. You use the start attribute to define the ordinal value of the first item in the list. If this attribute is not defined, the first item is assigned the ordinal value of 1. You use the type attribute to indicate which marker should be displayed next to each item. Table 9-8 shows the supported values for this attribute.

If the reversed attribute is defined, then the list is numbered in descending order. However, as I write this, none of the mainstream browsers implement the reversed attribute.

The ul Element

You use the ul element to denote unordered lists. As with the ol element, items in the ul element are denoted using the li element, which is described next. Table 9-9 summarizes the ul element.

The ul element contains a number of li items. The element doesn't define any attributes and you control the presentation of the list using CSS. You can see the ul element in use in Listing 9-8.

Each list item is displayed with a bullet. You can control which style bullet is used through the list-style-type CSS property, which is described in Chapter 24. You can see the default style convention (which uses the disc bullet style) in Figure 9-7.

Figure 9-7. The style convention applied to the ul element

The li Element

The li element denotes an item in a list. You can use it with the ul, ol, and menu elements (the menu element is not yet supported in the main stream browsers). Table 9-10 summarizes the li item.

The li item is very simple. It denotes a list item within its parent element. You can, however, use the value attribute to create nonconsecutive ordered lists, as shown in Listing 9-9.

When the browser encounters a li element with a value attribute, the counter for the list items is advanced to the attribute value. You can see this effect in Figure 9-8.

Figure 9-8. Creating nonconsecutive ordered lists

Creating Description Lists

A description list consists of a set of term/description groupings (i.e., a number of terms, each of which is accompanied by a definition of that term). You use three elements to define description lists: the dl, dt, and dd elements. These elements do not define attributes and have not changed in HTML5. Table 9-11 summarizes these elements.

You can see these elements used in Listing 9-10. Notice that multiple dd elements can be used for a single dt element, which allows you to provide multiple definitions for a single term.

Creating Custom Lists

The HTML support for lists is more flexible than it might appear. You can create complex arrangements of lists using the ul element, combined with two features of CSS: the counter feature and the :before selector. I describe the counter feature and the :before selector (and its companion, :after) in Chapter 17. I don't want to get too far into CSS in this chapter, so I present this example as a self-contained demonstration for you to come back to when you have read the CSS chapters later in this book, or when you have a pressing need for some advanced lists. Listing 9-11 shows a list that contains two nested lists. All three lists are numbered using custom values.

You can see how the browser displays the lists in Figure 9-9.

Figure 9-9. Custom lists using CSS features

There are a few things to note in the preceding example. All of the lists in this HTML document are unordered, and created using the ul element. This is so I can disable the standard bullet (using the list-style-type property) and rely on the content generated by the :before selector.

Notice also that the numbering of the outer list (the list of fruits) starts at 7 and goes up in steps of 2. This is something that you can't arrange using the standard ol element. The CSS counter feature is a little awkward to use, but is very flexible.

The final point to note is that the numbering of the inner lists (the varieties of mangoes and plums) is continuous. You could achieve a similar effect by using either the value attribute of the li element, or the start attribute of the ol element. However, both of those approaches require you to know how many list items you are working with in advance, which isn't always possible when working with web applications.

Dealing with Figures

The last of the grouping elements relates to figures. HTML5 defines figures as “a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document's meaning.” This is a fairly general definition and can be applied more widely than the traditional idea of a figure, which is some form of illustration or diagram. You define figures using the figure element, which is summarized in Table 9-12.

The figure element can optionally contain a figcaption element, which denotes a caption for the figure. Table 9-13 summarizes the figcaption element.

You can see the figure and figcaption elements used together in Listing 9-12.

In this example, I have used the figure element to create a figure around a code element. I have used the figcaption element to add a caption. Note that the figcaption element must be the first or last child of the figure element. You can see how the browser applies the style conventions for these elements in Figure 9-10.

Figure 9-10. Using the figure and figcaption elements

Summary

In this chapter, I have shown you the HTML elements that let you group related content together—be it in a paragraph, a lengthy quotation from another source, or a list of related items. The elements described in this chapter are endlessly useful and simple to use, although some of the more sophisticated list options can require some practice to perfect.