• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Working with Text > Working Smart: Creating Text Structure

Working Smart: Creating Text Structure

As a web designer, you need to work as efficiently as possible with text. This includes creating and editing it efficiently, and having a good idea what makes well-structured text.

Well-Structured Text: Making Text Accessible

The name of the game for good HTML is separation of form and content. Text in an HTML document is structured with tags that indicate the logical purpose of each piece of text: heading, subheading, paragraph, list, and so on. This is content. Form is how that text is presented so that its logical structure is apparent. Form can be controlled by the browser, screen reader, or other device; it can also be affected by Cascading Style Sheets, which indicate how certain logical elements should be handled.

Why is this distinction important? For one thing, it’s more efficient. Setting every single heading in a website to a certain size, font, and color—referred to as presentational markup—is tedious and difficult to update. Identifying every single heading as a heading and then letting the browser or a style sheet control the formatting of all headings—called structural markup—is much more efficient.

Not only is it more efficient, but structural markup is more flexible and, therefore, more accessible. A screen reader, for instance, won’t know that some large, bold text on the page is supposed to be a heading—but it does know that text structured with the h1 tag is a heading. The W3C’s accessibility guidelines include several recommendations that encourage structural, as opposed to presentational, markup for text:

3.3 Use style sheets to control layout and presentation.

3.5 Use header elements to convey document structure and use them according to specification.

3.6 Mark up lists and list items properly.

3.7 Mark up quotations. Do not use quotation markup (such as blockquote tags, for instance) for formatting effects such as indentation.

For this reason, the font tag and its attributes (size, color, and face) have been deprecated in HTML in favor of using Cascading Style Sheets for formatting; and bold and italic (b and i tags) are discouraged in favor of em (emphasis) and strong tags. Font, bold, and italic all relate to visual presentation only.

Using Dreamweaver to Create Well-Structured Text

Dreamweaver can help you create properly structured text, but only if you work with the program.

Let Dreamweaver Substitute em and strong for b and i

By default, Dreamweaver is set up to do this. Whenever you use the B and I buttons in the Text Property Inspector, the program adds em and strong tags. You can change this setting in the Preferences dialog box (see Figure 4.10). Don’t! The default setting is better.

Figure 4.10. The Preferences dialog box setting for good coding of bold and italic text.

Don’t Use Indent and Outdent Improperly

The Indent and Outdent buttons on the Property Inspector look a lot like similar controls in word-processing programs, but they’re not! When applied to regular paragraphs of text that aren’t list items, they add blockquote tags. When applied to items in an ordered or unordered list, they create subcategories of the list. These are their correct structural uses. If you just want to indent a paragraph of text, but it isn’t a block quote, use CSS to create an indented style of paragraph. If you want your list items indented farther than they are by default, use CSS to modify the li tags.

Check out Chapter 11, “Using Cascading Style Sheets,” for all the ins and outs of Cascading Style Sheets.

Use All Tags According to Their Structure, Not Their Appearance

This is just an extension of the previous point. Think structurally when applying tags and presentationally when applying style sheets. The top level of headings in a document should be h1, not h2 or h3. If the h1 tag creates text that is too big for your taste, use CSS to modify its presentation instead of just not using it. Definition list formatting is only for definition lists, not to create staggered indent effects. And so forth. At least some of your visitors will thank you. You’ll thank yourself when you’re maintaining this document later. Your colleagues will thank you when they have to update the document the next time you go on vacation. Like eating your vegetables and buttoning up your overcoat, these are just the right things to do.

Fixing Badly Structured Text

What if you inherit a page that violates these rules? Dreamweaver has a variety of tools to help you fix problems.

Removing font Tags

font tags are never a good idea. To remove one font tag, do this:

Place the insertion point inside the text that is being formatted with the font tag.

In the Tag Selector, find the font tag and right-click it. From the contextual menu, choose Remove Tag (see Figure 4.11). This deletes the font tag without disturbing the text itself.

Figure 4.11. Using the Tag Selector to remove an individual font tag.

To quickly remove all font tags from one or more documents, perform a Specific Tag search, like this:

Choose Edit, Find and Replace.

When the Find and Replace dialog box opens, set the search scope to whatever you desire.

Set the search type to Specific Tag. In the Search For field, enter font. Click the – button to eliminate all other search options.

In the Actions drop-down menu, choose Strip Tag. Figure 4.12 shows what the dialog box should look like at this point.

Figure 4.12. Using a Specific Tag search to remove all font tags from a document.

Click Replace or Replace All to perform the search.

When you’re done, click Close to close the dialog box.

Replacing Bold and Italic with Strong and Emphasis

You can use another Specific Tag search to change b and i tags to strong and em. Do this:

Choose Edit > Find and Replace.

When the Find and Replace dialog box opens, set the search scope to whatever you desire.

Set the search type to Specific Tag. In the Search For field, enter b. Click the – button to eliminate all other search options.

In the Actions drop-down menu, choose Replace Tag. In the text field that appears, enter strong. Figure 4.13 shows what the dialog box should look like at this point.

Figure 4.13. Using a Specific Tag search to replace all b tags with strong.

Click Replace or Replace All to perform the search.

Repeat the previous steps, replacing i with em. When you’re done, click Close to close the dialog box.

You can use this same technique to get rid of blockquote tags, replacing them with p tags, although it’s wisest to choose Replace instead of Replace All so you can examine each occurrence and make sure it’s not really a quotation that needs a blockquote tag.

Stripping Out Multiply Indented Lists

A multiply indented list consists of one ordered or unordered list inside another, not for the purpose of creating a sublist, but simply to increase the indent. The code looks like this:


To eliminate these occurrences one at a time, you can select any item in a list, find the double set of ul or ol tags in the Tag Selector, right-click on one of the two tags, and choose Remove Tag from the contextual menu. To quickly find and eliminate them across an entire document or site, you can perform a Specific Tag search for a ul or ol tag inside another ul or ol tag (see Figure 4.14), but you’ll have to replace them one at a time and carefully examine each occurrence because the search will also find legitimate nested lists.

Figure 4.14. Using a Specific Tag search to find all nested unordered lists.

Line Breaks, Nonbreaking Spaces, and Whitespace

Whitespace is a visual concept and, therefore, is related to formatting, not structure. So why discuss it here? Because there’s nothing wrong with a little whitespace, as long as it doesn’t actually interfere with structure.

Line Breaks: The Good and the Bad

In Dreamweaver, pressing Return or Enter ends the current paragraph and begins a new paragraph. In the source code, this ends one block (paragraph, heading, list item, and so on) and starts a new one. In Design view as well as in the browser, all breaks between blocks are displayed with a double space. This is often called a hard wrap.

Sometimes you want a new line but don’t want a new block element. You don’t want the extra space or you don’t want to create a new list item, for instance, In these cases, press Shift+Return or Shift+Enter. This ends the current line and begins a new line. In the source code, a br tag is entered within the current formatting block. In Design view and in browsers, it creates a new line with no extra spacing, bullets, and so on. This is often called a soft wrap.

Soft-Wrapping Woes

Line breaks are very easy to abuse, however, and can cause problems if you’re not careful. What happens, for instance, if you carefully insert line breaks throughout your text and the browser rewraps the text because of user settings or window size? Figure 4.15 shows what ugly results can happen.

Figure 4.15. Soft-wrapping as you hope it might look (left) and as it can look (right) in the browser.

Soft-Wrapping and Structure

Remember also not to use line breaks to create bad structuring. If you want no extra space between a title and its following text, for instance, don’t just separate the two with a line break. This obliterates the structural difference between title and text. Instead, use CSS to eliminate the extra space, like this:

In the CSS Styles panel, create a new style, either by redefining the tag involved or by creating a custom class.

When the CSS Style Definition dialog box comes up, choose the Box category.

In the Margin controls, deselect Same for All and set the bottom margin to a negative amount. Figure 4.16 shows this happening.

Figure 4.16. Creating a CSS Style that will eliminate the extra space between two block elements.

If you defined your style as a custom class, select the text and use the Property Inspector or Tag Inspector to apply it.

CSS control of the bottom margin doesn’t display correctly in Netscape 4.x.

Nonbreaking Spaces

A nonbreakig space (&nbsp;) is just what it sounds like: a space that is guaranteed not to wrap to the next line, no matter how the automatic text wrap happens. But it’s more than that. Browsers ignore extra white-space in HTML code. But a nonbreaking space creates a space between words or other elements that the browser is not allowed to ignore. The easiest way to create a nonbreaking space in Dreamweaver is to press Shift+Ctrl+Spacebar (Windows) or Opt+Spacebar (Mac). But you can also create one by choosing the Nonbreaking Space object in the HTML Insert bar or Insert > HTML > Nonbreaking Space.

Dreamweaver also creates nonbreaking spaces for you in a few situations. Any time you create an empty paragraph, for instance, Dreamweaver inserts a nonbreaking space to force the browser to pay attention to the paragraph. (Completely empty paragraphs are considered meaningless whitespace and are ignored by browsers.) The program also inserts nonbreaking spaces into empty table cells, for the same reason that some browsers don’t display empty table cells correctly.

Making Whitespace with Empty Paragraphs

Admit it, how many times have you done this? Hit the Return key a few extra times to create a big whitespace between page elements? Guess what? That’s cheating! Dreamweaver makes it so easy, inserting those nonbreaking spaces in your empty paragraphs to make sure they display. But it’s not really good structure. What’s logical about a paragraph full of nothing? A much better way to add space between items is (you guessed it!) CSS.

All About Lists

Everybody loves lists. Whether they’re bulleted lists or numbered lists—unordered or ordered, in HTML-speak—they help create read-at-a-glance content for web visitors in a hurry. You can do a lot to make your lists better looking and better structured.

Refining List Appearance with List Types

You don’t want round black bullets in your bullet lists? You want “abc” instead of “123” in your numbered lists? This is a simple matter of setting the type attribute for the list or list item. The code looks like this:

<ul type="square">
<ol type="a">

List types can be set in Dreamweaver in the List Properties dialog box, available from the List Item Property Inspector. To make this happen in Dreamweaver, place the insertion point somewhere within the list and, in the Text Property Inspector, click the List Item button. This opens the List Properties dialog box (see Figure 4.17).

Figure 4.17. The List Properties dialog box in action.

From here, you can use the List Type drop-down menu to specify what kind of list it is. Even though this is called List Type, it doesn’t supply a type attribute for the list; instead, it changes the tag that creates the list:

  • Ordered (ol) Creates a numeric, alphabetical, or otherwise ordered list

  • Unordered (ul) Creates a bulleted list

  • Directory (dir) Creates a multicolumn directory list (this tag is deprecated).

  • Menu (menu) Creates a single-column menu list (this tag is deprecated).

Depending on what you choose here, different options become available in the rest of the dialog box.

To determine the list’s type attribute, use the Style drop-down menu. Table 4.4 lists the possible types for different list kinds.

Table 4.4. Options Available for List Styling Through the List Properties Dialog Box
Kind of ListStyleHTML
Unordered[Default]No type attribute is added; the browser determines style.
 Bullettype = “disc”
 Squaretype = “square”
Ordered[Default]No type attribute is added; the browser determines style.
 Number(1,2,3)type = “1”
 Roman Small (i,ii,iii)type = “i”
 Roman Large (I,II,III)type = “I”
 Alphabet Small (a,b,c)type = “a”
 Alphabet Large (A,B,C)type = “A”
Directory List
Menu List

For ordered lists, you’re also given the opportunity to specify where the list count starts (at 1, 2, 3, and so on). Enter a number in here, even if you’ve chosen a non-numeric type such as Alphabet. This adds a start attribute to the list tag, like this:

<ol start="5">

Finally, in the bottom of the dialog box, you can choose a New Style, which adds a type attribute to the particular list item you had selected when you opened this dialog box:

<ol type="1">
   <li type="a">

This changes the type of only that one list item.

Fancier Bullets with CSS

Bullet types are nice, but what if you want graphic bullets for your unordered lists? CSS can help you! Do it this way:

Start by using a web graphics program to create the GIF or JPEG graphic that you want to use as a bullet.

Back in Dreamweaver, create a new CSS Style redefining the ul (unordered list) tag. Do this by choosing Text > CSS Styles > New CSS Style, or by using the New Style button in the CSS Styles panel.

When the CSS Style Definition dialog box appears, go to the List category. In the Bullet Image field, browse to select your bullet. You can leave the Position field blank or choose inside from the drop-down menu to include the bullet in the indentation for the list items (this makes the indent look larger).

Click OK to close the dialog box. From now on, any unordered list governed by the style sheet will use that graphic as its bullet. Figure 4.18 shows the whole procedure in action.

Figure 4.18. Creating a CSS style to use an image for list bullets.

Of course, this isn’t the only way CSS can help you format your lists. Font, text size, color, and more can all be set using CSS. To increase or decrease the amount of indentation given to list items, or the vertical space between list items, set the margin properties (available in the Box category of the CSS Style Definition dialog box). See Chapter 11 for more.

Taking Advantage of Special Characters

When working with text, you will no doubt encounter a need for special characters such as accented letters, copyright symbols, or the angle brackets used to enclose HTML elements. To use such characters in an HTML document, they must be represented in the HTML by special codes called HTML entities. They take the form &code, in which code is a word or numeric code indicating the actual character you need to display onscreen. There are hundreds of HTML entities for special characters. Table 4.5 lists some of the most common ones.

Table 4.5. Commonly Used HTML Entities
NameAppearanceKeyboard Shortcut (WIN)[*] Keyboard Shortcut (MAC)HTML Entity
Opening Single QuoteAlt+0145Opt+]&#8216;
Closing Single Quote (Apostrophe)Alt+0146Shift+Opt+]&#8217;
Opening Double QuoteAlt+0147Opt+[&#8220;
Closing Double QuoteAlt+0148Shift+Opt+[&#8221;
Em DashAlt+0151Shift+Opt+-&#8212;
En DashAlt+0150Opt+-&#8211;
Copyright Symbol©Alt+0169Opt+G&copy;
Trademark SymbolAlt+0153Opt+2&#8482;
Registration Symbol®Alt+0174Opt+R&reg;

[*] Windows keyboard shortcuts are ASCII codes and must be entered by pressing and holding the Alt key, typing all four numbers specified, and then releasing the Alt key. The numbers must be typed using the numeric keypad, and Number Lock must be on.

Inserting Special Characters As You Work

Some special characters are easier to insert than others. To insert an ampersand, for instance, just press Shift+7 while in Design view, and Dreamweaver will substitute the correct HTML entity (&amp;). If you know the keyboard shortcuts your operating system uses to create other characters, you can also use those in Design view, and Dreamweaver will enter the correct code. On Macintosh, for instance, Shift+Opt+] creates an apostrophe. In Dreamweaver, it creates the &#8217; HTML entity. Table 4.5 lists Windows and Macintosh keyboard shortcuts for special characters.

Automatic insertion of entities based on keyboard shortcuts might not work if your document doesn’t have the default encoding scheme (Latin-1). See Chapter 3, “Creating and Working with Documents,” for more on encoding schemes and Dreamweaver.

The most commonly used HTML entities are easily accessible in Dreamweaver through the Insert > HTML > Special Characters submenu. When you want to insert one of these characters, just put the insertion point where you want it to appear and choose one of the commands here (see Figure 4.19).

Figure 4.19. Using the Insert menu to insert special characters.

If the special character you need is not listed, choose the Other Character object from the Insert bar (refer to Figure 4.19) or use the Insert > HTML > Special Characters > Other command. This opens a new window from which you can choose a special character (see Figure 4.20). When you click a character icon, it appears in the text field box at the top of the window. You also can type your own special character code into the box.

Figure 4.20. The Insert Other Character dialog box.

Finding and Replacing to Insert Special Characters

If you’ve got a whole page full of text in front of you—or, worse, an entire site’s worth of pages—that have already been typed without the benefit of HTML entities, the last thing you want to do is hunt through it to replace items one by one. It’s time for a little finding and replacing! Do it this way:

Open one of the documents you want to edit, and make sure you’re in Design view.

Find one occurrence of the character you want to change. If you want to insert real (curly) apostrophes instead of straight single quotes, find an example of this. Delete this character and use the Insert bar or Insert menu to insert an HTML entity.

Select the special character you just inserted and choose Edit > Copy.

Choose Edit > Find and Replace. Choose a search scope (Current Document, Entire Site, and so on) as desired. Set the Search In drop-down menu to Text. In the Search In field, type the character you’re going to replace—the straight quote, double-hyphen, and so on. Click inside the Replace With field and Edit > Paste to get the special character in there.

Choose Replace or Replace All. The search might take a few seconds, depending on your search scope. When it’s done, Dreamweaver will tell you how many replacements it made. Click OK to close that dialog box, and click Close to close the Find and Replace window.

Repeat this procedure for any other special characters you want to use.

Here’s a special bit of efficiency overdrive. If you find yourself doing this a lot, wouldn’t it be nice to save the search criteria to make these searches easier? Do this:

Follow the steps just listed, up to the point where you’re looking at a Find and Replace dialog box with all of the correct search criteria in place for a particular special character.

Instead of searching or closing the window, click the Save button; it looks like a computer disk. Choose to save your criteria in any folder you like that you’ll be able to find and remember later. When you’re done saving, close the Find and Replace dialog box.

The next time you want to search and replace this special character, open the Find and Replace dialog box and click the Load button; it looks like a file folder. Browse to your saved criteria and load them. Then perform the search as usual. Pretty handy!

Do you often use a special character that isn’t on the Insert bar? Adding a simple bit of code such as a special character to the Insert bar is not difficult. It’s covered in the section “Creating Object Extensions” in Chapter 29, “Creating Your Own Extensions.”

Lorem Ipsum and Other Bits of Greek

Have you ever had to build a web page out of text that doesn’t exist yet? Your boss or client promised to get you that copy for the home page by Friday, but it just didn’t happen—and now you need to design the page. For years, designers have been using fake text, often called greeking, just to fill the spaces and indicate what the final design will look like without having any actual text. Weirdly enough, this greeking is usually created from a form of fake Latin (not Greek), always starting with the words Lorem ipsum:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

It doesn’t mean anything, but it looks good. It lets you see what the finished design will look like, estimate how many words will fit in a given area, and so forth.

In Dreamweaver, stationery-based designs created from the New Document dialog box’s Page Designs category are built with this greeking (see Figure 4.21). So are many of the predefined snippets available in the Snippets panel.

Figure 4.21. Creating a page based on the Commerce: Product Catalog stationery, and the resulting greeked text.

How can you easily put greeking into your documents? Many designers have a special text file that they just open when needed and copy from. But if you want to be a little bit slicker, you can download one of the fake text extensions available on the Dreamweaver Exchange. These include Latin Text, Insert Celestial TechnoBabble, and Insert Corporate Mumbo Jumbo.

To visit the Exchange, choose Help > Dreamweaver Exchange, or launch your browser and go to www.macromedia.com/cfusion/exchange.

Check Spelling: Build (and Share) Your Own Personal Dictionary

Whenever you check your spelling (Modify > Check Spelling), Dreamweaver consults its own dictionary as well as your personal dictionary. You’re also given the chance to add new words to your personal dictionary (see Figure 4.22). But what if you need a lot of your own words added to your dictionary? It’s no fun to add them one at a time through the Check Spelling dialog box. And you don’t have to!

Figure 4.22. The Check Spelling dialog box allows you to add words to your personal dictionary.

Dreamweaver keeps its spelling dictionaries in two places. The main dictionaries consist of a series of TLX and CLX files in the main Configuration folder, which is in the Dreamweaver application folder. The user’s personal dictionary doesn’t exist until you’ve added at least one word through the Check Spelling dialog box. So start by opening or creating a document and typing in a word that you know is not in the dictionary (such as your name or any weird made-up word). Then check spelling (Modify > Check Spelling) and, when Dreamweaver tries to correct your made-up word, click the Add to Personal Dictionary button.

Edit Your Personal Dictionary

Dreamweaver creates your personal dictionary as a text file called Personal Dictionary.tlx, which you can find in your personal application support folder. If you’re using Windows 98, look here:

c:\Program Files\Macromedia\Common\Personal Dictionary.tlx

For any other version of Windows, look here:

c:\Users and Documents\user name\Application Data\Macromedia\Common\Personal Dictionary.tlx


Substitute your username where indicated here. If you’re the only user on your computer, you might have to look in the Default User or All Users folder.

Unless you have Windows configured to show invisible files, the Application Data folder will be invisible. To make it visible, choose Tools > Folder Options and bring the View Options tab to the front. Select Show Hidden Files.

If you’re on a Mac, look here:

/Users/user name/Library/Application Support/Macromedia/Common/Personal Dictionary.tlx


Substitute your username where indicated here.

Open this file in a text editor. The contents will look something like this:

#LID 24941
Gutman i

Each spelling entry consists of a paragraph containing the word to be spelled. To add more words, just type them in here, separating each with a hard return. Make sure to also add a return after the last word, or Dreamweaver won’t see it.

For more on how Dreamweaver is configured, see the section “How Dreamweaver is Configured” in Chapter 28.

Share Your Personal Dictionary

When you’ve gone to all this trouble, you might want to share your dictionary with coworkers. Just put a copy of your Personal Dictionary.tlx file into the other user’s personal application support folder, using the same file paths listed here.

Exercise 4.1. Fixing Text Structure Problems in Dreamweaver

In this exercise, you start with a web page that has already been built—but built incorrectly. Your job is to identify the problems and fix them as efficiently as possible, using Dreamweaver to help you. Before you start, download the chapter_4 folder from the book’s website at www.peachpit.com to your hard drive. Define a site called Chapter 4, with this folder as the local root folder.

Open the faq.html file and examine it in Dreamweaver and in the browser. How does it look? What’s bad about the way it’s coded?

In Dreamweaver, put the cursor somewhere inside the first paragraph and check the Tag Selector. This indented paragraph was created with a blockquote tag. The paragraph isn’t a quotation, so it shouldn’t be inside a blockquote. In the Tag Selector, right-click the blockquote tag and choose Remove Tag from the contextual menu.

Dreamweaver replaces it with a p tag. That’s better.

Now place the cursor inside any of the questions. What’s wrong here? They’re formatted using the dt (definition term) tag and then formatted with the font and b tags. Lots of things are wrong here! Because there are several questions in the document, it’s more efficient to deal with these items using Find and Replace.

Choose Edit > Find and Replace. When the dialog box opens, set the Search In drop-down menu to Current Document. Using the instructions earlier in this chapter, perform a Specific Tag search that strips all font tags.

Next, perform another Specific Tag search that finds all b tags and replaces them with strong tags.

Finally, perform one more Specific Tag search to find all dt tags and replace them with p tags.

That takes care of the questions. How about the answers? To examine one, place the insertion point inside an answer and take a look at the Tag Selector. These items are formatted with the dd (definition data) tag. Perform another Specific Tag search, replacing dd tags with p tags.

Now how does your page look? There’s a lot of space between questions. Can you tell why? (Hint: Try to put the insertion point inside the empty space between questions.)

There are extra empty paragraphs between each question. That’s not a terrible thing, but it’s not good. To get rid of these, follow the instructions earlier in this chapter to perform a Source Code search, finding all instances of <p>&nbsp;</p> and replacing them with nothing.

What else is wrong with the text in this document? If you know about definition lists, you might suspect that there’s a dl tag lurking somewhere; a definition list always consists of a dl tag surrounding one or more pairs of dt and dd tags. Place the insertion point anywhere in any question or answer, and look at the Tag Selector. You’ll see a dl tag in the document hierarchy.

To get rid of this tag, right-click it in the Tag Selector and choose Remove Tag from the contextual menu. Figure 4.23 shows what the document should look like in the browser by the time you’re finished.

Figure 4.23. The faq.html exercise file, after removing all presentation markup and eliminating structural problems.

This document now has well-structured text markup. The only problem is, it doesn’t look nearly as nice as it did before you started. How do you get it back to its beautiful self without compromising this structure? That’s right! Apply CSS. Read all about it in Chapter 11.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint