Dreamweaver CS5.5: The Missing Manual

Chapter 3. Text Formatting

Getting text onto a web page is a good start (Chapter 2), but effective communication requires effective design. Large, bold headlines help readers scan a page’s important topics. Colorful text focuses attention. Bulleted sentences crystallize and summarize ideas. Just as a monotonous, low-key voice puts a crowd to sleep, a vast desert of plain HTML text is sure to turn visitors away from the important message of your site. In fact, text formatting could be the key to making your Widgets Online 2011 Sale-a-Thon a resounding success instead of an unnoticed disaster. Figure 3-1 shows examples of good—and bad—text formatting.

Text formatting is actually a two-step process. First you apply the appropriate HTML tag to each chunk of text, and then you create styles using a formatting language called CSS (Cascading Style Sheets) to make that text look great. You add HTML tags not so much to format text (though they can do that, with the undesired side effect that different browsers can interpret the tags differently); rather, you use them to structure the text into logical blocks. Once you identify those blocks, you can use CSS to format them to your liking—and not just in the current page, but across your site. That’s one of the big benefits of CSS.

For example, you’d use the <h1> (Heading 1) tag to indicate the most important heading on a page, and the <ol> (ordered list) tag to list a series of numbered steps. Structuring your text with HTML like this not only ...