Hour 5. Working with Text Blocks and Lists

In the early days of the Web, text was displayed in only one font and in one size. However, a combination of HTML and CSS now makes it possible to control the appearance of text and how it is aligned and displayed on a web page. This hour will show you the basics of text alignment and will guide you through some advanced text tips and tricks, such as the use of lists. Because lists are so common, HTML provides tags that automatically indent text and add numbers, bullets, or other symbols in front of each listed item. You’ll learn how to format different types of lists, which are part of the many ways to display content in your web site.

Aligning Text on a Page

It’s easy to take for granted the fact that most paragraphs are automatically aligned to the left when you’re reading information on the Web. However, there certainly are situations in which you might choose to align content to the right or even the center of a page. HTML gives you the option to align a single HTML block-level element, such as text contained within a <p></p> or <div></div> tag pair. Before we get into the details of aligning block elements, however, let’s briefly note how attributes work.

Using Attributes

Attributes are used to provide additional information related to an HTML tag. Attributes are special code words used inside an HTML tag to control exactly what the tag does. They are very important in even the simplest bit of web content, so it’s important that you are comfortable using them.

Attributes invoke the use of styles, classes, or IDs that are applied to particular tags. If you define a particular class or ID in a style sheet—as you learned in Hour 4—then you can invoke that class or ID using class="someclass" or id="someid" within the tag itself. When the browser renders the content for display, it will look to the style sheet to determine exactly how the content will appear according to the associated style definitions. Similarly, you can use the style attribute to include style information for a particular element without connecting the element to an actual style sheet. For example, when you begin a paragraph with the <p> tag, you can specify whether the text in that particular paragraph should be aligned to the left margin, the right margin, or to the center of the page by setting the style attribute. If you want to associate that particular paragraph with an existing class or ID, you set the class or id attribute.

In the following example, each paragraph could be left-aligned:

In the first paragraph, the style appears directly in the style attribute. In the second paragraph, the paragraph will be left-aligned if the style sheet entry for the leftAlignStyle class includes the text-align statement. Similarly, the third paragraph will be left-aligned if the style sheet entry for the firstLeftAlign class includes the text-align statement.

In the previous example and in examples shown in previous hours, you might have noticed the use of lowercase for tags, attributes, and styles. The exacting XHTML standard requires tags and attributes to be lowercase; the XHTML standard also requires quotation marks around attribute values.

For example, the following code will be rendered by most popular web browsers:

However, this code does not conform to XHTML standards because the tag is uppercased, the style attribute and its value (text-align:center) is uppercased, and the value isn’t in quotation marks. If you want to stay compatible with the latest standards and software, you should always use the following instead:

Aligning Block-Level Elements

To align a block-level element such as <p> to the right margin without creating a separate class or ID in a style sheet, simply place style="text-align:right" inside the <p> tag at the beginning of the paragraph. Similarly, to center the element, use <p style="text-align:center">. To align a paragraph to the left, use <p style="text-align:left">.

The text-align part of the style attribute is referred to as a style rule, which means that it is setting a particular style aspect of an HTML element. There are many style rules you can use to carefully control the formatting of web content.

The text-align style rule is not reserved for just the <p> tag. In fact, you can use the text-align style rule with any block-level element, which includes <h1>, <h2>, the other heading tags, and the <div> tag, among others. The <div> tag is especially handy because it can encompass other block-level elements and thus allow you to control the alignment of large portions of your web content all at once. The div in the <div> tag is for division.

Listing 5.1 demonstrates the style attribute and text-align style rule with both the <p> and the <div> tags. The results are shown in Figure 5.1. You’ll learn many more advanced uses of the <div> tag in Part III.

Listing 5.1 The text-align Style Rule Used with the style Attribute

Figure 5.1 The results of using the text alignment in Listing 5.1.

The use of <div style="text-align:center"> ensures that the content area, including the two headings, are centered. However, the text alignment of the individual paragraphs within the <div> override the setting and ensure that the text of the first paragraph is left-aligned, the second paragraph is centered, and the third paragraph is right-aligned.

The Three Types of HTML Lists

For clarity, it’s often useful to present information on a web page as a list of items. There are three basic types of HTML lists. All three are shown in Figure 5.2, and Listing 5.2 reveals the HTML used to construct them:

• Ordered list—An indented list that has numbers or letters before each list item. The ordered list begins with the <ol> tag and ends with a closing </ol> tag. List items are enclosed in the <li></li> tag pair and line breaks appear automatically at each opening <li> tag. The entire list is indented.

• Unordered list—An indented list that has a bullet or other symbol before each list item. The unordered list begins with the <ul> tag and closes with </ul>. Like the ordered list, its list items are enclosed in the <li></li> tag pair. A line break and symbol appear at each opening <li> tag and the entire list is indented.

• Definition list—A list of terms and their meanings. This type of list, which has no special number, letter, or symbol before each item, begins with <dl> and ends with </dl>. The <dt></dt> tag pair encloses each term and the <dd></dd> tag pair encloses each definition. Line breaks and indentations appear automatically.

Figure 5.2 The three basic types of HTML lists.

Listing 5.2 Unordered Lists, Ordered Lists, and Definition Lists

Placing Lists Within Lists

Although definition lists are officially supposed to be used for defining terms, many web page authors use them anywhere they’d like to see some indentation. In practice, you can indent any text simply by putting <dl><dd> at the beginning of it and </dd></dl> at the end and skipping over the <dt></dt> tag pair. However, a better approach to indenting text is to use the <blockquote></blockquote> tag pair, which indents content without the presumption of a definition and allows for much more clear styling. With one set of attributes, you can set the width, height, background color, border type and color of your element area, and other visual effects.

Because of the level of control over the display of your items that you have when using CSS, there is no need to use nested lists to achieve the visual appearance of indentation. Reserve your use of nested lists for when the content warrants it. In other words, use nested lists to show a hierarchy of information, such as in Listing 5.3.

Listing 5.3 Using Lists to Build Outlines

Ordered and unordered lists can be nested inside one another, down to as many levels as you want. In Listing 5.3, a complex indented outline is constructed from several unordered lists. You’ll notice in Figure 5.3 that Firefox automatically uses a different type of bullet for each of the first three levels of indentation, making the list very easy to read. This is common in modern browsers.

Figure 5.3 In Firefox, multilevel unordered lists are neatly indented and bulleted for improved readability.

As shown in Figure 5.3, a web browser will normally use a solid disc for the first-level bullet, a hollow circle for the second-level bullet, and a solid square for all deeper levels. However, you can explicitly choose which type of bullet to use for any level by using <ul style="list-style-type:disc">, <ul style="list-style-type:circle">, or <ul style="list-style-type:square"> instead of <ul>.

You can even change the bullet for any single point within an unordered list by using the list-style-type style rule in the <li> tag. For example, the following codes displays a hollow circle in front of the words extra and super and a solid square in front of the word special:

The list-style-type style rule also works with ordered lists, but instead of choosing a type of bullet, you choose the type of numbers or letters to place in front of each item. Listing 5.4 shows how to use Roman numerals (list-style-type:upper-roman), capital letters (list-style-type:upper-alpha), lowercase letters (list-style-type:lower-alpha), and ordinary numbers in a multilevel list. Figure 5.4 shows the resulting outline, which is nicely formatted.

Although Listing 5.4 uses the list-style-type style rule only with the <ol> tag, you can also use it for specific <li> tags within a list (though it’s hard to imagine a situation in which you would want to do this). You can also explicitly specify ordinary numbering with list-style-type:decimal and you can make lowercase Roman numerals with list-style-type:lower-roman.

Listing 5.4 Using the list-style-type Style Rule with the style Attribute in Multitiered Lists

Figure 5.4 A well-formatted outline can make almost any plan look more plausible.

Summary

In this hour, you learned that attributes are used to specify options and special behavior of many HTML tags and you also learned to use the style attribute with CSS style rules to align text. You also learned how to create and combine three basic types of HTML lists: ordered lists, unordered lists, and definition lists. Lists can be placed within other lists to create outlines and other complex arrangements of text.

Table 5.1 summarizes the tags and attributes discussed in this hour. Don’t feel like you have to memorize all these tags, by the way! That’s why you have this book: You can look up the tags when you need them. Remember that all the HTML tags are listed in Appendix B, “Complete XHTML 1.1 and CSS 2 Quick Reference.”

Table 5.1 HTML Tags and Attributes Covered in Hour 5

Q&A

Q I’ve seen web pages that use three-dimensional little balls or other special graphics for bullets. How do they do that?

A That trick is a little bit beyond what this hour covers. You’ll learn how to do it yourself in Hour 11.

Q How do I “full justify” text so that both the left and right margins are flush?

A You can use text-align:justify in your style declaration.

Workshop

The workshop contains quiz questions and activities to help you solidify your understanding of the material covered. Try to answer all questions before looking at the “Answers” section that follows.

Quiz

1. How would you center everything on an entire page?

2. How would you indent a single word and put a square bullet in front of it?

3. What would you use to create a definition list to show that the word “glunch” means “a look of disdain, anger, or displeasure” and that the word “glumpy” means “sullen, morose, or sulky”?

Answers

1. If you thought about putting a <div style="text-align:center"> immediately after the <body> tag at the top of the page, and </div> just before the </body> tag at the end of the page, then you’re correct. However, the text-align style is also supported directly in the <body> tag, which means you can forego the <div> tag and place the style="text-align:center" style directly in the <body> tag. Presto, the entire page is centered!

2. You would use:

(Putting the style="list-style-type:square" in the <li> tag would give the same result because there’s only one item in this list.)

3. You would use:

Exercises

• Use the text alignment style attributes to place blocks of text in various places on your web page. Try nesting your paragraphs and divisions (<p> and <div>) to get a feel for how styles do or do not cascade through the content hierarchy.

• Try producing an ordered list outlining the information you’d like to put on your web pages. This will give you practice formatting HTML lists and also give you a head start on thinking about the issues covered in later hours of this book.