Web Writing Made Better

Easy fixes for common writing errors.

The point of good writing is to accurately convey information. Writing exceedingly well is just as annoying as writing poorly, so most folks prefer writing that is conversational in style, but accurate enough to flow well and make sense. However, we all have some voids in our knowledge of any subject, and this one is no exception. But don’t worry; I’m not one of those people who like to use grammar and punctuation as weapons of egotism.

Okay, enough introductory baloney. Let’s explore a few common problems often seen in web writing.

(Note: This article isn’t finished. Will it ever be finished?)

Punctuation

Apostrophe

The humble apostrophe is perhaps the most abused character on the keyboard. Simple rule: Always ask yourself two questions before using an apostrophe:

What does the word own? or
What letters are missing?

If the word doesn’t own something (possessive), or if no letters are missing (contraction), don’t use an apostrophe. There are exceptions, but that will be right 99% of the time.

There are, of course, a few exceptions, such as plural acronyms like your do’s, and plural letters like your a’s, b’s, and abc’s. They don’t own anything, and no letters are missing. In such cases, the apostrophe is used for clarification. When possible, eliminate the improper apostrophe by using caps: Your ABCs reads okay, but Your As and your Bs doesn’t quite work.

Examples
Rule	Example	Audible	Meaning
Plural	Dogs bark loudly.	no apostrophe	More than one loud dog.
Possessive	The dog’s bark was loud.	apostrophe s	One dog who owns a loud bark.
Plural-possessive	The dogs’ tails wagged.	s apostrophe	More than one dog, each owning a wagging tail.
Wrong	The dogs tail wagged.	no apostrophe	Multiple dogs wagging one tail?
Wrong	The dogs tails wagged.	no apostrophe	Multiple dogs, each wagging multiple tails?
Correct	The dogs wagged their tails.	no apostrophe, add their	Multiple does wagged their tails.
Plural	My sons.	no apostrophe	More than one son.
Wrong:	My son’s.	apostrophe s	Your son’s what?
Possessive	My son’s house.	apostrophe s	He owns it.
Plural-possessive	My sons’ houses.	s apostrophe	Perhaps they together own several houses.
Contraction	We can’t.	apostrophe t	We cannot, with two letters gone.
Contraction	They’re.	apostrophe r e	They are.
Words with plural forms	Person, person’s, people, people’s	apostrophe s	One person, one person’s property; several people, several people’s property.
The its exception.	Its tail. It’s time.	apostrophe in second case	Its never gets an apostrophe unless it means it is or it has.

See? It’s simple! Just remember: an apostrophe either means possession or contraction. Generally, it is before the s for singular-possessive, and after the s for plural-possessive, except for words with plural forms, like people, where apostrophe s makes the already plural word possessive. And it’s, it apostrophe s, is a contraction only. If you can’t substitute it is, don’t put an apostrophe in its.

Quote Quotations with Quotes

Quote is a verb meaning to exactly repeat words and attribute them to their source. Quotation is a noun: the object being quoted. The word quotes (not quotations) is a contraction of quotation marks. Do I put quotations around that? No! You quote someone by putting quotes (quotation marks) around quotations.

To quote: He said, “These are my exact words.”
Quoted quotation: She said, “I heard him say, ‘Goodbye, dear,’ and then he left.” Single quotes are only used inside double quotes.
Sentence punctuation: comma and period goes inside the closing mark (in America) unless displaced outward by quoted punctuation (watch the comma): She said, “Hello,” which was unexpected. She said, “Hello?”, and then hung up. Other sentence punctuation goes outside the quotation: Did she say, “Hello!”?
If words are quoted, they must be exactly quoted, and not modified without brackets. She said, “[…] told her to stop it!” She said, “I told her [Mary] to stop it!” She said, “I told her [italics added] to stop it!”
Long quotations of about 40 words or more should be placed in a double-indented block, with no quotation marks. The block quotation should have half-inch margins.
Attributions: Not all quotations are introduced with he or she said: I read that “Kipling enjoyed early success with his poems[…]” (online-literature.com). Attributions should follow a dash, or appear in parenthesis, and the title of a publication should be italicized. Block quotations end with an attribution line: —Kipling, The Jungle Book, (p. 23, 1894). There are many variations; it’s best to pick a style guide and consistently follow it.
Not a quotation: I think she said she was going home. That’s a paraphrase, and doesn’t get marks.
Quotes are sometimes used to imply so they say or so-called. There are too many “experts” running around loose. They aren’t real experts; they are so-called or self-proclaimed experts. We thus disown the opinion by quoting it away to others.

Comma

The comma is a general-purpose delimiter for things like lists of items, related clauses, and clarification pauses. When in doubt, it’s better to use an extra comma than to omit a needed one. But beware of run-on sentences.

List of more than two items: This, this, and this. Each one but the last one gets a comma. Years ago, the rule was the last two items get no comma (this, this and this), but that is now wrong.
List of only two items: This and this. This or that. Two items separated by and or or don’t get a comma.
Between clauses: In this example, a comma separates two clauses. It’s usually better to rearrange the clauses to eliminate the comma: A comma previously separated the two clauses in this example. However, sometimes it’s necessary, as in this example. The brain needs the preceding However in order to properly process the rest of the thought. We’d have to re-think the sentence if we tacked it on the end, however.
Before which but not that: He did something bad, which was wrong. He did something that was wrong. Which and that are commonly confused, but which usually gets a comma.
The trailing too: We had fun, too. Too should usually be replaced with also: We also had fun. But not when too doesn’t mean also: It was too easy. That doesn’t mean it was also easy.

Semicolon

The semicolon has two valid uses: separating lists and joining related independent clauses. It’s like a comma but with a slightly higher degree of isolation. Examples:

Between lists: This, this, and this; and that, that, and that.
Between lists of things that require commas: Denver, Colorado; Houston, Texas; and Phoenix, Arizona.
Joining independent clauses: He was tired; he’d been working too long.

Colon

A colon has two valid uses: it precedes further explanation or clarification, and it separates numeric pairs like ratios and time.

Explanation: This is that we want: Respect and obedience.
Ratio: Analog TV screens have a 4:3 ratio.
Time: It started at 4:30.

Exclamation Mark

The exclamation mark denotes a louder voice or heightened emotion.

Rarely use more than one exclamation mark. Two would denote extreme hysteria, rage, or danger; they must not be used to exaggerate.
To really look immature, use about 40 of them.

Typography

Before desktop computers were invented, writers, using typewriters, used underlining to tell the typesetter to emphasize a word with appropriate typography—usually italics. They also used constructs like (c) to indicate the need of a copyright mark, and -- (two hyphens) to indicate an em-dash. The typesetter manually turned these into the appropriate typographic characters. Typewriters, and typewriter habits, are for manuscripts, not publications.

Later, people with no knowledge of typography acquired computerized word processors, allowing them to run amok and bold-italic-underline everything in sight. But they also kept their typewriter habits and mixed typographic effects with them, WITH STUFF LIKE THIS . . . Never use more than one emphasis type on the same text!

Rather than misuse the technology, let’s learn some basic typography, and then use it properly.

Text Formatting

Anyone can click on the B–I–U buttons, but few really know what they mean or when to use them.

Italic formatting adds moderate emphasis to a word or two. Italic emphasis is not emotional; it’s intended to provide more clarity than when reading in a flat tone: We went out (not others). We went out (not in). Italicizing a whole paragraph is preposterous—who can read a whole paragraph in an emphatic tone? Italics are also used to denote titles of publications: The New York Times. Do not quote such titles unless they actually are quotations: He said, “The Jungle Book was written by Kipling.” Notice how the opening quotation mark inherits the italic attribute, because it is touching it. Punctuation usually inherits the attribute (if any) of the text it touches. The proper inline HTML is some italic text.. The  tag is deprecated and should never be used.
Bold formatting adds strong emphasis. It should be rarely used in body copy, and never to exaggerate. Look at any magazine or book: it’s extremely rare to see bold body text. Bold is fine for headings, if that’s the style being used. In that case, it doesn’t mean strong emphasis; it means heading, and provides the reader a means of easily scanning topics. The proper inline HTML is some bold text.—but headers should be controlled with CSS: h1 { font-weight:bold }. The  tag is deprecated and should never be used.
Underlining is a deprecated typewriter emphasis and should rarely if ever be used. Some people use underlining in an attempt to add importance or strength to their words, as one might with pen and paper. They should use stronger writing, not weak writing embellished with misused typographic effects. As stated above, underlining is the typewritten way of telling the typesetter “add the appropriate emphasis to this,” not “add underlining to this.” We almost never see underlining used in a book or magazine, because all professional publishers know it’s improper in typography. In HTML, the  tag is deprecated and should never be used, and there is no inline equivalent, so css must be used: underlined text, or a class should be created in the main CSS file. But it’s best to just forget underlining.
All-caps: Another deprecated typewriter emphasis, ALL CAPS now means shouting in anger, and shows immaturity, like 40 exclamation marks. Never use all-caps for headings; use a different or larger typeface instead—usually one of the available Heading styles.
Centering: Yet another deprecated typewriter effect, the centering of headings for emphasis should be avoided. Centering is appropriate for column headings (like a calendar), or a few lines of text, (like a formal invitation), but should not be used for headings.
Indenting: The first-line paragraph indent is for books, where no paragraph spacing is added. Either indent the first line (¼-inch), or add an extra half-line between paragraphs, but not both. On web sites, the only things that should be indented are lists and blockquotes.
Vertical spacing: This should always be performed by adding top and/or bottom margin to an element, and never with one or more blank lines. In a word processor, select the line or prargraph, then click the ¶ (paragraph) button, then adjust the top/bottom margin as needed. If used more than once, create a new style or modify an existing one. In HTML, the same is performed with CSS: h1 { margin-top:1em; margin-bottom:.5em; }. An em is equal to the current line-hight. Multiple ’s should never be used, but one or two are acceptable, if absolutely needed.
Text alignment: Left, center, right, and justified. Paragraphs should be justified unles they are too narrow to permit smooth word spacing. The left-justified (aka ragged-right) style is gaining popularity on the web, because so many “designers” are making skinny 600-pixel templates with a 200-pixel side-bar, then floating big ad boxes in the midst of it all. This poor practice leads to areas where the actual text column is so narrow that it can only contain two or three widely-spaced words, so they promote the ugly and hard-to-read ragged-right alignment. In proper HTML, the relevant selectors are assigned a text-alignment in the CSS file, overriding the browser defaults: p { text-align:justify; }.
Double and multiple spaces: Another typewriter habit is adding two spaces after a period, or even worse, trying to position text with billions of leading spaces. This is a really stupid habit, because one can’t possibly align anything with spaces when using a variable-width (proportional) font. Also, it’s completely usless on the web, because all browsers silently “eat” all but one consecutive spaces. Not to be deterred, some knucke-heads actually try to use the non-breaking space to position text, like this:
       Some “indented” text. Amazing…
Typefaces (fonts): No more than two should be used: one for headings, and one for body. In formal documents, limit it to only one. Serif typefaces should not be used (for body text) on the web, because they employ variable stroke-width that only renders well in print (an then, only at 600-dpi or more), particularly at small sizes. Sans-serif faces, with a constant stroke-width, usually occupy 2 pixels on the 72- or 96-dpi computer monitor, and thus are highly readable. One serif font that’s stroked heavily enough to be easily readable on the monitor is Bookman. As stated in my font-family article, the best fonts on the web are Century Gothic (headings) and Verdana (body). Both are constant-stroke sans-serif faces, and are widely installed. Hint: if all your sans fonts look too thin, make sure you have sub-pixel hinting (“ClearType”) enabled in your Display Properties—it’s much easier to read!
Headings should be set a little larger, bolder, and with a bit more white-space. Gigantic headings are yet another corny form of exaggeration. Heading 1 should be used only once in an article. Headings 2, 3, 4, and 5 should be used as sub-headings to subdivide the article into topics. It is usually necessary to change the word processor’s default styles (or write CSS for HTML), for all headings.
Body paragraphs should be set with 1.5em line spacing (typesetters call this “leading,” from the days when they put lead shims between lines of text). Most web copy is too small and too close, particularly on the newer high-resolution displays. Default body size should 16 pixels high, but not explicitly constrained to that, so that users may use their browser’s text size and zoom features if needed. Paragraphs should be justified if the line-length (column width) will properly support it. Narrow columns should be left-aligned (aka ragged-right) to prevent excessive spacing of words—but such narrow text columns are poor layout design.
White-space (not obnoxious borders) should be used around certain blocks of text to set it apart and draw attention to it. Many web sites use excessive white-space around headings, and insufficient white-space in paragraphs. This web site uses 1.5em line spacing, with an extra .5em after paragraphs, list items, and headings. It’s a simple formula, and I think it works well to provide easy reading.
This paragraph is an example of the typical browser default for normal paragraph text. The typeface is the tightly-set, finely-stroked Times family, made for print, not computer screens. The 10-point font is too small, and the lines are too close and too long to be easily read. It violates the well-established typographic ratio of line-length to line-height, making it hard for the eyes to locate the beginning of the next line. If you are over 40, and using a 1280 display, this is probably pretty hard to read. If you want to run off all your visitors, just write your whole web site like this, and be sure to add some gigantic headers and misuse all the available text formatting options at your disposal. Now here’s you a Lorem, just for the fun of it. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Are you tired yet?

Other silly embellishments like heavy boxes with no padding, clashing colors, and loud backgrounds should be avoided. Too many web sites are using small, dark gray text on black backgrounds to suggest a spooky, immature mood. Others (the artsy type), are using light grey text on light backgrounds. Such mixtures are becoming more popular, and they run off many visitors by being hard to read. I see many sites where I have to inverse the colors (Ctrl+A) in order to read the text! I don’t stay long—never more than 2 seconds.

Typographic Marks, Punctuation, and Symbols

A typewriter is limited to only a few typographic marks. Computer keyboards inherited that deficiency, having about thirty-two non-alphanumeric marks. But computer typefaces now contain hundreds of characters. Accessing non-keyboard characters is relatively easy. Some word processors use “smart quotes,” which means they look at the context and convert straight-quotes to typographer’s quotes. Other programs, like text editors, may be enhanced with keyboard macro scripts. AutoHotKey (AHK) is a free utility that can make any key combination do whatever you want, including inserting typographic characters. For example, I mapped the proper apostrophe (the right-single-quote) to the App+' key combination.

Web writers should be familiar with the proper use of a few characters that are not on the keyboard. Examples:

Typographer’s quotes (aka curly-quotes) should be used in web writing, instead of typewriter-style straight-quotes (aka inch-marks). in HTML, it’s “ and ” .
Apostrophe: In emails and such, the straight apostrophe is okay, but in publications, the right-single-quote is the correct apostrophe. In HTML, it’s written ’ .
Ellipsis: This is one character, not three periods… (drag-select it and see!) Using three periods is another deprecated typewriter habit... Using three spaced periods is the worst habit . . . No, even worse is the stupid idea that an ellipsis can’t close a sentence, so we need four spaced periods . . . .
The ellipsis has two meanings: At the end of a sentence, when a thought trails off, leaving the reader to… (finish the thought), and in the middle of a sentence, to indicate … is missing. But it is never used alone in direct quotations, which are only modified with brackets: She said, “First, we went to the store, then […], and then we came home.” In HTML, the ellipsis is written … .
Hyphens and dashes: the one on the keyboard is a hyphen, and is used to split words at the end of a line or join compound words like forty-five. There are two dashes not on the keyboard: the en-dash and the em-dash. The en-dash joins ranges: 2002–2009. The longer em-dash joins different thoughts in the same sentence—writers struggle with them—when such an interjection is even less connected to the thought than a parenthetical (like this). An em-dash gets no spaces, and is not two hyphens.
Trademarks: Proper trademarks should always be used in web writing. Copyright is ©, not (c); trademark is ™, not tm, and registered trademark is ®.
Fractions: Most typefaces have three fraction characters: ¼, ½, and ¾. Some symbol and math fonts have several more. It’s usually better to spell out numbers (five and one-half) in paragraphs, but sometimes 5½ is appropriate, and always better than 5-1/2. Avoid mixing: The box was 5½ by 6-7/8.
Superscript and subscript: These usually mess up line spacing, and should be avoided when possible. However, H₂O is better than H2O, which looks like H-twenty. Sup¹, sup², and sup³ are available in most typefaces, and are designed to not affect line spacing. They are real characters, not regular characters that have been superscripted by software. Note the difference in sup1 and a superscripted 1: ¹¹. The sup1 fits in the line. Notice how the line spacing in this paragraph is messed up; I used sub and sup in the code.
Currency: cent ¢, pound £, yen ¥, and euro €.
Legal: paragraph ¶, section §, dagger †, and double-dagger ‡.
Math: degree °, plusminus ±, squared ², cubed ³, micro µ, times ×, divide ÷, function ƒ, fraction-slash ⁄, not equal ≠, minus −, radical √, infinity ∞, prime/minutes/feet ′, double-prime/seconds/inches ″, and a bunch of others, including most of the Greek alphabet. Notes: The minus is not a hyphen or dash. The prime and double-prime are not quotes. The times is not an x. They’re all different characters, and just because they’re not on key-caps doesn’t mean they should be ignored.

Most of the above, and many more, are in most typefaces commonly in use today. If you need to check what’s in a font-family or look up the numeric and named entities, I have made a page just for that purpose. See HTML 4 Character Entities.

Commonly Confused Words

These are frequently misused in writing.

(This section is under construction.)

There, their, and they’re. There, t h e r e, is like here. It means a place. Their, t h e i r, is a possessive pronoun. That dog is their dog. There are many ways to train a dog. They’re, t h e y apostrophe r e, always means they are. They’re not home. Therefore, they’re not at their house, which is somewhere over there.
Then and than. Then is like when. Than is a comparison. Then we had more of one than another.
Alot, a l o t, and allot, a l l o t. Alot is not a word. The lot is a land measurement. A lot is one lot, not many. Lots is the plural, meaning more than one lot: He bought several lots and built houses on them. Allot, a l l o t, is a verb implying, to give an allotment; to distribute or apportion. The funds were allotted to the winners.

More Info

For more, the Dr. Grammar and The Lynch Guide are excellent, user-friendly resources.

Word Fun

Um, like, awhile ago i was tryin to lern to rite this stoopid artical, so I browse'd alot of Blog's and brush'd up my english on it and i saw where enformal righting aint so bad no more, long as it make some kinda cent's. Than I lernt that SumTimeZ its O>K> to start up a sennance with and or but. And so sumtine's i do. But usaly i dont. And when righting, them participles dont dangle no more, and thier's not no double-negatives and\or run_on sennance's ending with multi preposition's, so what wood I wanna go and study up on them for? No fragments, too.

—kv5r