The workflow for producing correctly formatted body copy for the web can be broken down to three major steps:

Write as much of your body copy in a word processor as you can, rather than directly in the code.

• HTML editors – including Notepad, TextEdit, (in the mode we are using it in), DreamWeaver, Web Expressions, and others – do not understand the subtleness of typography. However word processors – such as Microsoft Word and the OpenOffice suite – do. They will correctly encode the majority of our body text, including correct apostrophes and hyphens.

• Word processors also give the advantage of checking your work inline – that is, “on the fly”, as you type, for grammar and spelling errors.

• Word processors are also very useful tools to share body copy with clients. Most have an option to “track changes”, so that when a client alters or adds body copy in a document you can tell when and where. This is a lot easier than trying to have the client work on a web page, or having them communicate changes via phone or eMail. (We will address working with clients later).

Transfer this body copy into your HTML document via copy-and-paste, either:

• Apply appropriate markup manually;

• If using Microsoft Word, use an online utlity like Word to Clean HTML

• Use DreamWeaver’s built-in Word text conversion tools by pasting into Design Mode.

Inevitably you will have to edit and further clean up the resulting code. There are several tags that produce semantic and typographical changes:

• The inline element <q> is used for short quotations, and will produce the correct opening and closing “smart” quotes.

• <blockquote>, a block tag, wraps around a larger quotation from a source. (For this reason, text inside the <blockquote> is often divided up into several paragraphs). <blockquote> indents the enclosed text by default, but remember it is the meaning that counts, not its default appearance. <blockquote> does not automatically produce quote marks, although it can be made to do so via CSS.

• <hr> introduces a horizontal rule, a visual break between text elements.

• <cite> is for an inline citation of a book, film, article or other work. In terms of presentation, it italicizes content by default.

Add HTML Entities into the body copy where appropriate.

For the most part the previous steps will take care of most basic typography issues. There are, however, a few characters that can be tricky to generate in a word processor if you don’t know how: for example, the correct characters for feet and inches (they’re not single and double quotes: use the HTML entities ″ and ′ instead; note that HTML entities are case-sensitive), the character for degree (as in “It’s 39°C outside.”: °), how to do a correct common fraction (&frac followed by the numerator and denominator: for example, ¾ to generate ¾), and others.