Dreamweaver 8 Does Standards!

Semantic Markup

As we've already agreed, we're not concerned simply with writing valid XHTML: we want also to create semantic documents. Semantics is the study of meaning, so a document with semantic markup is a document that contains tags that attempt to convey the meaning of the text. For example, an <h1> tag is used to indicate a top-level heading, while the <ul> and <li> tags are used to mark lists of items in no particular order. If we use semantic markup, the browser can not only read and display (or, in the case of a screen reader, read aloud) the contents of the page, but knows to display or speak the elements in the appropriate format. As we've seen, when it comes to writing valid XHTML, Dreamweaver will do most of the hard work for us, but when it comes to creating properly structured documents, we need to take a proactive approach ourselves.

One of the biggest issues I experience when working in a visual environment such as Dreamweaver is that it's very easy to become engrossed in how things look, and completely forget about the markup that Dreamweaver generates. For example, it's very easy for me to decide I want to indent some text a few inches from the left-hand side of the screen. The problem is that I can end up with the following markup:

<blockquote>      
 <blockquote>      
   <blockquote>      
     <p>My indented text</p>      
   </blockquote>      
 </blockquote>      
</blockquote>

This obviously isn't great from a semantic perspective: my indented text is not a quote, and it's certainly not a quote of a quote of a quote!

Making sure our Website looks great in a Web browser is, of course, very important, but it isn't the whole story. Some of our users might not be able to see any part of our design because they're using screen readers or text-only devices. Yet, by taking some care as we create our Web documents, we can give these users an excellent experience without compromising the site's look and feel for other users.

Note: Removing CSS Style Rendering

Dreamweaver 8 makes it easy to see what your document will look like without styling when you're working in Design View. The Style Rendering toolbar can be opened by selecting View > Toolbars > Style Rendering. The Toggle Displaying of CSS Styles button switches the CSS in your document on and off, as shown in Figure 3.5, "Toggling CSS style rendering."

Figure 3.5. Toggling CSS style rendering.

Using Elements Semantically

In this section, we'll take a look at some of the most common elements in XHTML, and see how to use them in Dreamweaver. This is not an exhaustive list, but aims to provide some examples of the more common mistakes that can be made, particularly when we're using a tool such as Dreamweaver.

Throughout this chapter, I use the terms "should" and "shouldn't" in the manner in which they're used in the W3C specifications, in order to show that these issues affect the Web standards that we're trying to meet. Each XHTML element should be used in a particular way. Of course, in practice, decisions have to be made as to the types of elements we'll use and the best way to use them; we'll be looking closely at these decisions as we build our site. This chapter explains specifically what the standards tell us; using the type of terminology that's employed by the specifications themselves helps to reinforce the fact that the information provided here isn't personal opinion—it's the standard!

Headings

XHTML provides six heading levels. These headings can be thought of as being similar to the headings that might be presented in a book:

<h1>Introduction</h1>      
<h1>Starters</h1>      
 <h2>Soups</h2>      
   <h3>Vegetable Soup</h3>      
   <h3>Pea and Ham Soup</h3>      
   <h3>Minestrone</h3>      
 <h2>Other Starters</h2>      
<h1>Mains</h1>      
 <h2>Beef</h2>      
 <h2>Chicken</h2>      
 <h2>Vegetarian</h2>      
<h1>Deserts</h1>      
 <h2>Cakes</h2>      
 <h2>Biscuits</h2>

Using Dreamweaver, we can create a heading by selecting the text we wish to style as a heading, then selecting the desired heading level in the Property Inspector, as shown in Figure 3.6, "Creating a level one heading in Dreamweaver."

Figure 3.6. Creating a level one heading in Dreamweaver.

We should use a heading style whenever the text in question logically comprises a heading. We shouldn't use a heading when we simply want large text: use CSS to create that effect.

We should not "fake" headings by styling a paragraph or other element with CSS so that it looks like a heading, but is semantically a paragraph. Pages on which a heading is not distinguished as such can be rendered—or spoken—by the browser in ways that we did not intend, which in turn can cause confusion among users. We'll discuss this in more detail a little later.

Where possible, we should also avoid using an image at a point at which a heading would logically belong in a document. If we used an image, users with screen readers or other text-only devices would not perceive that heading as intended.

Lists

XHTML places three different types of list at your disposal; lists should be used whenever your content logically comprises a list of items.

The unordered list style usually displays in browsers as a bulleted list; however, you can use CSS to change the bullets' appearance, or even to change the list to run horizontally across the screen, rather than vertically. You create an unordered list in Dreamweaver using the Property Inspector's Unordered List icon, shown in Figure 3.7, "Creating an unordered list."

Figure 3.7. Creating an unordered list.

An unordered list is marked up as follows:

<ul>      
 <li>250 grams (9 ounces) Plain Flour</li>      
 <li>1 teaspoon Baking Powder</li>      
 <li>50 grams (2 ounces) Butter</li>      
 <li>1 egg</li>      
 <li>Half a Cup of Milk</li>      
</ul>

The ordered list format should be used whenever the order of the items in the list is important. You can create an ordered list in Dreamweaver using the Property Inspector's Ordered List icon, as shown in Figure 3.8, "Creating an ordered list."

Figure 3.8. Creating an ordered list.

If, after you create an ordered list, you switch into Code View, you'll see the following markup.

<ol>      
 <li>Preheat the oven to 200 degrees Celsius (400 degrees      
   Fahrenheit)</li>      
 <li>Put the flour, baking powder and sugar in a mixing bowl,      
   then rub in the margarine until the mixture resembles      
   breadcrumbs.</li>      
 <li>Beat the egg and add it, with the milk, to the rest of the      
   ingredients. Beat into a dough.</li>      
 <li>Turn the dough out onto a floured surface and knead it      
   briefly.</li>      
 <li>Put into a greased tray and bake for 45 minutes.</li>      
</ol>

The <ol> element indicates that this is an ordered list. By default, a browser will display these lists as shown in Figure 3.9, "Displaying an unordered list and an ordered list", but you can use CSS to change the display of any list.

Figure 3.9. Displaying an unordered list and an ordered list.

Note: Correct Structure for Nested Lists

<ul>      
 <li>List item one</li>      
 <li>List item two      
   <ul>      
     <li>Sub item one</li>      
     <li>Sub item two</li>      
   </ul>      
 </li>      
 <li>List item three</li>      
</ul>

The last type of list is useful if you have list of terms and definitions to mark up; it's called a definition list. You can create a definition list in Dreamweaver using the Insert toolbar's Text panel. To create the list, click the dl button, as shown in Figure 3.10, "Creating a definition list using the Insert toolbar."

Figure 3.10. Creating a definition list using the Insert toolbar.

The first item that you type into your definition list will become the first term; hitting Enter will move you forward a line to create the definition for that term. Hitting Enter once more will create the second definition, and so on.

You'll end up with markup that looks something like this:

<dl>      
 <dt>Cardamom</dt>      
 <dd>An Indian spice from the ginger family.</dd>      
 <dt>Caster Sugar</dt>      
 <dd>Super fine sugar.</dd>      
</dl>

Figure 3.11. Displaying a definition list.

By default, this markup will display in the browser, and in Dreamweaver, as shown in Figure 3.11, "Displaying a definition list." Again, you can change this display using CSS.

Creating Paragraphs and Line Breaks

The difference between a line break and a paragraph is a common source of confusion. A tried and true way of discerning the difference involves marking up a couple of verses of lyrics from a favorite song:

<p>      
It's time to play the music,<br />      
It's time to light the lights,<br />      
It's time to meet the Muppets on the Muppet Show tonight!      
</p>      
<p>      
It's time to put on make up,<br />      
It's time to dress up right,<br />      
It's time to raise the curtain on the Muppet Show tonight!      
</p>

The paragraph tags tie the verse together. The line break tags are used to mark the end of each line of the verse.

To create a paragraph in Dreamweaver, hit Enter; to create a <br /> tag, hit Shift-Enter. Whenever you use <br />, consider whether it's the most appropriate element. Would you perhaps be better to create additional space using CSS, or using a paragraph? Maybe the content should really be marked up as a list, as in the example above.

Make sure you don't use line breaks within a paragraph to simulate a list! While this markup might display like an ordered list of items in a Web browser, a screen reader would not be able to present the content as intended:

<p>      
 1. Preheat the oven to 200 degrees Celsius (400 degrees      
 Fahrenheit)<br />      
 2. Put the flour, baking powder and sugar in a mixing bowl,      
 then rub in the margarine until the mixture resembles      
 breadcrumbs.<br />      
 3. Beat the egg and add it, with the milk, to the rest of the      
 ingredients. Beat into a dough.<br />      
 4. Turn the dough out onto a floured surface and knead it      
 briefly.<br />      
 5. Put into a greased tray and bake for 45 minutes.      
</p>

Showing Emphasis

We often show emphasis in printed text by making specific words bold or italic. This approach lets the reader understand the emphasis we've placed on particular words: we're not just making them bold or italic for the sake of it. For example, the first time we've used a new or important term in this book, we've bolded that term. We use bold formatting to emphasize these new words to the reader: to flag them as words you'll need to remember.

When we set our preferences back in Chapter 2, Site Planning and Setting up for Development, we set the checkbox "Use <strong> and <em> in place of <b> and <i>" in the preferences dialog. Doing this means that the B (for bold) button in the Property Inspector will insert the strong element, and the I (for italics) button will insert the em element, like so:

<strong>Make sure that you preheat the oven.</strong> Cooking at      
the correct temperature is <em>really</em> important.

By default, most Web browsers will display <strong> as bold text and <em> as italicized text. This is why many Web designers incorrectly consider these tags equivalent to <b> and <i>, which are purely presentational and don't provide much meaning. Like almost all tags, the appearance of <strong> and <em> can be changed using CSS.

Note: What's the Difference Between <em> and <strong>?

The W3C and most of the HTML documentation describes these elements only as "emphasis" and "strong emphasis," which isn't much use. Think of <strong> as a loud, slow voice, and <em> as a raised tone of voice.

Indenting and the blockquote Element

Dreamweaver's Property Inspector is home to the Text Indent icon shown in Figure 3.12, "Using the Text Indent icon." The only time you should use this icon is to indent text that's a quote.

Figure 3.12. Using the Text Indent icon.

This icon inserts a blockquote element, which is why it's used to mark up quote text. We saw this button's effects in a previous example. In most browsers, this will indent the text slightly to more clearly differentiate the quote from surrounding text.

If you simply want to create an indentation effect on a section of text, the correct way to do so is to use CSS to create padding to the left and right of the element: don't use a structural tag such as <blockquote>.

Semantic Markup and Text-Only Devices

In Chapter 1, What are Web Standards?, I marked up a part of this book to demonstrate semantic markup. First, I marked it up in a non-semantic manner, my only concern being how it looked. Then, I took the same document and marked it up semantically so that the content structure made sense without the CSS. To get firsthand experience at how difficult it is to understand a document that's written in a non-semantic manner, have a look at such a document in a text-only browser. One easily obtainable, text-only browser is Lynx. You can download versions for Mac, Unix/Linux, and Windows at no cost.

Windows Install

To install Lynx on Windows, you need to download a copy of the Lynx installer for Windows. Install Lynx onto your system using the product's installer, then run it from the Start menu, or from the Lynx icon on the desktop (if you allowed the installer to create one). On launch, a window that looks something like Figure 3.13, "Launching Lynx for Windows" displays.

Figure 3.13. Launching Lynx for Windows.

Mac Install

Figure 3.14. Running Lynx on Mac OS X.

Mac OS X users can also download Lynx: just double-click the downloaded file and follow the instructions. To run Lynx, you may need to open the Terminal application to get access to the command line. Terminal is in the Utilities folder located in your Applications folder. Figure 3.14, "Running Lynx on Mac OS X" shows the browser in action on the Mac platform.

Linux

Most Linux or other UNIX users will probably find that Lynx is already installed on their system. If not, a quick Web search should uncover packages developed for your system.

Using Lynx

Lynx works identically on Windows, Mac, and Linux machines. To use Lynx, you need to learn some simple commands. First of all, to visit a Website, type g.

Lynx will then present a field into which you can type the URL of the site you want to visit, like that shown in Figure 3.15, "Opening a Web page using Lynx."

Figure 3.15. Opening a Web page using Lynx.

Hit Enter to have Lynx access this URL. If the site you're trying to visit uses cookies, Lynx will ask if you wish to allow the cookie; type Y for yes, or N for no, A to always accept cookies from the site, or V to never accept cookies from this site. If you press H while in Lynx, the Lynx help system appears. You can navigate this in the same way you'd navigate a Website.

Once you've loaded a page in Lynx, you can use the arrow keys to navigate it. The up and down arrow keys will let you jump from link to link, from the left to the right—and from top to bottom—of the page. Hit the right arrow key to follow the link you're currently on; the left arrow key will take you back to the previous page.

The up and down arrow keys will select any form fields in the page, too. Select a text field by typing into it. Toggle check boxes and radio buttons by hitting Enter when the desired option is selected. To view the options in a drop-down list, select it, hit Enter, then use the up and down arrows to scroll through the listed items. Hit Enter again to use the selected option. Buttons are "clicked" when you hit the Enter key.

You can use Lynx to view local files, which is useful in development. If you're running a local Web server, such as Apache or IIS, you can point Lynx to internal localhost URLs; however, Lynx will also read an HTML file if you pass it the location, for example, c:\web\myfile.html.

Note: Lynx Spacing Snafu

Lynx has trouble with pathnames that contain spaces. Replace any spaces in a file path with %20 to load the file.

If I view my non-semantic document in Lynx, the display for which is shown in Figure 3.16, "Displaying non-semantic markup in Lynx", I see that every element looks just like a paragraph: it's readable, but no emphasis is placed on any of the sections, so it's not obvious that the heading, "What are Web standards?" is in fact a heading. Imagine reading this entire chapter without any structural clues as to which section is which—this is the effect that text browser users have to endure when reading documents that have not been marked up correctly.

Figure 3.16. Displaying non-semantic markup in Lynx.

This problem is accentuated for screen reader users. The markup of page headings, lists, and other elements lets the screen reader know to read each section of content in a voice that's appropriate to those particular elements, just as you would if you were to read a page aloud. You'd normally emphasize a heading, leave appropriate pauses between list items, and so on. A screen reader can do this too, provided it knows what the elements are; the only way it can know is if the page elements have been marked up correctly.

Figure 3.17, "Displaying semantic markup in Lynx." depicts this same document marked up using a level one heading (<h1>) for the document's heading, and a list to display the Web links. As you can see, Lynx now understands that the heading is a heading, and deals with it as such; Lynx demonstrates that the list is a list by applying an asterisk to each bullet point.

Figure 3.17. Displaying semantic markup in Lynx.

Note: Lynx Preview

If you don't have Lynx installed, and you just want a quick preview of a site in a text-only device, use the online Lynx Viewer.

Summary

In this chapter, we discussed XHTML, including what it is, and why we might want to use it. We also explored the basics of working in XHTML using Dreamweaver.

We spent some time discussing semantics, and saw how we could create a document that could be understood by everyone—even those using devices that don't show the design visually. In the next chapter, we'll put this theory to practical use as we build a layout for our project Website.