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, which we then copy into our HTML document. (Remember that we must add appropriate tags around this content - <p>, <h1>, etc – to supply context.)

• Word processors also give the advantage of checking your work inline – that is, “on the fly”, as you type, for grammar and spelling errors. DreamWeaver does so, but post-facto… and requires that you use a menu option to initiate the process.

• Finally, word processors are 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 work on a web page as both you and the client are looking at it, possibly at different times and in different locations. (We will address working with clients later).

Transfer this body copy into your HTML document via copy-and-paste, applying markup as appropriate.

In addition to supplying appropriate block and inline tags, as well as adding the markup for basic heading elements, paragraphs, and lists (you may need to wrap small sections of text that were italicized in the word processor with an <em> tag, for example), 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. You’ll find this used frequently in books and longer magazine articles: it usually indicates a change of scene, topic or perspective. Note that <hr /> is closed inside itself, as it produces its own content (a horizontal rule). Also note that we can alter the appearance of the <hr /> to anything we want via CSS.

• <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.